ajax介绍

一张图搞定AJAX.png AJAX是异步的JavaScript和XML（Asynchronous JavaScript And XML）。简单点说，就是使用 XMLHttpRequest 对象与服务器通信。它可以使用JSON，XML，HTML和text文本等格式发送和接收数据。

ajax原理：通过浏览器内置的请求对象XMLHttpRequest来实现同步/异步获取服务器的数据。所谓异步，就是浏览器发送请求时可以同时执行其他操作，当服务器返回数据给请求对象时，浏览器再将数据渲染在页面上，实现局部刷新，提升用户体验

如何实现http请求以及如何处理响应数据？

一、创建请求实例

浏览器内置了XMLHttpRequest对象，可以向服务器发送请求，IE6及以下的浏览器内置的请求方法不同，要注意兼容。

if (window.XMLHttpRequest) { // IE7及以上主流浏览器
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE6及以下
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

二、创建请求连接，与服务器通讯

通过调用HTTP请求对象的 open() 和 send() 方法发送一个实际的请求：

open()方法包含3个参数：

第一个参数是HTTP请求方法 - 有GET，POST，HEAD以及服务器支持的其他方法；
第二个参数是你要发送的URL。由于浏览器同源策略，默认不能调用第三方URL域名；
第三个参数是可选的，用于设置请求是否是异步的。如果设为 true (默认值)，即开启异步，JavaScript就不会在此语句阻塞，使得用户能在服务器还没有响应的情况下与页面进行交互。 send()方法的参数可以是任何你想发送给服务器的内容，注意：发送表单数据时应该用服务器可以解析的格式。

GET请求与POST请求有不同之处：

GET请求请求参数直接在url上拼接

httpRequest.open('GET', 'http://www.example.org/some.file?page=3&key=1', true);
httpRequest.send();

POST请求请求参数放到send()里面；在调用 send()方法之前需要设置请求头

httpRequest.open('POST', 'http://www.example.org/some.file', true);
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
send("page=3&key=1")

三、处理服务器响应

具体实践时区分同步和异步2种情况：

同步

1. httpRequest.open("GET","info.txt",false);  
2. httpRequest.send();  
3. document.getElementById("myDiv").innerHTML=httpRequest.responseText; //获取数据直接显示在页面上

异步需要在请求状态改变事件onreadystatechange中获取到响应的数据具体有2种方法：
httpRequest.responseText – 服务器以文本字符的形式返回
httpRequest.responseXML – 以 XMLDocument 对象方式返回，之后就可以使用JavaScript来处理

httpRequest.onreadystatechange=function()  { 
 if (httpRequest.readyState==4 && httpRequest.status==200)  { 
    document.getElementById("myDiv").innerHTML=httpRequest.responseText;  
  }
}

readyState与status

readyState和status是XMLHttpRequest对象的属性，用来标识当前XMLHttpRequest对象处于什么状态。

readyState：总共有5个状态值，分别为0~4，每个值代表了不同的含义

0：未初始化 -- 尚未调用.open()方法；
1：启动 -- 已经调用.open()方法，但尚未调用.send()方法；
2：发送 -- 已经调用.send()方法，但尚未接收到响应；
3：接收 -- 已经接收到部分响应数据；
4：完成 -- 已经接收到全部响应数据，而且已经可以在客户端使用了；

status：HTTP状态码(status)由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字没有分类的作用。

HTTP状态码共分为5种类型：

信息响应(100–199)
成功响应(200–299)
重定向(300–399)
客户端错误(400–499)
服务器错误 (500–599)

常见的status状态码

200 表示从客户端发来的请求在服务器端被正常处理了。
204 表示请求处理成功，但没有资源返回。
301 表示永久性重定向。该状态码表示请求的资源已被分配了新的URI，以后应使用资源现在所指的URI。
302 表示临时性重定向。
304 表示客户端发送附带条件的请求时（指采用GET方法的请求报文中包含if-matched,if-modified-since,if-none-match,if-range,if-unmodified-since任一个首部）服务器端允许请求访问资源，但因发生请求未满足条件的情况后，直接返回304Modified（服务器端资源未改变，可直接使用客户端未过期的缓存）
400 表示请求报文中存在语法错误。当错误发生时，需修改请求的内容后再次发送请求。
401 表示未授权（Unauthorized)，当前请求需要用户验证
403 表示对请求资源的访问被服务器拒绝了
404 表示服务器上无法找到请求的资源。除此之外，也可以在服务器端拒绝请求且不想说明理由时使用。
500 表示服务器端在执行请求时发生了错误。也有可能是Web应用存在的bug或某些临时的故障。
503 表示服务器暂时处于超负载或正在进行停机维护，现在无法处理请求。

附件：贴上测试代码

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax原理与实践</title>
</head>

<body>
    <ul>
        <li>请求数据时若不满足谷歌浏览器同源策略，会有跨域问题</li>
        <li>强制关闭同源策略：复制桌面谷歌浏览器快捷图标一份，右键复制后的图标》属性，在目标一栏的值后面加 --user-data-dir="c:\ChromeDebug" --test-type
            --disable-web-security</li>
        <li>注意--user有空格，然后点击确定，再把跨域的地址在复制后的浏览器打开即可</li>
    </ul>
    <button onclick="sendSyncRequest()">发送同步请求</button>
    <button onclick="sendAsyncRequest()">发送异步请求</button>
    <div id="myDiv"></div>

    <script>
        var httpRequest = {}
        if (window.XMLHttpRequest) { // IE7及以上主流浏览器
            httpRequest = new XMLHttpRequest();
        } else if (window.ActiveXObject) { // IE6及以下
            httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }
        function sendSyncRequest() {
            // 同步请求
            // httpRequest.open('GET', './test.txt', false); // 请求txt文件
            httpRequest.open('GET', './test.json', false); // 请求json文件
            httpRequest.send();
            document.getElementById("myDiv").innerHTML = httpRequest.responseText
        }

        function sendAsyncRequest() {
            // 异步请求
            // GET请求
            // httpRequest.open('GET', 'http://www.example.org/some.file?page=3&key=1', true) // 请求参数拼接在url上
            // httpRequest.send();

            // POST请求
            httpRequest.open('POST', 'http://www.example.org/some.file', true)
            httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') // POST请求必须设置请求头
            send("page=3&key=1") // 参数必须在send里面设置
            
            // 处理响应数据
            httpRequest.onreadystatechange = function () {
                if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                    document.getElementById("myDiv").innerHTML = httpRequest.responseText;
                }
            }

        }
    </script>
</body>

</html>

参考文章

HTTP 教程

AJAX 教程

Ajax原理一篇就够了

Ajax原理及实践