Une brève analyse de la syntaxe Ajax

Ajax est une technologie très courante à l'heure actuelle, et c'est aussi une technologie digne de discussion et de recherche. Cet article se concentrera sur le processus de développement d'Ajax et le combinera dans différentes bibliothèques framework Partageons avec vous la nouvelle et l'ancienne syntaxe d'Ajax. Et XML", qui signifie "JavaScript et XML asynchrones". Grâce à Ajax, nous pouvons envoyer des requêtes au serveur et interagir avec les 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 L'affichage des données peut être mis à jour avec seulement un rafraîchissement partiel, ce qui réduit la quantité de données inutiles, améliore considérablement l'expérience utilisateur, réduit le temps d'attente de l'utilisateur et rend le application Web plus petite, plus rapide et plus conviviale. > 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. , veuillez vous rendre sur PHP chinois. Découvrez-le en ligne :
Ajax natif

Fondamentalement, tous les navigateurs modernes prennent en charge la fonction Ajax native. Présentons en détail comment nous utilisons le JS Initier et traiter les requêtes Ajax

　1. Récupérer l'objet XMLHttpRequest

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

　2. . Configuration des paramètres

Avec l'objet XMLHttpRequest, nous devons également configurer certaines informations sur les paramètres de la requête pour terminer l'interaction avec les données :

La méthode open crée un nouveau http. request pour nous. Le premier 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 est s'il est asynchrone, la valeur par défaut est true

3. Envoyer la requête

var xhr = new XMLHttpRequest(); // 获取浏览器内置的XMLHttpRequest对象

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

var xhr;

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

Ce qu'il faut noter ici. est 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. Par exemple '/test/?name=luozh&size=12' ; la méthode d'envoi, telle que :

Elle sera finalement transmise sous forme de Données de formulaire :

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/'路径发送异步请求
}

Si l'en-tête de la requête n'est pas renseigné , l'Ajax natif enverra les données en utilisant le type de contenu 'text/plain; charset=UTF-8' par défaut. Si vous suivez les paramètres ci-dessus. Sous forme écrite, le formulaire que nous transmettons finalement 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 n'est évidemment pas le format de données attendu par le serveur, on peut écrire ainsi :

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

Le format de transmission final est le suivant :

De cette façon, nous pouvons transmettre directement la chaîne JSON

à l'arrière-plan pour traitement. Bien entendu, l'arrière-plan peut être configuré en conséquence.

4. Surveillance de l'état

Après avoir envoyé 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. suit :

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

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, on obtient 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 on peut 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 :

Cependant , il convient de noter que la prise en charge par IE de l'attribut onload

n'est pas conviviale.

En plus de onload, il y a aussi

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('执行出错');
            }   
        }
    }
}

onloadstart

onprogress

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

onabort

ontimeout
onerror
onloadend

　　等事件，有兴趣的同学可以亲自去实践它们的用处。

　　以上便是原生Ajax请求数据的常见代码。

　其他库框架中的Ajax

　　1.jQuery中的Ajax

　　jQuery作为一个使用人数最多的库，其Ajax很好的封装了原生Ajax的代码，在兼容性和易用性方面都做了很大的提高，让Ajax的调用变得非常简单。下面便是一段简单的jQuery的Ajax代码：

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

　　与原生Ajax不同的是，jQuery中默认的Content-type是'application/x-www-form-urlencoded; charset=UTF-8', 想了解更多的jQuery Ajax的信息可以移步官方文档：http://api.jquery.com/jquery.ajax

　　2.Vue.js中的Ajax

　　Vue.js作为目前热门的前端框架，其实其本身并不包含Ajax功能，而是通过插件的形式额外需要在项目中引用，其官方推荐Ajax插件为vue-resource，下面便是vue-resource的请求代码：

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

　　vue-resource支持Promise API，同时支持目前的Firefox, Chrome, Safari, Opera 和 IE9+浏览器，在浏览器兼容性上不兼容IE8，毕竟Vue本身也不兼容IE8。想了解更多的vue-resource的信息可以移步github文档：https://github.com/vuejs/vue-resource

　　3.Angular.js中的Ajax

　　这里Angular.js中的Ajax主要指Angular的1.×版本，因为Angular2目前还不建议在生产环境中使用。

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属性。想了解更多的Angular Ajax的信息可以移步官方文档：https://docs.angularjs.org/api/ng/service/$http（可能需要翻墙）更多精彩内容关注微信公众号：全栈开发者中心（admin10000_com）

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

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

On peut voir que les troisième et quatrième méthodes sont principalement un travail en arrière-plan, et le front-end n'a qu'à l'appeler.

Résumé

Quelle que soit la diversité de la syntaxe d'Ajax, quelle que soit la façon dont les bibliothèques et les frameworks encapsulent Ajax, ce n'est qu'un outil pour réaliser une interaction de données asynchrone. d'Ajax dans le principe JS natif, comprenez les concepts et les processus de XMLHttpRequest et de la promesse, et vous pourrez facilement opérer à l'ère de l'interaction de données asynchrones.

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!