Ajaxの使用の四つのステップ
何がajaxですか
ajax（非同期javascript xml）は、ウェブページ全体を再読み込みするのではなく、ローカルページデータを更新することができます。
ajaxはどう使いますか
第一ステップは、xmlhttprequestオブジェクトを作成し、var xmlhttp=new XMLttpRequest()XMLHttpRequestオブジェクトはサーバとデータを交換するために使用されます。
xmlhttp.open(method，url，async)methodはgetとpostを含んでいます。urlは主にファイルまたはリソースの経路です。asyncパラメータはtrue(非同期を表す)またはfalse(同期を表す)です。
xhttp.send()getメソッドを使ってサーバに要求を送信します。
xhttp.send(string)postメソッドを使ってサーバに要求を送信します。
ポスト発送依頼はいつ使えますか？
(1)ファイルまたはデータベースを更新するとき。
（2）大量のデータをサーバに送信します。ポスト要求には文字制限がありません。
(3)ユーザが入力した暗号化データを送信します。
get例：
postフォームの例
レスポンスText属性を使用してサーバから応答された文字列データを取得し、レスポンスXML属性を使用してサーバから応答されたXMLデータを取得します。
例は以下の通りです
例:
オンreadystatechange属性は、readyStateが変化したときに自動的に呼び出される関数を格納します。
readyState属性、XMLHttpRequestオブジェクトの状態、変更は0から4まで、0は初期化されていません。1はサーバ接続に成功したことを表しています。
status属性は、200は成功応答を表し、404はページが存在しないことを示している。
オンレディステージイベントでは、サーバーが準備に応答すると発生し、readyState==4とstatus==200の時にサーバーが応答します。
例:
ajax（非同期javascript xml）は、ウェブページ全体を再読み込みするのではなく、ローカルページデータを更新することができます。
ajaxはどう使いますか
第一ステップは、xmlhttprequestオブジェクトを作成し、var xmlhttp=new XMLttpRequest()XMLHttpRequestオブジェクトはサーバとデータを交換するために使用されます。
var xhttp;
if (window.XMLHttpRequest) {
//
xhttp = new XMLHttpRequest();
} else {
// ， IE5 IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}xmlhttp.open(method，url，async)methodはgetとpostを含んでいます。urlは主にファイルまたはリソースの経路です。asyncパラメータはtrue(非同期を表す)またはfalse(同期を表す)です。
xhttp.send()getメソッドを使ってサーバに要求を送信します。
xhttp.send(string)postメソッドを使ってサーバに要求を送信します。
ポスト発送依頼はいつ使えますか？
(1)ファイルまたはデータベースを更新するとき。
（2）大量のデータをサーバに送信します。ポスト要求には文字制限がありません。
(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();
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();postフォームの例
xhttp.open("POST", "ajax_test.aspx", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "index.aspx", true);
xhttp.send();
xhttp.open("GET", "index.aspx", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText; レスポンスText属性を使用してサーバから応答された文字列データを取得し、レスポンスXML属性を使用してサーバから応答されたXMLデータを取得します。
例は以下の通りです
document.getElementById("demo").innerHTML = xhttp.responseText; 例:
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; オンreadystatechange属性は、readyStateが変化したときに自動的に呼び出される関数を格納します。
readyState属性、XMLHttpRequestオブジェクトの状態、変更は0から4まで、0は初期化されていません。1はサーバ接続に成功したことを表しています。
status属性は、200は成功応答を表し、404はページが存在しないことを示している。
オンレディステージイベントでは、サーバーが準備に応答すると発生し、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();
}
//
<!DOCTYPE html>
<html>
<body>
<p id="demo">Let AJAX change this text.</p>
<button type="button"
onclick="loadDoc('index.aspx', myFunction)">Change Content
</button>
<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>
</body>
</html>