Présentation et implémentation d'Ajax

Cette fois, je vais vous apporter un aperçu et la mise en œuvre d'Ajax. Quelles sont les précautions pour la présentation et la mise en œuvre d'Ajax Voici des cas pratiques, jetons un coup d'œil.

Ajax est l'abréviation de Asynchronous JavaScript XML. Il ne s'agit pas d'une nouvelle technologie, mais d'une utilisation complète des technologies existantes. Cet article présente en détail la présentation et les méthodes d'implémentation spécifiques d'Ajax. Les amis dans le besoin peuvent y jeter un œil, j'espère que cela vous sera utile

1. Présentation d'ajax

1. Ajax est asynchrone ([ə'sɪŋkrənəs) JavaScript XML En bref, il ne s'agit pas d'une nouvelle technologie, mais de l'utilisation complète des technologies existantes. Cette technologie peut demander des données supplémentaires au serveur sans actualiser la page, apportant une meilleure expérience utilisateur

2. Le cœur de la technologie Ajax est l'objet XMLHttpRequest (XHR en abrégé), qui a été introduit pour la première fois par la caractéristique Microsoft. Avant l'avènement de XHR, la communication de style Ajax devait être réalisée avec quelques hacks, principalement en utilisant des frames cachées ou des frames en ligne.

3. XHR fournit une interface fluide pour envoyer des requêtes au serveur et analyser la réponse du serveur. Être capable d'obtenir plus d'informations du serveur de manière asynchrone signifie qu'après que l'utilisateur a cliqué, de nouvelles données peuvent être obtenues sans actualiser la page. En d'autres termes, vous pouvez utiliser l'objet XHR pour obtenir de nouvelles données, puis insérer les nouvelles données dans la page via le DOM

4. Bien que le nom Ajax contienne des composants XML, la communication Ajax n'a rien à voir avec le format des données. Cette technologie consiste à obtenir des données du serveur sans rafraîchir la page, mais ce ne sont pas nécessairement des données XML

2. Fonctionnement : ajax natif et ajax encapsulé dans jQuery

1, Ajax natif :

Fonction Ajax : Envoyer la demande (set request setRequest) Recevoir la réponse (getResponse)

A. Envoyer la demande de manière native ajax :

La chose la plus importante en Ajax est également la partie la plus fixe est la requête http.

1) Établir une connexion : (les versions IE7 et supérieures prennent en charge XMLHttpRequest)

var xhr = new XMLHttpRequest(); //创建异步请求对象

2) Obtenir la demande : Le format doit être (url?name1=value1&name2 = valeur2)

xhr.open("get","01-register.php?name="+name);//初始化异步get请求
xhr.send(null); //与服务器建立连接

3)Publier la demande

xhr.open('post','01-XMLHTTPRequest-test.php');//请求报文行
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); /*post请求设置请求头*/
xhr.send('name=rose&age=20'); //请求报文体

4) La différence entre les demandes d'obtention et de publication :

★get fait ne nécessite pas de définir l'en-tête de la demande, et la publication doit définir l'en-tête de la demande

★Les données obtenues sont transmises via l'URL, tandis que les données de publication sont transmises dans la méthode d'envoi

B Recevoir la réponse en ajax natif. manière :

/*监听服务器的响应*/
xhr.onreadystatechange=function(){
/*判断当前的响应是否成功 1.服务器做出了响应 2.响应的结果是正确的*/
 if(xhr.status==200 && xhr.readyState==4){
 var result=xhr.responseText;
 console.log(result); //输出从服务器中获取到的数据
 //接下来就可以对数据进行相应的处理了
 }
 };

C. Traitement des données de réponse :

 /*监听*/
 xhr.onreadystatechange=function(){
 if(xhr.status==200 && xhr.readyState==4){ /*判断状态*/
 var result;
 /*获取响应报文中的Content-Type*/
 var ct=xhr.getResponseHeader("Content-Type");
 /*判断Content-Type,进行数据的解析*/
 if(ct.indexOf("xml") != -1){
 result=xhr.responseXML;
 }
 else if(ct.indexOf("json") !=-1){
 result=JSON.parse(xhr.responseText);
 }
 else{
 result=xhr.responseText;
 }
 /*调用回调函数--委托--代理*/
 success && success(result);
 }
 };

Ajax encapsulé dans jQuery

 $.ajax({
 type: 请求方式(get/post),
 url: "register.php",
 data: 发送请求数据,
 beforeSend:function(){返回false可以取消本次ajax请求},
 success:function(result){ 成功响应后调用 },
 error:function(err){ 错误响应时调用 },
 complete:function(){ 响应完成时调用(包括成功和失败) }
 });

jQuery fournit une méthode spécialisée pour sérialiser le formulaire :

 $('form').serialize():   //序列化表单(即格式化key=val & key=val);

3. Réponse

Nous devons surveiller l'état de réponse du serveur, puis traiter les données obtenues du serveur en conséquence. .

1) onreadystatechange est l'un des événements JavaScript, utilisé pour surveiller l'état de XMLHttpRequest

2) readystate : état de la réponse, renvoie l'état actuel de la requête XMLHTTP

readyState Statut	Description du statut
(0) Non initialisé	Cette étape confirme si l'objet XMLHttpRequest est créé et appelle l'open () Préparez-vous à la désinitialisation. Une valeur de 0 indique que l'objet existe déjà, sinon le navigateur signalera une erreur : l'objet n'existe pas.
(1) Chargement	A ce stade, l'objet XMLHttpRequest est initialisé, c'est-à-dire l'open( ) la méthode est appelée, Complétez le paramétrage du statut de l'objet en fonction des paramètres (méthode, url, true). Et appelez la méthode send() pour commencer à envoyer des requêtes au serveur. Une valeur de 1 indique qu'une requête est envoyée au serveur.
(2) Chargement terminé	Cette étape reçoit les données de réponse du serveur. Mais ce qui est obtenu, ce ne sont que les données originales de la réponse du serveur et ne peuvent pas être utilisées directement sur le client. Une valeur de 2 indique que toutes les données de réponse ont été reçues. Et préparez-vous pour la prochaine étape de l’analyse des données.
(3) Interaction	Cette étape analyse les données de réponse reçues côté serveur. Autrement dit, selon le type MIME renvoyé par l'en-tête de réponse côté serveur, les données sont converties dans un format accessible via les attributs ResponseBody, ResponseText ou ResponseXML, afin d'être prêtes à être invoquées sur le client. Le statut 3 indique que les données sont en cours d'analyse.
(4) Terminé	Cette étape confirme que toutes les données ont été analysées dans un format utilisable par le client . Analyser déjà fait. Une valeur de 4 indique que l'analyse des données est terminée et que les données peuvent être obtenues via les attributs correspondants de l'objet XMLHttpRequest.

3) statut : code de réponse du serveur

Code de réponse commun : 200—Le serveur a renvoyé avec succès la page Web

404— La page Web demandée n'existe pas

503—Service indisponible

Pour plus de détails sur le code de réponse du serveur, veuillez consulter——Network Transport Protocol (protocole http)

I Je crois que vous avez lu cet article. Vous maîtrisez la méthode des cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Implémentation de la fonction de connexion ajax

Implémentation Ajax du chargement asynchrone

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!