Ajax

1. 是对现有技术的综合利用（xhtml+css；dom动态的显示和交互；xml和json进行数据交换；XMLHttpRequest进行异步数据查询）
2. 本质：在HTTP协议的基础上，以异步的方式，通过XMLHttpRequest对象与服务器进行通信。
3. 作用：实现页面数据的局部刷新。

image

异步：
定义：某段程序的执行不阻塞其他程序的执行，程序的执行顺序不依赖于程序本身的书写顺序。
优势：不阻塞其他程序的执行，从而提升整体执行效率。
劣势：如果存在多个异步程序，无法判断它们的执行先后顺序。

• 使用异步对象发送get请求

        document.querySelector("#username").onblur = function(){
            // 1.获取用户数据
            var name = this.value;

            // 2，让异步对象发送请求
            // 2.1 创建异步对象
            var xhr = new XMLHttpRequest();
            // 2.2 设置 请求行 open(请求方式，请求url):
                // get请求如果有参数就需要在url后面拼接参数，
                // post如果有参数，就在请求体中传递
            xhr.open("get","validate.php?username="+name);
            // 2.3 设置 请求头 setRequestHeader('key':'value')
                // get方式不需要设置请求头
                // post需要设置 Content-Type:application/x-www-form-urlencoded
            // 2.4 设置 请求体:发送请求  send(参数：key=value&key=value)
                // 如果有参数，post应该在这个位置来传递参数
                // 对于 get请求不需要在这个位置来传递参数
            xhr.send(null);

            // 响应报文：
            // 报文行：响应状态码 响应状态信息  200 ok
            // 报文头：服务器返回给客户端的一些额外信息  
            // 报文体：服务器返回给客户端的数据 responseText:普通字符串  responseXML：符合xml格式的字符串
            // xhr.status:可以获取当前服务器的响应状态  200 》成功
            console.log(xhr.status);
            // 一个真正成功的响应应该两个方面：1.服务器成功响应  2.数据已经回到客户端并且可以使用了
            // 监听异步对象的响应状态 readystate
            // 0:创建了异步对象，但是还没有真正的去发送请求
            // 1.调用了send方法，正在发送请求
            // 2.send方法执行完毕了，已经收到服务器的响应内容--原始内容，还不可以使用
            // 3.正在解析数据
            // 4.响应内容解析完毕，可以使用了
            xhr.onreadystatechange = function(){
                if(xhr.status == 200 && xhr.readyState == 4){
                    console.log(xhr.responseText);
                    console.log("-----------");
                    document.querySelector(".showmsg").innerHTML = xhr.responseText;;
                }
            }
        };

• 使用异步对象发送post请求

        document.querySelector("#username").onblur = function(){
            // 1.获取用户数据
            var name = this.value;
            // 2\. 让异步对象发送post请求
            // 2.1 创建异步对象
            var xhr = new XMLHttpRequest();
            // 2.2 设置请求行 open(请求方式，请求url)
                // 1.get 需要在url后面拼接参数(如果有参数)
                // 2.post请求不需要拼接参数
            xhr.open("post","validate.php");
            // 2.3 设置请求头:setRequestHeader()
                // 1.get不需要设置
                // 2.post需要设置请求头：Content-Type:application/x-www-form-urlencoded
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            // .如果没有设置，参数无法正确的传递到服务器(本质上说，如果没有参数，也不一定需要设置，不会影响请求的发送)
            // 2.4 设置请求体 send()
                // 1.get的参数在url拼接了，所以不需要在这个函数中设置
                // 2.post的参数在这个函数中设置(如果有参数)
            xhr.send("username="+name);

            // 3.让异步对象接收服务器的响应数据
            // 一个成功的响应有两个条件：1.服务器成功响应了  2.异步对象的响应状态为4(数据解析完毕可以使用了)
            // 当异步对象的响应状态发生改变的时候，会触发一个事件：onreadystatechange
            xhr.onreadystatechange = function(){
                // 判断服务器是否响应      判断异步对象的响应状态
                if(xhr.status == 200 && xhr.readyState == 4){
                    document.querySelector(".showmsg").innerHTML = xhr.responseText;
                }
            }
        };

Ajax是对上述两种请求的封装。
jQuery中的Ajax参数如下。

        $.ajax({
            type: "method", //请求方式 get post
            url: "url", //请求url
            data: "data", //请求需要传递的参数
            dataType: "dataType", //服务器返回格式
            beforeSend: function (param) {

            }, //请求发起前调用
            success: function (response) {

            }, //请求成功之后的回调
            complete: function (param) {  

            }, //响应完成时调用（包括成功或失败）
            timeout: 1500 // 请求超时
        });