Ajax学习总结

一、Ajax概述

Asynchronous 浏览器支持异步通信模式，实现页面局部刷新

Javascript 使用的编程语言

And

Xml 通信数据的承载方式，但实际很少用到XML格式

二、典型的ajax编程模板

1.创建XMLHttpRequest对象

2.open操作初始化请求信息

3.监听事件处理响应结果

4.send操作发出请求

                    var xhr = createXHR();
		    xhr.onreadystatechange = function() {
		        if( xhr.readyState === 4 && xhr.status === 200 ) {
		            callback(xhr.getResponseHeader("PixelSpacing1"));
		        }
		    }
		    xhr.open("GET",url,true);
		    xhr.send();

                //创建XMLHttpRequest，兼容版
		//IE6+ Msxml2.XMLHTTP
		//<IE6 Microsoft.XMLHTTP
		function createXHR(){
			var xhr = null;
			if(window.XMLHttpRequest){
				xhr = new XMLHttpRequest();
			}else if(window.ActiveXObject){
				try{
					xhr = new ActiveXObject('Msxml2.XMLHTTP');
				}catch(e){
					try{
						xhr = new ActiveXObject('Microsoft.XMLHTTP');
					}catch(e){}
				}
			}
			return xhr;
		}

通过监听onreadystatechange事件来完成，readyState有五种状态

0：未初始化——执行了open操作，但是还没执行send操作

1：链接建立请求发出——执行send操作之后

2：服务器返回响应——得到服务器的响应，但是响应不一定完成了

3：交互（处理响应数据）

4：完成，数据可交付客户端使用
0～3是在通信的过程，一般不需要进行处理，通常这样写

if(xhr.readyState===4&&xhr.status===200){
      //交互完成且正确返回
}

xhr.onload = function(){
  if(xhr.status===200){

  }
}

浏览器有内置JSON对象：JSON.parse(xhr.responseText);

浏览器没有内置JSON对象：eval(xhr.responseText);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!