ネイティブjsでAjaxメソッドを実装するにはどうすればよいですか?ネイティブJSでAjaxを実装する方法の紹介（コード付き）

この記事では、ネイティブ JS で Ajax メソッドを実装する方法について説明します。ネイティブJSでAjaxを実装する方法を紹介（コード付き）。困っている友人は参考にしていただければ幸いです。

一般に、JQuery が提供する Ajax メソッドの使用には誰もが慣れているかもしれませんが、ネイティブ JS を使用して Ajax メソッドを実装するにはどうすればよいでしょうか?

JQuery が提供する Ajax メソッド:

$.ajax({
    url: ,
    type: '',
    dataType: '',
    data: {
          
    },
    success: function(){
         
    },
    error: function(){
          
    }
 })

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

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

コメント:

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

メソッド: リクエストの送信に使用されるメソッド (GET または POST)。POST と比較して、GET はよりシンプルで高速であり、ほとんどの場合に使用できます。次の状況では POST リクエストを使用してください:

• キャッシュ ファイルが使用できない (サーバー上のファイルまたはデータベースの更新)

• 大量の送信サーバーへのデータ量 (POST にはデータ量の制限はありません)

• 未知の文字を含むユーザー入力を送信する場合、POST は GET よりも安定しており、信頼性が高くなります。

  url: サーバー側スクリプトの URL を指定します (ファイルは、.txt や .xml などの任意のタイプのファイル、または .asp や .php などのサーバー スクリプト ファイル (

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

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

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

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

0: リクエストは初期化されていません (プロキシは作成されていますが、open() メソッドが呼び出されていません)

• 1:サーバー接続が確立されました (
open
• メソッドが呼び出されています)
  2: リクエストが受信されました (
send
• メソッドが呼び出されています)
  3: リクエストは処理中です (ダウンロード中、
responseText
• 属性には既にデータが含まれています)
  4: リクエストの処理が完了し、応答の準備が完了しました (ダウンロード操作が完了しました)

• #5: 応答データを取得します。文字列形式。

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

PS

: Fetch Polyfill の基本原理は、window.fetch メソッドが存在するかどうかを検出し、存在しない場合は XHR を使用して実装することです。

以上がネイティブjsでAjaxメソッドを実装するにはどうすればよいですか?ネイティブJSでAjaxを実装する方法の紹介（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。