典型的なログイン検証の例を使用して説明してみましょう。
一般に、ログイン検証に XMLHttpRequest オブジェクトを使用するには、次の手順が必要です。
1. DOM メソッドを使用して入力ボックスの値を取得します
次のようにコードをコピーします。
var userName = document.getElementById("userName").value;
2. XMLHttpRequest オブジェクトを作成します。この手順はより複雑です。主な理由は、ブラウザーの互換性の問題を考慮することです。
次のようにコードをコピーします。
if (window.XMLHttpRequest) {
//Firefox、Mozillar、Opera、Safari、IE7、IE8 の場合
xmlhttp = 新しい XMLHttpRequest();
//mozillar ブラウザの特定のバージョンのバグを修正
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
else if (window.ActiveXObject) {
//IE6、IE5.5、IE5の場合
//XMLHTTPRequest オブジェクトの作成に使用できる 2 つのコントロール名。js 配列に格納されます。
// 1 位にランク付けされたバージョンの方が新しい
var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for (var i = 0; i < activexName.length; i++) {
試す{
// コントロール名を取り出して作成します。作成に成功したらループを終了します。
// 作成が失敗した場合、例外がスローされ、ループは引き続き作成を試行できます。
xmlhttp = 新しい ActiveXObject(activexName[i]);
壊す;
} キャッチ(e){
}
}
}
3. XMLHttpRequest オブジェクトのコールバック関数を登録します。コールバック関数を登録する場合は、関数名が必要です。括弧は追加しないでください。
次のようにコードをコピーします。
//コールバック関数を登録する場合、関数名は必須です。括弧は追加しないでください
//関数名を登録する必要がありますが、括弧を付けると関数の戻り値が登録されてしまいます。
xmlhttp.onreadystatechange = コールバック;
4. 接続情報の設定(GET)
次のようにコードをコピーします。
//最初のパラメータは http リクエスト メソッドを示し、すべての http リクエスト メソッドをサポートし、主に get と post を使用します。
// 2 番目のパラメータはリクエストの URL アドレスを表し、get メソッドによってリクエストされたパラメータも URL 内にあります。
// 3 番目のパラメータは、非同期対話を使用するか同期対話を使用するかを示します。true は非同期を示します
xmlhttp.open("GET","AJAXServer?name="+ ユーザー名,true);
5. リクエストを送信する
次のようにコードをコピーします。
xmlhttp.send(null);
6. (POST) メソッドでは、http リクエスト ヘッダーを自分で設定する必要があります。また、エンコードする必要があるため、XHR.open の 2 番目のパラメーターでデータを直接送信することはできません。代わりに、send() メソッドを使用する必要があります。データを送信します。
次のようにコードをコピーします。
//POSTリクエストのコード
//xmlhttp.open("POST","AJAXServer",true);
//POST メソッドでは http リクエスト ヘッダーを自分で設定する必要があります
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POSTモードでデータを送信する
xmlhttp.send("name=" + ユーザー名);
コールバック関数:
次のようにコードをコピーします。
//コールバック関数
関数コールバック() {
//alert(xmlhttp.readyState);
//5.レスポンスデータの受信
//オブジェクトのステータスが対話型完了であるかどうかを判断します
if (xmlhttp.readyState == 4) {
// http インタラクションが成功したかどうかを判断します
if (xmlhttp.status == 200) {
//漆器サーバーから返されたデータを取得する
//サーバーセグメントが出力した平文データを取得
var 応答テキスト = xmlhttp.responseText;
// ページ上にデータを表示します
// dom を通じて div タグに対応する要素ノードを検索します
var divNode = document.getElementById("結果");
//要素ノードにHTMLコンテンツを設定する
divNode.innerHTML = 応答テキスト;
} それ以外 {
alert("エラーが発生しました!!!");
}
}
}