编写第一个Ajax例子

1. 神奇的XMLHttpRequest对象

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

var xhr = new XMLHttpRequest();

如果需要兼容 IE 低版本可以这样来使用：

//支持早期IE浏览器的XMLHttpRequest对象
		function createXHR(){
			if(typeof XMLHttpRequest !="undefined"){
				return new XMLHttpRequest();
			}else if(typeof ActiveXObject !="undefined"){
				if(typeof argument.callee.activeXString !="string"){
				var versions=["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"] ,
				     i,len;

				for ( i=0,len=versions.length;i<len;i++){
					try {
						new ActiveXObject(versions[i]);
						argument.callee.activeXString=versions[i];
						break;
					}catch(ex){
						//跳过
					}
					}
				}
				return new ActiveXObject(argument.callee.activeXString);
			}else{
				throw new Error("No XHR object available.");
			}
			
		}
		var xhr=createXHR();

2. XMLHttpRequest对象的使用

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

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

这行代码会启动一个针对 example.php 的 GET 请求。有两点需要注意：一是 URL 相对于执行代码的当前页面（当然也可以使用绝对路径）；二是调用 open() 并不会真正的发送请求，二是启动一个请求以备发送。

只能向同一个域中使用相同端口和协议的 URL 发送请求。如果 URL 与启动请求的页面有任何差别，都会引发安全问题。

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

xhr.send(null);

这里的 send() 方法接受一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入 null 因为这个参数对有些浏览器来说是必需的。调用 send() 之后，请求就会被分派到服务器。

由于这次请求是同步的。 javascript 代码会等到服务器响应之后字啊继续执行。在收到响应后，响应的数据会自动填充XHR对象的属性，相关的属性简介如下。

扫描二维码关注公众号，回复： 1577616 查看本文章

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

在接收到响应后，第一步是检查 status 属性，已确定响应已经成功返回。一般来说，可以将 HTTP 状态代码为200作为成功的标志。此时，responseText 属性的内容已经就绪，而且在内容类型正确的情况下，responseXml也应该能够访问了。此外，状态代码为304表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本；当然，也意味着响应是有效的。为确保接收到适当的响应，应该像下面这样检测上述这两种状态代码：

if(xhr.readyState==4){
				if((xhr.status>=200 && xhr.status<300) || xhr.status==304){
					alert(xhr.responseText);
				}else{
					alert("Rewquest was unsuccessfull:"+xhr.status);
				}
			}

根据返回的状态代码，这个例子可能会显示由服务器返回的内容，也可能会显示一条错误消息。建议应该要通过 status 来决定下一步的操作，不要依赖 statusText ，因为后者在跨浏览器使用时不太可靠。另外，无论内容类型是什么，响应主体的内容都会保存到 responseText 属性中；而对于非 XML 数据而言， responseXML 属性的值将为 null 。

像前面这样发送同步请求当然没有问题，但多数情况下，我们还是要发送异步请求，才能让 javascript 继续执行而不必等待响应。此时，可以检测XHR对象的 readyState 属性，该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下。

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

只要 readyState 属性的值有一个值变成另一个值，都会触发一次 readystatechange 事件。可以利用这个时间来检测每次状态变化后 readyState 的值。通常，我们只对 readyState 值为4的阶段感兴趣，以为这时所有数据都已经就绪。不过，必须再调用 open() 方法之前指定 readystatechange 时间处理程序才能确保跨浏览器兼容性。下面来看一个例子。

                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("Rewquest was unsuccessfull:"+xhr.status);
				}
			}
		};
		xhr.open("get","test.php",true);
		xhr.send(null);

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

编写第一个Ajax例子

猜你喜欢