ホームページ > 記事 > ウェブフロントエンド > ネイティブJSのAJAXでjsonを読み込む全過程

ネイティブJSのAJAXでjsonを読み込む全過程

jackloveオリジナル: 2018-06-15 16:40:432304ブラウズ

まず第一に、ajax (async javascript and xml) は、xml や json などのフロントエンドファイルとバックエンドファイル間の対話に使用されます。これは非同期読み込みテクノロジーであり、読み込みイベントをクリックしたときに、ページ全体を更新する必要がなくなり、部分的なリクエストと部分的な応答を送信するだけになります。 AJAX は完全なフロントエンドではなく、サーバーを使用する必要があるため、実験を行う場合は、HTML ファイルと xml または json をサーバーのデプロイメントディレクトリに配置する必要があります。ここでは TOMCAT 7X を使用しています。

まず、次のように単純な JSON ファイルを編集し、json.json という名前を付けます:

[{  "key":"value"}  ]

function showJson(){
var test;
if(window.XMLHttpRequest){
    test = new XMLHttpRequest();
}else if(window.ActiveXObject){
    test = new window.ActiveXObject();
}else{
    alert("请升级至最新版本的浏览器");
}
if(test !=null){
    test.open("GET","json.json",true);
    test.send(null);
    test.onreadystatechange=function(){
        if(test.readyState==4&&test.status==200){
            var obj = JSON.parse(test.responseText);
            for (var name in obj){
                alert(obj[name].key);
            }
        }
    };
}
}
window.onload=function(){
  showJson();
};</span>

1 AJAX を使用するには、XMLHttpRequest() の新しいインスタンスを作成する必要があります。これは、IE の以前のバージョンでは ActiveXObject です。ブラウザ（）。 if文を使って判断するだけです。

2. readyState の対話状態と status の対話状態を判断して、onreadystatechange イベントをトリガーします。

ここでは、readyState の 4 つの値を紹介します。

(1) 値は 0: リクエストは初期化されていません。これは、open() がまだ開始されていないことを意味します。 ) 値は 1: リクエストは初期化されていますが、まだ送信されていません。つまり、send() がまだありません (3) 値は 2: リクエストは送信され、処理中です。背景。

(4) 値は 3: リクエストはまだ処理中ですが、一部のデータは使用できます。これが何を意味するのかよくわかりません。

(5) 値は 4: バックグラウンドサーバーが応答を完了しました。つまり、要求されたデータをいつでも取得できるようになります。

しかし、readyState==4 の場合、サーバーが応答したことだけがわかりますが、この時点では、サーバーがリクエストしたファイルを見つけたかどうかはまだわかりません。

ステータスの一般的な値をいくつか示します:

(1) 200: 要求されたファイルが見つかりました。

(2) 404: 要求されたファイルが見つかりません。

(3) 500: サーバーエラー。

readySate==4 と status==200 が同時に満たされると、必要な値を取得できます。

3. サーバーから返された値は、responseText オブジェクトに格納されます。現時点では、JSON.parse() を使用して内部のデータを取得できます。

4. JSON ファイル内のデータのブロック全体を取り出しましたが、value などの特定のブロック値を取得したい場合は、for ループなどのトラバーサルを使用する必要があります。ここでは、for ループに別の形式の for(var name in obj) を使用しました。これは、オブジェクトの値を取得して変数名に格納することを意味します。 JSON ファイルの構造は多くのオブジェクトで構成されているためです。

5. 「GET」を使用した場合、send() の値は null になります。 POST の場合は、send(name);

のような特定のパラメータを渡す必要があります。最後に、AJAX を初めて使用する学生向けにこのパラメータを書きます。このコードを実行する方法 (AJAX 環境の構成)。

(1) まずサーバーをダウンロードする必要があります。TOMCAT をお勧めします。

(2) 次に、html と json を含むファイルを Tomcat のルートディレクトリの webapps フォルダーにデプロイ (貼り付け) します。

(3) Tomcat のルートディレクトリに戻り、bin フォルダーを開いて、startup.bat を見つけます。ダブルクリックして Tomcat サーバーを開きます。

(4) ブラウザを開いて http://localhost:8080/ と入力し、Tomcat が開いているかどうかを確認します。404 が表示される場合は、ポート 8080 が占有されている可能性があります。このとき、Tomcat のルートディレクトリに戻って開きます。 conf フォルダーで、server.xml ファイルを見つけて、次のコードを見つけます: Connector port="8080"、8080 を 8081 または 8082 に変更し、ブラウザーに http://localhost:8081/ を再入力して、Tomcat が開いているかどうかを確認します。。

(5) ブラウザに HTML ファイルのパスを入力します (例: http://localhost:8080/test/index.html)。

この記事では、ネイティブ JS の AJAX を使用して json を読み取るプロセス全体を紹介します。その他の関連コンテンツについては、php 中国語の Web サイトを参照してください。

ネイティブJSのAJAXでjsonを読み込む全過程

関連記事