Ajax データリクエストの 4 つのステップを深く理解する

フロントエンドの仕事では、ajax がよく使われますが、実際には、ajax が非同期リクエストであることだけを知っていて、その使い方を知らない人が多くいます。次に、使用するための 4 つの主要な手順を説明します。 Ajax 必要な方は参考にしてください。

ajax とは何ですか?

ajax (非同期 JavaScript XML) は、Web ページ全体をリロードするのではなく、部分的な Web ページ データを更新できます。

ajax の使用方法

最初のステップ は、xmlhttprequest オブジェクト、var xmlhttp =new XMLHttpRequest(); を作成することです。サーバー Exchange データと通信するために使用されます。

var xhttp;
if (window.XMLHttpRequest) {
//现代主流浏览器
xhttp = new XMLHttpRequest();
} else {
// 针对浏览器，比如IE5或IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

2 番目のステップ では、xmlhttprequest オブジェクトの open() メソッドと send() メソッドを使用して、リソース要求をサーバーに送信します。

xmlhttp.open(method,url,async) メソッドには get と post が含まれます。url は主にファイルまたはリソースのパスで、async パラメーターは true (非同期を表す) または false (同期を表す)
xhttp: get メソッドを使用してサーバーにリクエストを送信します。
xhttp.send(string);post メソッドを使用してサーバーにリクエストを送信します。

投稿リクエストはいつ使用できますか?

(1) ファイルまたはデータベースを更新する場合。
(2) 投稿リクエストの文字数制限がないため、大量のデータをサーバーに送信します。
(3) ユーザーが入力した暗号化データを送信します。

取得例:

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();

投稿例:

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

投稿フォーム データは、次の setRequestHeader メソッドを使用して追加する必要があります。 xmlhttprequest オブジェクトの HTTP ヘッダー。

投稿フォームの例

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;

3 番目のステップ では、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;

4 番目のステップ 、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.
Change Content

<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>

上記は、Ajax を使用する 4 つの手順です。

以上がAjax データリクエストの 4 つのステップを深く理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。