Ajax

Ajax能够向服务器请求额外的数据而无需卸载页面。

XMLHttpRequest对象

Ajax技术的核心是XMLHttpRequest对象（简称XHR），XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器取得更多信息，意味着用户单击后们可以不必刷新页面也能取得新数据。也就是说，可以使用XHR对象取得新数据没然后再通过DOM将新数据插入到页面中。

IE7+、Firefox、Opera、Chrome和Safari都支持原生的XHR对象，在这些浏览器中创建XHR对象只要像下面这样使用XMLHttpRequest构造函数：

var xhr = new XMLHttpRequest();

XHR的用法

在使用XHR对象时，要调用的第一个方法是open()，它接受三个参数：要发送的请求的类型（“get”、"post"等）、请求的URL和表示是否异步发送请求的布尔值。

xhr.open("get","example.PHP",false);

open()方法并不会真正发送请求，而只是启动一个请求以备发送。

注意：只能向同一个域中使用相同端口和协议的URL发送请求。

 

要发送特定的请求，必须像下面这样调用send()方法：

xhr.send(null);

 XMLHttpRequest.send() 方法接受一个可选的参数，其作为请求主体；如果请求方法是 GET 或者 HEAD，则应将请求主体设置为 null。

 

服务器在收到响应后，响应的的数据会自动填充XHR对象的属性。相关的属性如下：

responseText：返回的文本

responseXML：如果响应的内容类型是“text/xml”或“application/xml”，这个属性中将保存着响应数据的XML DOM文档

status：响应的HTTP状态

statusText：HTTP状态的说明

在接收到响应后，第一步是检查status属性，以确定响应已经成功返回。

像前面这样发送同步请求当然没问题，但是，要发送异步请求，需要检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下：

• 0 (未初始化)   请求还未初始化
• 1 (正在加载)   已建立服务器连接
• 2 (发送)  已经调用send()方法，但尚未接收到响应
• 3 (交互)  正在处理请求
• 4 (完成)  已经接受到全部响应数据，而且已经可以再客户端使用了。

只要readyState属性的值由一个值变成另一个值，都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。必须在调用open()之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status >=200 && xhr.status <300) || xhr.status == 304 ) {
console.log(xhr.responseText);
} else {
console.log("Request was unsuccessful: " + xhr.status);
}
}
};
xhr.open("get","example.txt",true);
xhr.send(null);

　　

另外，在接收到响应之前还可以调用abort()方法来取消异步请求。

 

GET请求

GET是最常见的请求类型，最常用于向服务器查询某些信息。必要时们可以将查询字符串参数追加到URL的末尾，以便将信息发送给服务器。

GET 方法

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

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

有关 GET 请求的其他一些注意点：

• GET 请求可被缓存
• GET 请求保留在浏览器历史记录中
• GET 请求可被收藏为书签
• GET 请求不应在处理敏感数据时使用
• GET 请求有长度限制
• GET 请求只应当用于取回数据

POST请求

POST请求通常用于向服务器发送应该被保存的数据。

POST 方法

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

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

有关 POST 请求的其他一些注意点：

• POST 请求不会被缓存
• POST 请求不会保留在浏览器历史记录中
• POST 不能被收藏为书签
• POST 请求对数据长度没有要求

比较 GET 与 POST

下面的表格比较了两种 HTTP 方法：GET 和 POST。

	GET	POST
后退按钮/刷新	无害	数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
书签	可收藏为书签	不可收藏为书签
缓存	能被缓存	不能缓存
编码类型	application/x-www-form-urlencoded	application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
历史	参数保留在浏览器历史中。	参数不会保存在浏览器历史中。
对数据长度的限制	是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。	无限制。
对数据类型的限制	只允许 ASCII 字符。	没有限制。也允许二进制数据。
安全性	与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。 在发送密码或其他敏感信息时绝不要使用 GET ！	POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
可见性	数据在 URL 中对所有人都是可见的。	数据不会显示在 URL 中。

GET和POST还有一个重大区别，简单的说：

GET产生一个TCP数据包；POST产生两个TCP数据包。

对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；

而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。