這次帶給大家Ajax使用步驟詳解,Ajax使用的注意事項有哪些,下面就是實戰案例,一起來看一下。
什麼是ajax?
ajax(非同步javascript xml) 能夠刷新局部網頁資料而不是重新載入整個網頁。
如何使用ajax?
#第一步,建立xmlhttprequest對象,var xmlhttp =new XMLHttpRequest(); XMLHttpRequest物件用來和伺服器交換資料。
var xhttp; if (window.XMLHttpRequest) { //现代主流浏览器 xhttp = new XMLHttpRequest(); } else { // 针对浏览器,比如IE5或IE6 xhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
第二步,使用xmlhttprequest物件的open()和send()方法發送資源請求給伺服器。
xmlhttp.open(method,url,async) method包含get 和post,url主要是檔案或資源的路徑,async參數為true(代表非同步)或false(代表同步)
xhttp.send();使用get方法傳送請求到伺服器。
xhttp.send(string);使用post方法傳送請求到伺服器。
post 發送請求什麼時候能夠使用呢?
(1)更新一個檔案或資料庫的時候。
(2)發送大量資料到伺服器,因為post請求沒有字元限制。
(3)發送使用者輸入的加密資料。
get範例:
xhttp.open("GET", "ajax_info.txt", true); xhttp.open("GET", "index.html", true); xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);xhttp.send();
post範例
xhttp.open("POST", "demo_post.asp", true); xhttp.send();
post表單資料需要使用xmlhttprequest物件的setRequestHeader方法增加一個HTTP頭。
post表單範例
xhttp.open("POST", "ajax_test.aspx", true); xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhttp.send("fname=Henry&lname=Ford");
async=true 當伺服器準備回應時將執行onreadystatechange函數。
xhttp.onreadystatechange = function() { if (xhttp.readyState == 4 && xhttp.status == 200) { document.getElementById("demo").innerHTML = xhttp.responseText; } }; xhttp.open("GET", "index.aspx", true); xhttp.send();
asyn=false 則將不需要寫onreadystatechange函數,直接在send後面寫上執行程式碼。
xhttp.open("GET", "index.aspx", false); xhttp.send(); document.getElementById("demo").innerHTML = xhttp.responseText;
第三步,使用xmlhttprequest物件的responseText或responseXML屬性來獲得伺服器的回應。
使用responseText屬性得到伺服器回應的字串數據,使用responseXML屬性得到伺服器回應的XML資料。
範例如下:
document.getElementById("demo").innerHTML = xhttp.responseText;
伺服器回應的XML資料需要使用XML物件進行轉換。
範例:
xmlDoc = xhttp.responseXML; txt = ""; x = xmlDoc.getElementsByTagName("ARTIST"); for (i = 0; i < x.length; i++) { txt += x[i].childNodes[0].nodeValue + "<br>"; } document.getElementById("demo").innerHTML = txt;
第四步,onreadystatechange函數,當發送請求到伺服器,我們想要伺服器回應執行一些功能就需要使用onreadystatechange函數,每次xmlhttprequest物件的readyState發生變更都會觸發onreadystatechange函數。
onreadystatechange屬性儲存一個當readyState發生改變時自動被呼叫的函數。
readyState屬性,XMLHttpRequest物件的狀態,改變從0到4,0代表請求未被初始化,1代表伺服器連線成功,2請求被伺服器接收,3處理請求,4請求完成並且回應準備。
status屬性,200表示成功回應,404表示頁面不存在。
在onreadystatechange事件中,伺服器回應準備的時候發生,當readyState==4和status==200的時候伺服器回應準備。
function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (xhttp.readyState == 4 && xhttp.status == 200) { document.getElementById("demo").innerHTML = xhttp.responseText; } }; xhttp.open("GET", "ajax_info.txt", true); xhttp.send(); } //函数作为参数调用Let AJAX change this text.
<script> function loadDoc(url, cfunc) { var xhttp; xhttp=new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (xhttp.readyState == 4 && xhttp.status == 200) { cfunc(xhttp); } }; xhttp.open("GET", url, true); xhttp.send(); } function myFunction(xhttp) { document.getElementById("demo").innerHTML = xhttp.responseText; } </script>
我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是Ajax使用步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!