Quelle est la syntaxe commune d'AJAX

Nous savons tous qu'ajax est désormais une technologie très courante. Cet article présente principalement le principe d'implémentation d'ajax en JS natif ainsi que les concepts et processus de XMLHttpRequest et promise.

Ajax est une technologie très courante à l'heure actuelle, et c'est aussi une technologie digne de discussion et de recherche. Cet article partagera avec vous la nouvelle et l'ancienne syntaxe d'Ajax basée sur le processus de développement d'Ajax et comment elle est utilisée dans différents frameworks de bibliothèques.

Introduction à Ajax

Ajax signifie "Asynchronous Javascript And XML", ce qui signifie "Javascript et XML asynchrones". Grâce à Ajax, nous pouvons envoyer des requêtes au serveur pour une interaction de données sans bloquer la page, ce qui peut également être compris comme une transmission de données asynchrone. Avec l'aide d'Ajax, notre page Web n'a besoin que d'être partiellement actualisée pour mettre à jour l'affichage des données, réduisant ainsi la quantité de données inutiles, améliorant considérablement l'expérience utilisateur, raccourcissant le temps d'attente de l'utilisateur et rendant l'application Web plus petite et plus rapide. Plus convivial.

Bien sûr, ce qui précède est un contenu courant. En tant que développeur qualifié, vous le connaissez fondamentalement. Voici juste une brève introduction pour ceux qui débutent.

Ajax natif

Fondamentalement, tous les navigateurs modernes prennent en charge la fonction Ajax native. Voici une introduction détaillée à la façon dont nous utilisons JS natif pour lancer et traiter les requêtes Ajax.

Obtenir l'objet XMLHttpRequest

var xhr = new XMLHttpRequest(); // Récupérer l'objet XMLHttpRequest intégré au navigateur

Si votre application de projet ne prend pas en compte les versions inférieures de IE, alors vous pouvez utiliser directement la méthode ci-dessus. Tous les navigateurs modernes (Firefox, Chrome, Safari et Opera) ont des objets XMLHttpRequest intégrés. Si vous avez besoin d'être compatible avec les anciennes versions d'IE (IE5, IE6), vous pouvez utiliser des objets ActiveX :

