JavaScript-Ajax原理

Ajax(Asynchronous Javascript And XML)
作用: 通过异步线程请求数据,不阻塞用户,实现异步和局部更新网页

一.JavaScript单线程

因为JavaScript是单线程,所以Ajax请求是由浏览器创建一个异步线程完成,
当异步线程请求状态变化时,onreadystatechange事件在队列中排队,等待JavaScript线程去回调.

浏览器有多个线程,如JavaScript线程、网页渲染线程、时间触发线程
因为JavaScript操作Html,会影响网页渲染,所以当JavaScript运行时,网页渲染将冻结;
定时任务是由时间触发线程完运行,触发事件在队列中排队,等待JavaScript线程去回调.

二.实现Ajax

默认情况,浏览器只允许javaScript通过Http协议访问资源,不能使用file://协议
在命令行输入D:\Software\Chrome\chrome.exe --allow-file-access-from-files,
让chrome浏览器允许JS的XMlHttpRequest对象通过file://协议访问本地文件
注解: File协议用于访问本地文件,如同在Windows资源治理器打开文件

1.XMlHttpRequest实现Ajax

// 获取XMLHttpRequest对象
var xhr;
try{ 
	//Chrome/Firefox/Opera/Safari
	xhr=new XMLHttpRequest();
}catch(e){
	//IE
	try{	
		xhr=new ActiveXObject("Msxml2.XMLHTTP");
	}catch(e){
		xhr=new ActiveXObject("Microsoft.XMLHTTP");
	}
}

// 监听Http请求状态
xhr.onreadystatechange=function(){
		//readyState
		//0 未初始化
		//1 正在加载,调用open()
		//2 请求开始,调用send()
		//3 服务器正发送响应
		//4 响应发送完毕
		if(xhr.readyState==4){
			//status
			//200 正常(ok)
			//304 资源未修改(not modified)
			//404 资源不存在(not found)
			//403 禁止访问(forbidden)
			//500 服务器出错(internal service error)					
			if(xhr.status==200||xhr.status==304){
				// responseText 响应结果字符串
				// responseXML 响应结果XML对象
				var jsonData = eval("("+ xmlHttp.responseText +")");
				for(var i=0;i<jsonData.length;i++){
					alert(jsonData[i].name);
					alert(jsonData[i].age);
				}						
			}
		}
	}			
	
// Http请求行,第三个参数表示Http请求是否异步
xhr.open("GET","?xx=yy",true);
// Http请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// Http请求实体(GET为null)
xhr.send(..);

2.jQuery实现Ajax

$.get(url,请求参数,回调函数,响应数据格式);
$.getJson(url,请求参数,回调函数);
$.post(url,请求参数,回调函数,响应数据格式);
响应数据格式:xml/html/json

简书: http://www.jianshu.com/p/0215f63d481f
CSDN博客: http://blog.csdn.net/qq_32115439/article/details/54980581
GitHub博客:http://lioil.win/2017/02/11/Ajax.html
Coding博客:http://c.lioil.win/2017/02/11/Ajax.html