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

一.JavaScript单线程

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

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

二.实现Ajax

默认情况,浏览器只允许javaScript通过Http协议访问资源,不能使用file://协议
在命令行输入D:SoftwareChromechrome.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

GitHub博客：http://lioil.win/2017/02/11/Ajax.html
Coding博客：http://c.lioil.win/2017/02/11/Ajax.html