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()方法
$.get(url,data,callback,dataType) $.post(url,data,callback,dataType)
參數名稱 | 描述 |
url | |
#data(可選) | 傳送到伺服器的鍵值類型的資料
callback(可選)載入成功的回呼函數
dataType(可選)
伺服器傳回內容的格式,包括xml、html、json
以上是一招帶你知道什麼是AJAX及AJAX跨域的詳細內容。更多資訊請關注PHP中文網其他相關文章!