Ajaxの利用手順を詳しく解説

今回はAjaxを使用する手順について詳しく説明します。Ajaxを使用する際の注意点を具体的な事例を交えて見ていきましょう。

ajax とは何ですか?

ajax (非同期javascript xml) は、Web ページ全体を再読み込みするのではなく、部分的な Web ページ データを更新できます。

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) メソッドには get と post が含まれており、url は主にファイルまたはリソースのパスであり、async パラメーターは true (非同期を表す) または false (同期を表す) です

xhttp.send (); use get メソッドはサーバーにリクエストを送信します。

xhttp.send(string); post メソッドを使用してサーバーにリクエストを送信します。

投稿リクエストはいつ利用可能になりますか?

(1) ファイルやデータベースを更新する場合。

(2) 投稿リクエストには文字数制限がないため、大量のデータをサーバーに送信します。

(3) ユーザーが入力したデータを暗号化して送信します。

get example:

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 example

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

投稿フォームデータでは、xmlhttprequest オブジェクトの setRequestHeader メソッドを使用して 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;

ステップ では、xmlhttprequest オブジェクトの responseText または responseXML 属性を使用して、サーバーの応答を取得します。

サーバー応答の stringデータを取得するには、responseText 属性を使用し、サーバー応答の XML データを取得するには、responseXML 属性を使用します。

例は次のとおりです:

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 属性には、readyState が変化したときに自動的に呼び出される関数が格納されます。 XMLHttpRequest オブジェクトの状態である

readyState 属性は 0 から 4 に変化します。0 はリクエストが初期化されていないことを意味し、1 はサーバー接続が成功したことを意味し、2 リクエストはサーバーによって受信されました、3 リクエストは処理されました、 4 リクエストが完了し、応答の準備ができています。
ステータス属性、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>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

WebService のクロスドメイン問題の処理方法の詳細な説明

Ajax() バックグラウンドとの対話の詳細な説明

以上がAjaxの利用手順を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。