现在前端的请求方法非常多，可以是最开始的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);
}
}
