首頁  >  文章  >  web前端  >  Ajax使用步驟詳解

Ajax使用步驟詳解

php中世界最好的语言
php中世界最好的语言原創
2018-04-24 16:58:301707瀏覽

這次帶給大家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(&quot;demo&quot;).innerHTML = xhttp.responseText; } </script>

我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

處理WebService跨域問題方法詳解

#Ajax()與後台互動使用詳解

以上是Ajax使用步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn