非同期リクエストを送信するための ajax の実装 (グラフィック チュートリアル)

この記事は主に、特定の参考値を持つ非同期リクエストを送信するための ajax を簡単に実装する方法を説明します。興味のある方は参考にしてください。具体的な内容は次のとおりです

。 (XMLHttpRequest の取得)

ajax は実際には XMLHttpRequest という 1 つのオブジェクトのみを学習する必要があります。これをマスターすれば、ajax をマスターできます!!!

1. XMLHttpRequest を取得します

ほとんどのブラウザーは次をサポートしています: var xmlHttp=new XMLHttpRequest( );

IE6.0:var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

IE5.0 は以前のバージョンの IE:var で書かれています XMLHttpRequest オブジェクトを作成する関数

function createXMLHttpRequest(){
     try{
     return new XMLHttpRequest();
     } catch(e){
     try{
     return new ActiveXObject(“Msxml2.XMLHTTP”);
    }catch(e){
     try{
      return new ActiveXObject(“Microsoft.XMLHTTP”);
     }catch(e){
       alert(“哥们儿,你用的是什么浏览器啊?”);
       throw e;
    }
    }
     } 
}

第 2 ステップ

(サーバーとの接続)

xmlHttp.open(): サーバーとの接続を開くために使用され、3 つのパラメーターが必要です:

Request メソッド: GET および POST が可能Request URL: サーバー側のリソースを指定します。例: /day23_1/AServletリクエストが非同期かどうか: true の場合は非同期リクエストを送信し、それ以外の場合は同期リクエストを送信することを意味します

xmlHttp.open("GET" ,"/day23_1/AServlet",true);//例

Step (Send request)
xmlHttp.send(null): 指定しない場合、一部のブラウザでは送信できない可能性があります。

パラメータ: の場合はリクエスト本文の内容です。 GET リクエストでは、null を指定する必要があります。 POST リクエストの場合は次のようにします

xmlHttp.send("username=zhangSan&password=123");

ステップ 4:
xmlHttp オブジェクトのイベントにリスナーを登録します: onreadystatechange

x mlHttp オブジェクトには合計 5 つの状態があります

0: 初期化が完了しておらず、XMLHttpRequest オブジェクトが作成されただけで、open() メソッドがまだ呼び出されていません1: リクエストが開始され、オープン()メソッドは呼び出されていますが、send()メソッドはまだ呼び出されていません

2:送信完了ステータスを要求、send()メソッドが呼び出されています

3:サーバーレスポンスの読み取り開始
4:サーバーレスポンスの読み取り終了(通常は最後のステータスのみを気にします!!!)

xmlHttp オブジェクトのステータスを取得します

var state = xmlHttp.readyState;//可能是0、1、2、3、4

サーバー応答のステータス コードを取得します (200: 成功 304: ステータスは変更されていません 404 500 : サーバーエラー)

var status=xmlHttp.status;//例如200、404、500

サーバー応答の内容を取得します

var content=xmlHttp.responseText;//得到服务器的响应的文本格式的内容(这更通用)
var content=xmlHttp.responseXML;//得到服务器的响应的xml响应的内容,它是document对象了!

つまり、リスナーは次のように書く必要があります

xmlHttp.onreadystatechange = function(){

  //xmlHttp的5种状态都会调用本方法
    if(xmlHttp.readyState ==4 && xmlHttp.status == 200){

  //双重判断:判断是否为4状态,而且还要判断是否为200
      var text=xmlHttp.responseText;
     } 
};

上記は私がコンパイルしたものです皆さん、今後皆さんのお役に立つことを願っています。

関連記事:

画像のアップロード、バックグラウンドへの保存、読み取りの ajax 実装 (グラフィック チュートリアル)

Struts2 と Ajax データの相互作用 (グラフィック チュートリアル)

Ajax リクエストは正常に送信されましたしかし、成功しない場合の解決策 (写真とテキストのチュートリアル)

以上が非同期リクエストを送信するための ajax の実装 (グラフィック チュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。