Ajax介绍

一、同步和异步

       同步：依赖前面的任务，必须等待前面的任务完成，才能继续后面的任务；

       异步：不受当前任务的影响，可以同时进行；

       案例：我们在访问一个网站时，当浏览器加载完HTML、CSS、JS以后，网站的内容就固定了。如果想让网站内容发生更改，就必须刷新页面才能够看到更新的内容。可如果用到异步更新，情况就大为改观了。比如，我们在访问新浪微博时，看到一大半了，点击底部的加载更多，会自动帮我们加载更多的微博，整个页面并没有刷新而只是部分刷新了。试想一下，如果没有异步刷新的话，每次点击“加载更多”，整个网页都要刷新，体验就太不好了。web前端里的异步更新，就要用到Ajax。

二、概念

       Ajax：（Asynchronous Javascript And XML）异步 JavaScript 和 XML。它不是凭空出现的新技术，而是对于现有技术的结合。Ajax的核心是js对象：XMLHttpRequest。在浏览器中，我们可以在不刷新页面的情况下，通过ajax的方式去获取一些新的内容。

三、用法

       通过Ajax发送请求的五个步骤：

       1、创建 XMLHttpRequest 对象。

var xhr = new XMLHttpRequest();

       2、设置请求的参数。包括：请求的方法、请求的url，header等信息。

// 如果是GET请求，第三个参数表示是异步请求
xhr.open("GET","http://localhost:8000/index.php",true);
// 如果是POST请求，第三个参数表示是同步请求
xhr.open("POST","http://localhost:8000/index.php",false);
// 如果需要传cookie必须设置withCredentials为true,切记一定不能用代码把cookie设置到header中！！！
xhr.withCredentials = true;
// POST请求必须添加此header
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

       3、发送请求。

// GET请求
xhr.send();
// POST请求
xhr.send('name=fox&age=18');

       4、注册事件。 onreadystatechange事件，状态改变时就会调用。如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。注册onreadystatechange事件后，每当readyState属性改变时，就会调用onreadystatechange函数。 

       readyState：XMLHttpRequest 的状态：

              0：请求未初始化

              1：服务器连接已建立

              2：请求已接收

              3：请求处理中

              4：请求已完成，且响应已就绪

       5、获取返回的数据，可以返回多种格式：

              1：responseText：获得字符串形式的响应数据。

              2：responseXML：获得XML形式的响应数据。

xhr.onreadystatechange = function(){
    // 当readyState=4，且状态码=200或304时，表示响应已就绪。
    if(request.readyState == 4){
        if(request.status == 200 || request.status == 304){
            var result = request.responseText;
            alert(result);
        }
    }
}