ajax学习

现在前端的请求方法非常多，可以是最开始的XmlHttpRequest，也可以是使用最多的ajax，也可以是Promise和一众在Promise之上进行封装的请求方法。

现在我想重新看一下ajax。

get和post

大家知道http有很多方法，方法如下

方法	描述
GET	从指定的资源请求数据。
POST	向指定的资源提交要被处理的数据。
HEAD	与 GET 相同，但只返回 HTTP 报头，不返回文档主体。
PUT	上传指定的 URI 表示。
DELETE	删除指定资源。
OPTIONS	返回服务器支持的 HTTP 方法。
CONNECT	把请求连接转换到透明的 TCP/IP 通道。

比较常用的是get、post、put和delete。

今天这边主要比较的是大家经常比较的get和post。

GET 方法

请注意，查询字符串（名称/值对）是在 GET 请求的 URL 中发送的：

/test/demo_form.asp?name1=value1&name2=value2

有关 GET 请求的其他一些特点：
GET 请求可被缓存
GET 请求保留在浏览器历史记录中
GET 请求可被收藏为书签
GET 请求不应在处理敏感数据时使用（在url中拼接参数，明文可见。）
GET 请求有长度限制 （这边的长度限制不是http对get的限制，而是浏览器对url地址有长度限制）
GET 请求只应当用于取回数据

POST 方法

请注意，查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的：

POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2 

有关 POST 请求的其他一些注释：
POST 请求不会被缓存
POST 请求不会保留在浏览器历史记录中
POST 不能被收藏为书签
POST 请求对数据长度没有要求

ajax实现

ajax的核心机制是XMLHttpRequest。文档可以看这个 MDN XMLHttpRequest 文档。

我挑了几个比较重要的属性和方法记一下：

readyState方法：

请求的五种状态

值	状态	描述
0	UNSENT (未打开)	open()方法还未被调用.
1	OPENED (未发送)	open()方法已经被调用.
2	HEADERS_RECEIVED (已获取响应头)	send()方法已经被调用, 响应头和响应状态已经返回.
3	LOADING (正在下载响应体)	响应体下载中; responseText中已经获取了部分数据.
4	DONE (请求完成)	整个请求过程已经完毕.

var Ajax={
    get: function(url, fn) {
        var obj = new XMLHttpRequest();
        // XMLHttpRequest对象用于在后台与服务器交换数据          
        obj.open('GET', url, true);
        obj.onreadystatechange = function() {
            if (obj.readyState == 4 && obj.status == 200 || obj.status == 304) {
                // readyState == 4说明请求已完成
                fn.call(this, obj.responseText);  //从服务器获得数据
            }
        };
        obj.send();
    },
    post: function (url, data, fn) {         
        // data应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
        var obj = new XMLHttpRequest();
        obj.open("POST", url, true);
        obj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  
        // 添加http头，发送信息至服务器时内容编码类型
        obj.onreadystatechange = function() {
            if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {  
                // 304未修改
                fn.call(this, obj.responseText);
            }
        };
        obj.send(data);
    }
}