Ajax学习总结

前端之家收集整理的这篇文章主要介绍了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
                //创建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){
      //交互完成且正确返回
}
如果浏览器支持XMLHttpRequest 的Level2,那么可以直接监听onload事件即可,如
xhr.onload = function(){
  if(xhr.status===200){

  }
}
返回数据转化为JSON对象的两种方式:

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

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

原文链接:https://www.f2er.com/ajax/162790.html

猜你在找的Ajax相关文章