Partage des méthodes d'écriture ajax natives javascript_javascript

ajax : un moyen de demander des données sans actualiser la page entière
Le noyau technique d'ajax est l'objet XMLHttpRequest
; Processus de requête ajax : créer un objet XMLHttpRequest, se connecter au serveur, envoyer une requête, recevoir des données de réponse

 ;

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

Regardons un autre exemple

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

Regardons le principe

1. Créer

1.1, IE7 et supérieur prennent en charge les objets XHR natifs, vous pouvez donc l'utiliser directement : var oAjax = new XMLHttpRequest();

Dans 1.2, IE6 et versions précédentes, l'objet XHR est implémenté via un objet ActiveX dans la bibliothèque MSXML. Certains livres détaillent trois versions différentes de ces objets dans IE, à savoir MSXML2 =new ActiveXObject('Microsoft.XMLHTTP');

.

2. Connectez-vous et envoyez

2.1. Trois paramètres de la fonction open() : méthode de requête, adresse de requête et requête asynchrone (les requêtes synchrones sont rares et n'ont pas été utilisées jusqu'à présent

) ;

2.2. La méthode de requête GET soumet les données au serveur via les paramètres d'URL, tandis que POST soumet les données au serveur en tant que paramètres d'envoi

;

2.3. Dans la requête POST, avant d'envoyer les données, le type de contenu de soumission du formulaire doit être défini ;

2.4. Les paramètres soumis au serveur doivent être encodés via la méthode encodeURIComponent(). En fait, dans la liste des paramètres "key=value", la clé et la valeur doivent être encodées car elles contiendront des caractères spéciaux. Chaque fois qu'une requête est effectuée, une chaîne "v=xx" sera épelée dans la liste des paramètres afin de refuser la mise en cache et de demander directement au serveur à chaque fois.

encodeURI() : utilisé pour coder l'intégralité de l'URI. Les caractères spéciaux qui font partie de l'URI ne seront pas codés, tels que les deux points, les barres obliques, les points d'interrogation et les signes dièse ; 🎜> encodeURIComponent() : utilisé pour encoder une certaine partie de l'URI, et encodera tous les caractères non standard qu'il trouve ; sa fonction de décodage correspondante decodeURIComponent();

3. Recevoir

3.1. Après avoir reçu la réponse, les données de réponse rempliront automatiquement l'objet XHR. Les attributs pertinents sont les suivants ResponseText : le contenu du corps renvoyé par la réponse, qui est un type chaîne

 ; réponseXML : Si le type de contenu de la réponse est "text/xml" ou "application/xml", cet attribut stockera les données XML correspondantes, qui sont le type de document correspondant à XML

; status : code d’état HTTP de réponse ;
statusText : Description de l'état HTTP ;

3.2. L'attribut readyState de l'objet XHR indique l'étape active actuelle du processus de demande/réponse. La valeur de cet attribut est la suivante
0 - Non initialisé, la méthode open() n'a pas été appelée

1-Démarrez, la méthode open() est appelée, et la méthode send() n'est pas appelée

; 2-Envoyer, la méthode send() a été appelée, et aucune réponse n'a été reçue
3-Recevoir, une partie des données de réponse a été reçue
4-Complet, toutes les données de réponse ont été reçues

Tant que la valeur de readyState change, l'événement readystatechange sera appelé. (En fait, pour des raisons de fluidité logique, readystatechange peut être placé après l'envoi, car lors de l'envoi, la demande au serveur provoquera une communication réseau, ce qui prend du temps. Spécifier l'événement readystatechange après l'envoi est également possible, je les utilise habituellement de cette façon, mais par souci de standardisation et de compatibilité entre navigateurs, il est préférable de les spécifier avant l'ouverture).

3.3. Dans l'événement readystatechange, déterminez d'abord si la réponse est reçue, puis déterminez si le serveur a traité avec succès la demande. xhr.status est le code d'état. Les codes d'état commençant par 304 signifient que l'obtention a réussi. le cache. Le code ajoute un nombre aléatoire à chaque requête, donc la valeur ne sera pas récupérée du cache, il n'est donc pas nécessaire de juger de cet état.

4. Les requêtes Ajax ne peuvent pas traverser les domaines !