任务24

2017-01-14 本文已影响0人 YBTK

问答

1. ajax 是什么？有什么作用？

AJAX ：异步的JavaScript和XML，通过和后台进行少量的数据交换，让网页实现异步更新，在不重新加载整个页面的情况下，更新网页的部分内容，提高用户体验

例：

index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax Test</title>
</head>
<body>

<fieldset>
    <legend>简单的GET</legend>
    <div id="myName">
        <h2>我的名字</h2>
    </div>
    <button id="myNameBtn">修改内容</button>
    <script>
        document.getElementById("myNameBtn").addEventListener('click',function(){
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function(){
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    document.getElementById("myName").innerHTML = xmlhttp.responseText;
                }          
            }
            xmlhttp.open("GET","ajax_simple.php",true);
            xmlhttp.send();
        })
    </script>
</fieldset>

</body>
</html>

ajax_simple.php

<?php
  echo '就不告诉你 (￣0 ￣)y' 
?>

2. 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？(npm install -g server-mock) 知识点视频-如何 mock 数据

前后端开发联调需要注意哪些事情？
1. 约定好数据,确定数据的内容和格式
2. 约定好接口，请求和响应的格式，名称，参数等
3. 将约定做成规范文档

后端接口完成前如何 mock 数据？
1. 根据约定的接口，用自己假定的数据进行测试
2. 搭建本地php服务器，用php文件提供数据
3. 用server-mock搭建本地服务器，用模板语言提供测试数据

3. 点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?

var btnActive = false;
btn.addEventListener('click', function() {
    if (!btnActive) {
        btnActive = true;
        ajax({
            btnActive = false; //ajax交互结束后，不管响应结果如何
        });
    }
}, false);