JavaScriptでajaxを実装する方法

ajax を実装する Javascript メソッド: 最初に XMLHttpRequest オブジェクトを使用してバックグラウンドでサーバーとデータを交換し、次にサーバーからデータを取得し、最後に情報をサーバーに送信するときに http ヘッダーとコンテンツ エンコード タイプを追加します。サーバ。

このチュートリアルの動作環境: Windows 7 システム、JavaScript バージョン 1.8.5、DELL G3 コンピューター。

ajax を実装する Javascript メソッド:

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);
  }
}

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

メソッド: 送信先request 使用するメソッド (GET または POST);

POST と比較すると、GET はより簡単かつ高速で、ほとんどの場合に機能しますが、次の状況では POST リクエストを使用します。

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

大量のデータをサーバーに送信する (POST にはデータ量制限がない)

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

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

async: 要求を非同期 (true) または同期 (false) で処理することを指定します。true は、それ以外のことを意味します。サーバーの応答を待機している間にタスクを実行する必要があります。スクリプト、応答の準備ができたら応答を処理します。false は、実行する前にサーバーの応答を待つことを意味します。

関連する無料学習の推奨事項: JavaScript ビデオ チュートリアル

以上がJavaScriptでajaxを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。