让你脱口而出的 AJAX（一）

1.1 AJAX

    AJAX 即Asynchronous Javascript And XML，它不是一门的新的语言，而是对现有持术的综合利用。
    1. 基于web标签的xhtml+css
    2. 可以使用dom进行动态的显示和交互
    3. 使用XML和XSLT(是一种用于将XML文档转换任意文本的描述语言)进行数据的交换和操作
    4. 使用XMLHttpRequest进行异步的数据查询和检索等操作。。。
本质:  是在HTTP协议的基础上以异步的方式通过XMLHttpRequest对象与服务器进行通信。

作用：可以在页面不刷新的情况下，请求服务器，局部更新页面的数据；

1.2 异步

    指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步。其优势在于不阻塞程序的执行，从而提升整体执行效率。
同步：同一时刻只能做一件事，上一步完成才能开始下一步
异步：同时做多件事，效率更高

XMLHttpRequest可以以异步方式的处理程序。

1.3 AJAX 发送GET 请求

// 1 创建异步对象
            var xhr = new XMLHttpRequest();
            // 2 设置 请求行 open(请求方式，请求url):
                // get请求如果有参数就需要在url后面拼接参数（？后面即传递的参数，以键值对形式，多个参数用 & 隔开）
            xhr.open("get","validate.php?username="+name);
            // 3 设置 请求头 setRequestHeader('key':'value')
                // get方式不需要设置请求头
            // 4 设置 请求体:发送请求  send(参数：key=value&key=value)
                // 对于 get请求不需要在这个位置来传递参数（因为参数已经拼接在url 后面了）
            xhr.send(null);
            // 一个真正成功的响应应该两个方面：1.服务器成功响应  2.数据已经回到客户端并且可以使用了
            // 监听异步对象的响应状态 readystate
                // 0:创建了异步对象，但是还没有真正的去发送请求
                // 1:调用了send方法，正在发送请求
                // 2:send方法执行完毕了，已经收到服务器的响应内容--原始内容，还不可以使用
                // 3:正在解析数据
                // 4:响应内容解析完毕，可以使用了
                // 当异步对象的响应状态发生改变的时候，会触发一个事件：onreadystatechange
            xhr.onreadystatechange = function(){
                if(xhr.status == 200 && xhr.readyState == 4){
                // 接收以json格式传递的数据
                  console.log(xhr.responseText); 
                // 接受以XML格式传递的数据
                  console.log(xhr.responseXML);  
                }
            }

1.3 AJAX 发送POST 请求

// 1 创建异步对象
            var xhr = new XMLHttpRequest();
            // 2 设置请求行 open(请求方式，请求url)
                // post请求不需要拼接参数
            xhr.open("post","validate.php");
            // 3 设置请求头:setRequestHeader()              
                // post需要设置请求头：Content-Type:application/x-www-form-urlencoded
            // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");如果没有设置，
            参数无法正确的传递到服务器(本质上说，如果没有参数，也不一定需要设置，不会影响请求的发送)
            // 4 设置请求体 send()
                // post的参数在这个函数中设置(如果有参数)
            xhr.send("username="+name);
            // 一个成功的响应有两个条件：1.服务器成功响应了  2.异步对象的响应状态为4(数据解析完毕可以使用了)
            // 当异步对象的响应状态发生改变的时候，会触发一个事件：onreadystatechange
            xhr.onreadystatechange = function(){
                // 判断服务器是否响应      判断异步对象的响应状态
                if(xhr.status == 200 && xhr.readyState == 4){
                    // 接收以json格式传递的数据
                  console.log(xhr.responseText); 
                // 接收以XML格式传递的数据
                  console.log(xhr.responseXML);  
                }
            

1.4 AJAX 中GET请求与POST请求的区别(面试经常会问)

    1、GET没有请求体，使用xhr.send(null)
    2、GET可以通过在URL上拼接请求参数
    3、POST可以通过xhr.send('name=itcast&age=10')设置请求参数
    4、POST需要设置Content-type:application/x-www-form-urlencoded
    5、GET大小限制约4K，POST则没有限制