ホームページ >ウェブフロントエンド >jsチュートリアル >ネイティブjsでAjaxを実装する方法

ネイティブjsでAjaxを実装する方法

小云云オリジナル: 2018-03-31 16:48:521279ブラウズ

一般的に、JQuery が提供する Ajax メソッドの使用には誰もが慣れているかもしれませんが、ネイティブ JS を使用して Ajax メソッドを実装するにはどうすればよいでしょうか?この記事では主にネイティブ js で Ajax を実装する方法について説明します。お役に立てれば幸いです。

JQuery によって提供される Ajax メソッド:

$.ajax({
    url: ,
    type: &#39;&#39;,
    dataType: &#39;&#39;,
    data: {
          
    },
    success: function(){
         
    },
    error: function(){
          
    }
 })

Ajax メソッドのネイティブ js 実装:

var Ajax={
    get: function(url, fn) {        var xhr = new XMLHttpRequest();  // XMLHttpRequest对象用于在后台与服务器交换数据          
        xhr.open(&#39;GET&#39;, url, true);
        xhr.onreadystatechange = function() {            if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { // readyState == 4说明请求已完成
                fn.call(this, xhr.responseText);  //从服务器获得数据            }
        };
        xhr.send();
    },
    post: function (url, data, fn) {         // datat应为&#39;a=a1&b=b1&#39;这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
        var xhr = new XMLHttpRequest();
        xhr.open("POST", url, true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  // 添加http头，发送信息至服务器时内容编码类型
        xhr.onreadystatechange = function() {            if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {  // 304未修改
                fn.call(this, xhr.responseText);
            }
        };
        xhr.send(data);
    }
}

注:

1. open(method, url, async) メソッドには 3 つのパラメーターが必要です:

メソッド: 送信に使用されるメソッドリクエスト (GET または POST); GET は POST よりも簡単で高速であり、ほとんどの場合に機能します。ただし、次の場合には POST リクエストを使用してください:

キャッシュファイルが使用できない (サーバー上のファイルまたはデータベースが更新される)
大量のデータをサーバーに送信します（POSTにはデータ制限はありません）
未知の文字を含むユーザー入力を送信する場合、POSTはGETよりも安定しており信頼性があります

url：URLを指定しますサーバー側スクリプト (ファイルは、.txt や .xml などの任意のタイプのファイル、または .asp や .php などのサーバースクリプトファイル (応答を送り返す前にサーバー上でタスクを実行できます)) ;

: リクエストを非同期 (true) または同期 (false) で処理することを指定します。 true は、サーバーの応答を待機している間に他のスクリプトを実行し、応答の準備ができたら応答を処理することを意味します。実行前の応答。

2. send() メソッドはリクエストをサーバーに送信できます。

3. onreadystatechange:readyState が変化するたびに、onreadystatechange 関数が実行されます。

4.readyState: サーバー応答のステータス情報を保存します。

0: リクエストは初期化されていません (プロキシは作成されていますが、open() メソッドが呼び出されていません)
1: サーバー接続が確立されています (open メソッドが呼び出されています)
2: リクエストが受信されました (送信メソッドが呼び出され、ヘッダーとステータスが利用可能です)
3: リクエストが処理中です (ダウンロード中、responseText 属性には既にデータの一部が含まれています)
4: リクエストが完了し、レスポンスの準備が完了しました (ダウンロード操作が完了しました)

5. responseText: レスポンスデータを文字列形式で取得します。

6. setRequestHeader(): POST がデータを送信する場合、HTTP ヘッダーを追加してから send(data) を使用します。GET が情報を送信する場合は、URL にパラメーターを直接追加するだけです。 ?a=a1&b=b1 。

ネイティブjsでAjaxを実装する方法

関連記事