var xhr;
if (window.XMLHttpRequest) {
  xhr=new XMLHttpRequest();
} else if (window.ActiveXObject) {  // 兼容老版本浏览器
  xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

Configuration des paramètres

Avec l'objet XMLHttpRequest, il faut également configurer quelques informations sur les paramètres de requête. Pour compléter l'interaction des données, utilisez la méthode open :

var xhr;
if (window.XMLHttpRequest) {
  xhr=new XMLHttpRequest();
} else if (window.ActiveXObject) {
  xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xhr) {
  xhr.open('GET', '/test/', true); // 以GET请求的方式向'/test/'路径发送异步请求
}

La méthode open crée une nouvelle requête http pour nous, où le premier paramètre est la méthode de requête, généralement 'GET' ou ' POST'; Le deuxième paramètre est l'URL de la requête ; le troisième paramètre indique si elle est asynchrone et la valeur par défaut est vraie.

Envoyer la demande

Après avoir configuré les informations des paramètres de base, nous appelons directement la méthode d'envoi pour envoyer la demande. Le code est le suivant :

var xhr;
if (window.XMLHttpRequest) {
  xhr=new XMLHttpRequest();
} else if (window.ActiveXObject) {
  xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xhr) {
  xhr.open('GET', '/test/', true); 
  xhr.send(); // 调用send方法发送请求
}

Ce qui doit être envoyé. Il convient de noter ici que si la méthode GET est utilisée pour transmettre des paramètres, nous pouvons directement placer les paramètres après l'URL, tels que « /test/?name=luozh&size=12 » si vous utilisez la méthode POST, alors nos paramètres doivent être écrit dans la méthode d'envoi, tel que :

xhr.open('POST', '/test/', true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 将请求头设置为表单方式提交
xhr.send('name=luozh&size=12');

Il sera finalement livré sous forme de données de formulaire :

Si l'en-tête de la requête n'est pas défini, l'Ajax natif enverra les données en utilisant le Content-Type de 'text/plain;charset=UTF-8' par défaut. Le formulaire d'écriture des paramètres ci-dessus, notre formulaire de transmission final est comme ceci :

Ce n'est évidemment pas le format de données attendu par le serveur, nous pouvons l'écrire comme ceci :

xhr.open('POST', '/test/', true);
xhr.send(JSON.stringify({name: 'luozh', size: 12}));

De cette façon, nous pouvons passer directement du JSON. La chaîne est traitée par l'arrière-plan, et bien sûr l'arrière-plan peut être configuré en conséquence.

Statut de surveillance

Après l'envoi de la requête Ajax, nous devons surveiller l'état renvoyé par le serveur et le traiter en conséquence. Ici, nous devons utiliser la méthode onreadystatechange, le code est le suivant :

var xhr;
if (window.XMLHttpRequest) {
  xhr=new XMLHttpRequest();
} else if (window.ActiveXObject) {
  xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xhr) {
  xhr.open('GET', '/test/', true);   // 以GET请求的方式向'/test/'路径发送异步请求
  xhr.send();
  xhr.onreadystatechange = function () {  // 利用onreadystatechange监测状态
    if (xhr.readyState === 4) {  // readyState为4表示请求响应完成
      if (xhr.status === 200) {  // status为200表示请求成功
        console.log('执行成功');
      } else {
        console.log('执行出错');
      }  
    }
  }
}

Ci-dessus, nous utilisons onreadystatechange pour surveiller l'état et utilisons en interne readyState pour obtenir l'état actuel. readyState a un total de 5 étapes. Lorsqu'il est 4, cela signifie que le contenu de la réponse a été analysé et peut être appelé sur le client. Lorsque readyState vaut 4, nous obtenons le code d'état via status. Lorsque le code d'état est 200, le code de réussite est exécuté, sinon le code d'erreur est exécuté.

Bien sûr, nous pouvons utiliser onload pour remplacer la situation où onreadystatechange est égal à 4, car onload n'est appelé que lorsque l'état est 4. Le code est le suivant

xhr.onload = function () {  // 调用onload
  if (xhr.status === 200) {  // status为200表示请求成功
    console.log('执行成功');
  } else {
    console.log('执行出错');
  }  
}

Cependant, il convient de noter que IE La prise en charge de l'attribut onload n'est pas conviviale.

En plus du onload, il y a aussi :

1.onloadstart
2.onprogress
3.onabort
4.ontimeout
5.onerror
6.onloadend

et d'autres événements. Les étudiants intéressés peuvent pratiquer leur utilité en personne.

Ce qui précède est le code commun pour les données de requête Ajax natives.

Ajax dans d'autres frameworks de bibliothèques

Ajax dans jQuery

jQuery est la bibliothèque avec le plus d'utilisateurs, et son Ajax est bien encapsulé L'Ajax natif le code a été grandement amélioré en termes de compatibilité et de facilité d'utilisation, rendant les appels Ajax très simples. Ce qui suit est un simple code Ajax jQuery :

$.ajax({
  method: 'GET', // 1.9.0本版前用'type'
  url: "/test/",
  dataType: 'json'
})
.done(function() {
  console.log('执行成功');
})
.fail(function() {
  console.log('执行出错');
})

Différent de l'Ajax natif, le type de contenu par défaut dans jQuery est 'application/x-www-form-urlencoded=UTF- 8', si vous souhaitez en savoir plus sur jQuery Ajax, vous pouvez vous rendre sur la documentation officielle : http://api.jquery.com/jquery.ajax/

Ajax dans Vue.js

En guise de Framework front-end actuellement populaire, Vue.js n'inclut pas réellement la fonctionnalité Ajax elle-même, mais doit être référencée dans le projet sous la forme d'un plug-in. Le plug-in Ajax officiellement recommandé est vue-resource. Voici la demande de vue-resource :

Vue.http.get('/test/').then((response) => {
  console.log('执行成功');
}, (response) => {
  console.log('执行出错');
});

3. Ajax dans Angular.js

L'Ajax dans Angular.js fait ici principalement référence à la version 1.× d'Angular. , car Angular2 n'est actuellement pas recommandé dans l'environnement de production utilisé.

var myApp = angular.module('myApp',[]);
var myCtrl = myApp.controller('myCtrl',['$scope','$http',function($scope, $http){
  $http({
    method: 'GET',
    url: '/test/',
    headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'} 
  }).success(function (data) {
    console.log('执行成功');
  }).error(function () {
    console.log('执行出错');
  });
}]);

在Angular中，我们需要在控制器上注册一个$http的事件，然后才能在内部执行Ajax。Angular的Ajax默认的Content-type是'application/json;charset=UTF-8'，所以如果想用表单的方式提交还需设置下headers属性。

4.React中的Ajax

在React中我比较推荐使用fetch来请求数据，当然其不仅适用于React，在任何一种框架如上面的Vue、Angular中都可以使用，因为其已经被目前主流浏览器所支持，至于其主要功能和用法，我在下面会做下讲解。

Fetch API

Fetch API 是基于 Promise 设计，由于Promise的浏览器兼容性问题及Fetch API本身的兼容问题，一些浏览器暂时不支持Fetch API，浏览器兼容图如下：

当然我们可以通过使用一些插件来解决兼容性问题，比如：fetch-polyfill、es6-promise、fetch-ie8等。

使用Fetch我们可以非常便捷的编写Ajax请求，我们用原生的XMLHttpRequst对象和Fetch来比较一下：

XMLHttpRequst API
// XMLHttpRequst API
var xhr = new XMLHttpRequest();
xhr.open('GET', '/test/', true);
xhr.onload = function() {
  console.log('执行成功');
};
xhr.onerror = function() {
  console.log('执行出错');
};
xhr.send();
Fetch API 
fetch('/test/').then(function(response) {
  return response.json();
}).then(function(data) {
  console.log('执行成功');
}).catch(function(e) {
  console.log('执行出错');
});

可以看出使用Fetch后我们的代码更加简洁和语义化，链式调用的方式也使其更加流畅和清晰。随着浏览器内核的不断完善，今后的XMLHttpRequest会逐渐被Fetch替代。关于Fetch的详细介绍可以移步：https://segmentfault.com/a/1190000003810652

跨域Ajax

介绍了各种各样的Ajax API，我们不能避免的一个重要问题就是跨域，这里重点讲解下Ajax跨域的处理方式。

处理Ajax跨域问题主要有以下4种方式：

1.利用iframe

2.利用JSONP

3.利用代理

4.利用HTML5提供的XMLHttpRequest Level2

第1和第2种方式大家应该都非常熟悉，都属于前端的活，这里就不做介绍了，这里主要介绍第3和第4种方式。

利用代理的方式可以这样理解：

通过在同域名下的web服务器端创建一个代理：

北京服务器(域名:www.beijing.com)

上海服务器(域名：www.shanghai.com)

比如在北京的web服务器的后台(www.beijing.com/proxy-shanghaiservice.php)来调用上海服务器(www.shanghai.com/services.php)的服务，然后再把访问结果返回给前端，这样前端调用北京同域名的服务就和调用上海的服务效果相同了。

利用XMLHttpRequest Level2的方式需要后台将请求头进行相应配置：

// php语法
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET,POST');

以上的*号可以替换成允许访问的域名，*表示所有域名都可以访问。

由此可见，第3和第4种方式主要是后台的活，前端只需调用就可以。

总结

无论Ajax的语法多么多变，无论库和框架如何封装Ajax，其只是一种实现异步数据交互的工具，我们只需理解原生JS中Ajax的实现原理，了解XMLHttpRequest及promise的概念和流程，便可以轻松的在数据异步交互的时代游刃有余。

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

CSS的文本字体颜色如何设置

css里的font文字怎么设置

 Css3中的transform 渐变属性怎么使用

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!