Weitergabe von Javascript-nativen Ajax-Schreibmethoden_Javascript-Kenntnissen

Ajax: eine Möglichkeit, Daten anzufordern, ohne die gesamte Seite zu aktualisieren; Der technische Kern von Ajax ist das XMLHttpRequest-Objekt; Ajax-Anfrageprozess: XMLHttpRequest-Objekt erstellen, Verbindung zum Server herstellen, Anfrage senden, Antwortdaten empfangen

/**
 * 得到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("");
}

//Test

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

Sehen wir uns ein anderes Beispiel an

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("&");
  }

Werfen wir einen Blick auf das Prinzip

1. Erstellen Sie

1.1, IE7 und höher unterstützen native XHR-Objekte, sodass Sie sie direkt verwenden können: var oAjax = new XMLHttpRequest();

In 1.2, IE6 und früheren Versionen wird das XHR-Objekt über ein ActiveX-Objekt in der MSXML-Bibliothek implementiert. Einige Bücher beschreiben drei verschiedene Versionen solcher Objekte im IE, nämlich MSXML2 =new ActiveXObject('Microsoft.XMLHTTP');

2. Verbinden und senden

2.1. Drei Parameter der open()-Funktion: Anfragemethode, Anfrageadresse und ob asynchrone Anfragen gestellt werden sollen (synchrone Anfragen sind selten und wurden bisher nicht verwendet);

2.2. Die GET-Anfragemethode übermittelt Daten über URL-Parameter an den Server, während POST Daten als Sendeparameter an den Server übermittelt

2.3. In der POST-Anfrage muss vor dem Senden von Daten der Inhaltstyp der Formularübermittlung festgelegt werden;

2.4. An den Server übermittelte Parameter müssen über die Methode encodeURIComponent() codiert werden. Tatsächlich müssen in der Parameterliste „key=value“ sowohl Schlüssel als auch Wert codiert werden, da sie Sonderzeichen enthalten. Bei jeder Anfrage wird die Zeichenfolge „v=xx“ in die Parameterliste geschrieben. Dies dient dazu, das Caching zu verweigern und die Anfrage jedes Mal direkt an den Server zu richten.

encodeURI(): Wird zum Codieren des gesamten URI verwendet. Sonderzeichen, die Teil des URI sind, wie Doppelpunkte, Schrägstriche und Nummernzeichen, werden nicht codiert 🎜> encodeURIComponent(): wird zum Codieren eines bestimmten Teils des URI verwendet und codiert alle nicht standardmäßigen Zeichen, die es findet; decodeURIComponent();

3. Empfangen

3.1. Nach Erhalt der Antwort werden die Antwortdaten automatisch in das XHR-Objekt eingefügt. Die relevanten Attribute lauten wie folgt:
Antworttext: der von der Antwort zurückgegebene Textinhalt, der ein Zeichenfolgentyp ist; AntwortXML: Wenn der Inhaltstyp der Antwort „text/xml“ oder „application/xml“ ist, speichert dieses Attribut die entsprechenden XML-Daten, bei denen es sich um den Dokumenttyp handelt, der XML entspricht Status: HTTP-Statuscode der Antwort;

statusText: Beschreibung des HTTP-Status;

3.2. Das readyState-Attribut des XHR-Objekts gibt die aktuell aktive Phase des Anfrage-/Antwortprozesses an. Der Wert dieses Attributs ist wie folgt: 0 – Nicht initialisiert, die open()-Methode wurde nicht aufgerufen; 1-Starten, die open()-Methode wird aufgerufen und die send()-Methode wird nicht aufgerufen; 2-Senden, die send()-Methode wurde aufgerufen und es wurde keine Antwort empfangen; 3-Empfangen, ein Teil der Antwortdaten wurde empfangen; 4-Abgeschlossen, alle Antwortdaten wurden empfangen; Solange sich der Wert von readyState ändert, wird das Ereignis „readystatechange“ aufgerufen (aus Gründen der logischen Glätte kann „readystatechange“ tatsächlich nach dem Senden platziert werden, da beim Senden eine Anforderung an den Server eine Netzwerkkommunikation verursacht, die Zeit benötigt. Es ist auch möglich, das Ereignis „readystatechange“ nach dem Senden anzugeben. Normalerweise verwende ich sie auf diese Weise, aber aus Gründen der Standardisierung und browserübergreifenden Kompatibilität ist es besser, sie vor dem Öffnen anzugeben.

3.3. Stellen Sie zunächst fest, ob die Antwort vom Server empfangen wurde. xhr.status ist der Statuscode, der mit 2 beginnt Der Code fügt jeder Anfrage eine Zufallszahl hinzu, sodass der Wert nicht aus dem Cache abgerufen wird und dieser Status nicht beurteilt werden muss.


4. Ajax-Anfragen können nicht domänenübergreifend sein!