JavaScriptネイティブAjax書き方の共有_JavaScriptスキル

ajax: ページ全体を更新せずにデータをリクエストする方法
ajax の技術的核心は XMLHttpRequest オブジェクトです。 ajax リクエスト プロセス: XMLHttpRequest オブジェクトを作成し、サーバーに接続し、リクエストを送信し、応答データを受信します。

/**
 * 得到ajax对象
 */
function getajaxHttp() {
  var xmlHttp;
  try {
    //chrome, Firefox, Opera 8.0+, Safari
    xmlHttp = new XMLHttpRequest();
    } catch (e) {
      // Internet Explorer
      try {
        //IE5，6
        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
      try {
        //IE7以上
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        alert("您的浏览器不支持AJAX！");
        return false;
      }
    }
  }
  return xmlHttp;
}
/**
 * 发送ajax请求
 * url--url
 * methodtype(post/get)
 * con (true(异步)|false(同步))
 * parameter(参数)
 * functionName(回调方法名，不需要引号,这里只有成功的时候才调用)
 * (注意：这方法有二个参数，一个就是xmlhttp,一个就是要处理的对象)
 * obj需要到回调方法中处理的对象
 */
function ajaxrequest(url,methodtype,con,parameter,functionName,obj){
  var xmlhttp=getajaxHttp();
  xmlhttp.onreadystatechange=function(){
     
    // readyState值说明 
    // 0,初始化,XHR对象已经创建,还未执行open 
    // 1,载入,已经调用open方法,但是还没发送请求 
    // 2,载入完成,请求已经发送完成 
    // 3,交互,可以接收到部分数据 
  
    // status值说明 
    // 200:成功 
    // 404:没有发现文件、查询或URl 
    // 500:服务器产生内部错误 
 
    if(xmlhttp.readyState==4&& XHR.status == 200){
      //HTTP响应已经完全接收才调用
      functionName(xmlhttp,obj);
    }
  };
  xmlhttp.open(methodtype,url,con);
  xmlhttp.send(parameter);
}
//这就是参数
function createxml(){
  var xml="<user><userid>asdfasdfasdf<\/userid><\/user>";//"\/"这不是大写V而是转义是左斜杠和右斜杠
  return xml;
}
//这就是参数
function createjson(){
  var json={id:0,username:"好人"};
  return json;
}
function c(){
  alert("");
}

//テスト

ajaxrequest("http://www.baidu.com","post",true,createxml(),c,document);

別の例を見てみましょう

ajax({
    url: "./TestXHR.aspx",       //请求地址
    type: "POST",            //请求方式
    data: { name: "super", age: 20 },    //请求参数
    dataType: "json",
    success: function (response, xml) {
      // 此处放成功后执行的代码
    },
    fail: function (status) {
      // 此处放失败后执行的代码
    }
  });

  function ajax(options) {
    options = options || {};
    options.type = (options.type || "GET").toUpperCase();
    options.dataType = options.dataType || "json";
    var params = formatParams(options.data);

    //创建 - 非IE6 - 第一步
    if (window.XMLHttpRequest) {
      var xhr = new XMLHttpRequest();
    } else { //IE6及其以下版本浏览器
      var xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    //接收 - 第三步
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        var status = xhr.status;
        if (status >= 200 && status < 300) {
          options.success && options.success(xhr.responseText, xhr.responseXML);
        } else {
          options.fail && options.fail(status);
        }
      }
    }

    //连接 和 发送 - 第二步
    if (options.type == "GET") {
      xhr.open("GET", options.url + "&#63;" + params, true);
      xhr.send(null);
    } else if (options.type == "POST") {
      xhr.open("POST", options.url, true);
      //设置表单提交时的内容类型
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.send(params);
    }
  }
  //格式化参数
  function formatParams(data) {
    var arr = [];
    for (var name in data) {
      arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
    }
    arr.push(("v=" + Math.random()).replace(".",""));
    return arr.join("&");
  }

原理を見てみましょう

1.

を作成します。 1.1、IE7 以降はネイティブ XHR オブジェクトをサポートしているため、それを直接使用できます: var oAjax = new XMLHttpRequest();

1.2、IE6、およびそれ以前のバージョンでは、XHR オブジェクトは MSXML ライブラリの ActiveX オブジェクトを通じて実装されます。一部の書籍では、IE のこのようなオブジェクトの 3 つの異なるバージョン、つまり MSXML2 について詳しく説明しています。

2. 接続して送信

2.1. open() 関数の 3 つのパラメーター: リクエスト メソッド、リクエスト アドレス、および非同期リクエストするかどうか (同期リクエストはまれであり、これまで使用されていません)。 2.2. GET リクエスト メソッドは URL パラメーターを介してサーバーにデータを送信しますが、POST は送信パラメーターとしてサーバーにデータを送信します。

2.3. データを送信する前に、POST リクエストでフォーム送信のコンテンツ タイプを設定する必要があります。

2.4. サーバーに送信されるパラメータは、encodeURIComponent() メソッドを通じてエンコードする必要があります。実際、パラメータ リスト「key=value」では、キーと値の両方に特殊文字が含まれるため、エンコードする必要があります。リクエストが行われるたびに、「v=xx」という文字列がパラメータ リストに入力されます。これは、毎回キャッシュを拒否し、サーバーに直接リクエストするためです。

encodeURI(): URI 全体のエンコードに使用されます。コロン、スラッシュ、疑問符、ポンド記号などの特殊文字はエンコードされません。 🎜> encodeURIComponent(): URI の特定の部分をエンコードするために使用され、対応するデコード関数 decodeURIComponent() が見つかった非標準文字をエンコードします。

3.

を受け取ります。

3.1. 応答を受信すると、応答データは自動的に XHR オブジェクトに入力されます。

responseText: 応答によって返される本文の内容。文字列型です。 responseXML: 応答のコンテンツ タイプが「text/xml」または「application/xml」の場合、この属性には、XML に対応するドキュメント タイプである対応する XML データが格納されます。 ステータス: 応答 HTTP ステータス コード
statusText: HTTP ステータスの説明

3.2. XHR オブジェクトのreadyState 属性は、リクエスト/レスポンス プロセスの現在のアクティブな段階を示します。この属性の値は次のとおりです。 0 - 初期化されていないため、open() メソッドが呼び出されていません。 1-起動すると、open() メソッドが呼び出されますが、send() メソッドは呼び出されません。 2-Send、send() メソッドが呼び出されましたが、応答は受信されませんでした。 3-受信、応答データの一部を受信しました。 4-完了、すべての応答データが受信されました

readyState の値が変更される限り、readystatechange イベントが呼び出されます (実際、送信時にサーバーへのリクエストによりネットワーク通信が発生するため、論理的にスムーズにするために、readystatechange を送信の後に配置できます)。送信後にreadystatechangeイベントを指定することも可能です。私は通常この方法で使用しますが、標準化とブラウザ間の互換性のために、開く前に指定することをお勧めします)。

3.3.readystatechange イベントでは、最初に応答が受信されたかどうかを判断し、次にサーバーがリクエストを正常に処理したかどうかを判断します。2 で始まるステータス コードは、リクエストの取得が成功したことを意味します。コードは各リクエストに乱数を追加するため、値はキャッシュから取得されないため、このステータスを判断する必要はありません。

4. Ajax リクエストはドメインを越えることはできません。