AJAX編程模板

　　AJAX一直以來沒怎麼接觸，主要是作JSON數據在服務器和客戶端之間傳遞的時候，被玩壞了，對它莫名的不可愛，最近心理陰影小了，因而又來看看它.......

　　AJAX即「Asynchronous Javascript And XML」（異步JavaScript和XML），是指一種建立交互式網頁應用的網頁開發技術。AJAX 是一種用於建立快速動態網頁的技術。經過在後臺與服務器進行少許數據交換，AJAX 可使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。

　　以上是百度到的。。。

　　下面本身找着教程概括了一些。

　　Asynchronous 異步通訊。實現局部刷新。好比說表單註冊，若是傳統的頁面中，若是總體傳送，浪費資源。而如今的方式則是部分發送，並且能夠後臺發送。這就是異步的特色。而不是單一的流水線過程。提升用戶體驗，節約網頁流量。數據通常用JSON。

　　通常涉及到javascript，JSON，DOM操做。

　　下面經過一個搜索框提示功能演示實例來體現AJAX的原理。

　　典型的AJAX編程模板：1.建立XMLHttpReqeust對象  2.open操做初始化請求信息 3.監聽處理相應結果 4.send操做發出請求。

　　1.建立XMLHttpReqeust對象 ：var xhr=new XMLHttpRequest();要注意瀏覽器的狀態碼：4，200，404等記得是什麼意思。

　　大部分瀏覽器都有這個函數，可是ie6瀏覽器低版本沒有內置XMLHttpRequest()，可是ie6有一個ActiveXObject。這時候比較兼容性的建立XMLHttpRequest對象的方法以下：

//1.建立XMLHttpReqeust對象
            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){}
                }
            }

　　2.AJAX請求的發起

　　重點有兩個方法要掌握：open和send。open是初始化，而send是真正發起請求的方法。

　　xhr.open('GET','http://test/keyword/hit?keyword=c',true);

　　第一個參數是確認當前請求的提交方式，第二個參數是肯定當前請求的目標，即url，第三個參數是肯定請求時同步（false）仍是異步（true），第四和第五通常不用，是賬戶名和密碼。

　　open執行以後，就能夠執行send方法了。若是open方法用的是GET方法，請求內容放到了url中，這時候send方法就不用傳遞參數，直接send()；若是是post方法，則send方法加如參數，如xhr.send('keyword=c&other=');這是編碼的方式urlencoded。固然還能夠用JSON數據處理的方式，send一個字符串的形式。即：

　　xhr.setRequestHeader("Content-Type","application/json");//給當前的請求設置json標誌。

　　xhr.send(JSON.stringify({keyword:'c',other:'test'}));JSON對象序列化格式化成JSON格式數據。不支持JSON的瀏覽器，有一庫json2.js實現兼容。

　　setRequestHeader除了Content-Type方法外，還能夠加自定義的頭。

　　3.AJAX響應的接收和處理

　　onreadystatechange接收時要先通知服務器能夠接了。onreadystate的值，包括5種狀態：

　　0：未初始化；1：鏈接創建，請求發出；2：服務器返回響應；3：交互（處理相應數據）；4：完成，數據可交付客戶端使用。同時還要知道HTTP status的狀態碼：200，403，404，500..

　　xhr.onreadystatechange=function(e){

　　if(xhr.readyState===4&&xhr.status==200){}}

　　數據準備就緒後，怎麼處理？

　　responseText：JSON.parse(xhr.responseText);字符串變爲對象。

　　還能夠從響應結果中獲取：getResponseHeader，getAllResponseHeader，status，statusTe。

　　在瀏覽器F12中的Network中數據包中查看具體的數據。

 

總結：

XMLHttpReqeust API
AJAX編程模板

jQuery中的ajax。

    $.ajax({
        url:'',
        datatype:'',
        success:function(data){
            
        },
        error:function(){
            
        }
    });