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