【Ajax（技术方案）】Ajax理解和实践

---

关于Ajax

Ajax是对Asynchronous Javascript +XML的简写，它的诞生使得向服务器请求额外的数据而不用刷新页面。它的优缺点如下：

优点：

• 更新页面，页面无需刷新，用户的体验非常好。
• 使用异步方式与服务器通信，具有更加迅速的响应能力。
• 基于标准化的并被广泛支持的技术，不需要下载插件。

缺点：

• 浏览器历史记录的遗失： 在使用AJAX对页面进行改变后，由于并没有刷新页面，没有改变页面的访问历史，当用户想要回到上一个状态时，无法使用浏览器提供的后退。
• AJAX的安全问题： AJAX的出现就像建立起了一直通服务器的另一条通道，容易遭受到一些攻击。

Ajax实践

这里我使用server-mockd建立本地服务器用来做这次Ajax的实践server-mockd的使用我就不讲解了
例如有个文件夹test通过server-mockd在该文件夹建立本地服务器
文件夹有两个文件index.html 和router.js
index.html就是我们的前端部分利用Ajax发送请求
router.js则是我们模拟的后端用来接收请求并且返回数据
接下来看两个文件的源码（详细内容源码有注释）

index.html 代码如下

<div class="query-area">
    <input type="text" name="username">
    <button>查询</button>  
</div>
<div class="detail-area">
    <ul></ul>
</div>
<script>
    var btn = document.querySelector('.query-area button')
    var input = document.querySelector('.query-area input')
    var detailCt = document.querySelector('.detail-area ul')
    btn.addEventListener('click', function(){
        //创建一个XMLHttpRequest对象（XMLHttpRequest对象用于在后台与服务器交换数据）
        var xhr = new XMLHttpRequest()
        //onreadystatechange事件，每当 readyState 属性改变时，就会调用该事件。
        //readyState：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
        //0: 请求未初始化
        //1: 服务器连接已建立
        //2: 请求已接收
        //3: 请求处理中
        //4: 请求已完成，且响应已就绪
    
        //下面这个事件就是个普通事件可以监听上面声明的xhr里面数据变化
        //这里可以用onload但是onload只能捕捉到最后数据加载完成哪一步
        xhr.onreadystatechange = function(){
            //判断是否有获取到数据
            //xhr.readyState == 4表示已经完成readyState第4步(4: 请求已完成，且响应已就绪)
            //(xhr.status == '200' || xhr.status == '304')200表示数据是ok 304表示从缓存获取到了数据
            if(xhr.readyState == 4 && (xhr.status == '200' || xhr.status == '304')){
                //获取到数据后xhr里面就储存了需要的数据
                var friends = JSON.parse(xhr.responseText)
                //调用下面的render()函数得到组装好的html
                var html = render(friends)
                //把html塞进网页中
                detailCt.innerHTML = html
            }
        }
        //初始化一个请求.
        //'get':请求类型
        //'/friends?username=' + input.value:请求的url
        //true:异步  false:同步
        //发送请求readyState 属性改变；触发上面的xhr.onreadystatechange
        xhr.open('get', '/friends?username=' + input.value, true)
        //调用.send()请求发出给后端
        xhr.send()
    })
    //该函数吧获取的数据组装成html
    function render(friends){
        var html = ''
        for(var i = 0; i < friends.length; i++){
            html += '<li>' + friends[i] + '</li>'
        }
        return html
    }
</script> 

router.js代码如下

/**
 * 使用范例
 */
/**
 * 发送GET请求,无参数
 * GET /query
 * 返回响应数据
 */

//前面的xhr.open('get', '/friends?username=' + input.value, true)发送请求,这里接收
//get：请求类型 
//'/friends?username=' + input.value:请求的url
//req:请求参数
app.get('/friends', function(req, res) {
    //req.query 可以获取请求参数
    var username = req.query.username
    var ret = ['nobody'] 
    if(username == 'abc'){
        ret = ['小明', '小刚']
    }
    res.send(ret)  //res.send用于直接发送数据给前端
});