一招帶你知道什麼是AJAX及AJAX跨域

AJAX的工作原理

AJAX=異步JavaScript和XML，簡單的說，就是在不重載整個網頁的情況下，AJAX透過後台載入數據，並在網頁上進行顯示。

Ajax的工作原理圖：

#透過Ajax的原理圖可以發現，在瀏覽器種輸入url位址請求伺服器時，是透過Ajax發送http請求給伺服器，服務的回應結果也是先回傳給Ajax，先Ajax處理後在回傳給瀏覽器顯示在頁面。如果沒有Ajax，就在圖中表示為上下連接線，瀏覽器直接給伺服器發送http請求，伺服器對請求進行處理後，將回應結果直接回傳給瀏覽器顯示出來。

Ajax的作用就是可以透過js或jQuery實現http請求的發送，http請求包含url位址，數據，資料的傳值方式，而且伺服器回應之後必須有回傳結果。

AJAX技術組成：

JavaScript、CSS、DOM、XMLHttpRequest

##AJAX的原生寫法：

Ajax的核心是XMLHttpRequest對象，它是Ajax實現的關鍵，發送非同步請求、接收回應及執行回呼都是透過它來完成的。

//第一步：
var xhr=new XMLHttpRequest();
//第二步：
xhr.open("post","test.php");
//第三步：
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//第四步：
xhr.send("a=1&b=10");  //get请求报文体写法
//第五步：
xhr.onreadystatechange=function(){
    if(xhr.status=200 && xhr.readyState==4){
        var result=xhr.responseText;  //获取结果
        alert(result);
    }
}

jQuery中的AJAX語法：

#jQuery提供多個與AJAX有關的方法，透過jQuery AJAX方法，使用Get或Post從遠端伺服器上請求文本、HTML、XML或JSON。然後將這些外部資料直接載入網頁的被選元素中。

$.ajax({
   url:"请求的url地址",
   type:"get|post",
   data:"数据" ,
   dataType:"text|json|xml|script",
   success:function(re){
       //服务器回传数据处理
   }
});

AJAX的get()和post()方法

#jQuery中get()和post()方法用於透過HTTP GET或POST請求從伺服器請求資料。 GET是從指定的資源請求數據，POST是從指定的資源提交要處理的數據。

jQuery中Ajax其他寫法為：

$.get(url,data,callback,dataType)
$.post(url,data,callback,dataType)

url請求的url位址傳送到伺服器的鍵值類型的資料

參數名稱	描述
	#data(可選)

callback(可選)載入成功的回呼函數

dataType(可選)
伺服器傳回內容的格式，包括xml、html、json

• AJAX跨網域

跨域中這個」域「是指的兩個域名，跨域是指A域名下有A程序，B域名下面有B程序，現在A程序要透過Ajax去訪問B域名下的B程序，這種存取形式瀏覽器是拒絕的。 AJAX是不能直接要求另外一個網域下的程式的。針對這個問題的解決方法是：請求的時候回傳資料以jsonp的形式回傳，緊接著一個jsonpCallback，請求成功後就會呼叫fun1，因此需要宣告fun1裡面有個data參數，這個參數的資料就是B網域下B程式回傳的數據，在fun1裡面跨域看到B程式的數據，就是透過這種方式來實現跨域。

• AJAX帶來的好處：

#減輕伺服器的負擔，加快瀏覽速度。 ############更多的使用者交互，帶來更好的使用者體驗。 ############基於標準化並被廣泛支援的技術，不用下載插件，現在瀏覽器都跨域很好的支援AJAX技術。 ############進一步促進頁面呈現與資料分離。 ##########

以上是一招帶你知道什麼是AJAX及AJAX跨域的詳細內容。更多資訊請關注PHP中文網其他相關文章！