JavaScript之Ajax

文章目录

- - 1.Ajax和XMLHttpRequest是什么关系？
  - 2.Ajax有什么用？
  - 3.XMLHttpRequest

1.Ajax和XMLHttpRequest是什么关系？

Ajax技术的核心是XMLHttpRequest对象（简称XHR）。虽然名字中有XML，但Ajax通信与数据格式无关。

2.Ajax有什么用？

Ajax意味着用户单击后，可以不必刷新页面也能取得新数据。

3.XMLHttpRequest

1.创建

//支持IE7及更高版本
var xhr = new XMLHttpRequest();
//支持IE的早期版本
var xhr = createXHR();

2.用法

open()方法:接受三个参数（要发送的请求的类型、请求的url、表示是否异步发送请求的布尔值）
注：
(1)url是相对于执行文本的当前页面（当然也可以试用绝对路径）；
(2)调用open方法并不会真正发送请求，而只是启动一个请求以备发送
(3)只能像同一个域中试用相同端口和协议的url发送请求，如果url和启动请求的页面有任何差别，都会引发安全错误
send()方法：接受一个参数（要作为请求主体发送的数据，没有就传入null)发送请求。

收到响应后，响应的数据会自动填充XHR对象的属性：

responseText：作为相应主体被返回的文本。
responseXML如果响应的内容类型是"text/xml"或"application/xml" ，这个属性中将保存包含着响应数据的XML DOM文档。
status：响应的HTTP状态。
statusText：HTTP状态的说明

//false表示同步请求
xhr .open ( "get ","example.txt ",false) ;
xhr .send ( null);
//通过检测status来决定下一步的操作，不要依赖statusText，因为它在跨浏览器使用时不太可靠
if ( (xhr.status >= 200 && xhr.status < 300)|| xhr.status == 304){
   alert (xhr.reaponseText);
else {
   alert ( "Request was unauccessful: " +xhr.status);
}

前面的是同步请求，但是大多数时候我们还是要发送异步请求，这时可以检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动状态，这个属性可取的值如下：

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

只要readyState的属性的值由一个值变成另一个值，都会触发一次readystatechange事件。必须在open()之前指定onreadystatechange事件。

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

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

JavaScript之Ajax

Java相关栏目本月热门文章