首頁 > web前端 > js教程 > 主體

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

帅杰杰
發布: 2020-05-06 17:02:15
原創
225 人瀏覽過

AJAX的工作原理

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

Ajax的工作原理圖:

一招帶你知道什麼是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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板