Encyclopédie d'analyse jQuery Ajax

Cette fois, je vous apporte une analyse complète de jQuery Ajax. Quelles sont les précautions lors de l'utilisation de jQuery Ajax. Voici des cas pratiques, jetons un coup d'œil.

Qu'est-ce qu'Ajax ? JavaScript

et XML asynchrones) : Traduit en chinois, c'est JavaScript et XML asynchrones.

Fonctionnellement, il s'agit d'une technologie qui permet de mettre à jour une partie d'une page Web sans recharger la page Web entière.

Page Web traditionnelle

Pour mettre à jour le contenu ou soumettre un formulaire, vous devez recharger ou actualiser la page.

Pages Web utilisant la technologie ajax

Avec une petite quantité d'échange de données via le serveur d'arrière-plan, la page Web peut réaliser une mise à jour partielle asynchrone.

Avant l'émergence d'Ajax

Avant l'émergence de la technologie Ajax, c'était un monde d'interaction synchrone.

Synchronisation : Le client envoie une requête, le serveur la traite, puis répond. Pendant cette période, le client est en état d'attente. Lorsque le serveur termine le traitement de la réponse, le client recharge la page. . Si les informations sont erronées, le client lancera à nouveau une demande et attendra ici.

Après l'émergence d'Ajax

Après l'émergence d'Ajax, le monde a changé et est devenu un monde asynchrone.

Alors pourquoi n'avons-nous pas utilisé l'asynchrone avant ? C'est parce qu'il manquait un objet, l'objet XMLHttpRequest. Avant l'apparition de cet objet, le développement Web utilisait une méthode synchrone. Après son apparition, nous avons constaté que les opérations asynchrones pouvaient être utilisées. être effectué. Cet objet est utilisé pour l'échange de données entre l'arrière-plan et le serveur, et cet échange de données ne rechargera pas la page entière. Dans ce cas, les données locales peuvent être mises à jour sans actualiser la page. Plus tard, il y a eu celui d'Ajax. chargement asynchrone et rafraîchissement partiel.

Implémentation de la fonction de rafraîchissement partiel de chargement asynchrone d'Ajax

1. La première question est de savoir comment utiliser l'objet XHR

.

1) Commencez par instancier un XMLHttpRequest

Remarque : la plupart des navigateurs prennent désormais en charge l'objet XMLHttpRequest et la nouvelle méthode, mais à l'ère d'IE6 et versions antérieures, XHR n'est encore qu'ActiveXObject

Solution :

2 ) Requête :

var request = new XMLHttpRquest();

Avant d'examiner quelle requête HTTP

est une règle permettant aux ordinateurs de communiquer via le réseau.

Var request; 
If(window.XMLHttpRequest){ 
Reuest = new XMLHttpRequest(); 
}else{ 
Request = new ActiveXObject(“Microsoft.XMLHTTP”); 
}

est un protocole sans état qui ne conserve pas les informations liées à la connexion

Le client envoie une requête au serveur, le serveur répond, puis la connexion est fermée .

Une requête HTTP complète comporte sept étapes

A. Établir une connexion TCP

B. Le client envoie la commande demandée au serveur

C. Le navigateur envoie des informations d'en-tête de requête

D. Le serveur envoie une réponse E. Le serveur envoie des informations d'en-tête de réponse

F. Le serveur envoie données au navigateur

G. Le serveur ferme la connexion TCP

En regardant séparément : la requête HTTP est divisée en quatre parties

Méthode et action de requête HTTP (get, pos)

URL (adresse de demande) demandée

En-tête de requête (contenant des informations sur l'environnement client, des informations d'authentification, etc.)

Corps de la demande, texte de la demande. Obtenir la requête

 : Généralement utilisé pour l'acquisition d'informations (méthode de requête http par défaut)

Url传参属性和值都是可见的，对所发内容大小有限制 一般在2000个字符

get请求安全的说法是因为你请求一次和请求一万次效果是一样的不会对数据造成影响。

Post请求：一般用于服务器数据修改

对所发信息没有大小限制

HTTP响应有三部分

1)一个数字和文字组成的状态吗，用来显示请求是成功还是失败

2)响应头，和请求头信息一样包含很多信息，例如服务器类型，日期时间，内容类型和长度等

3)响应体，响应正文

HTTP响应状态吗由三位数字组成，首位数字定义了状态码的类型：

1xx：信息类，表示接收到浏览器请求，正在进一步处理

2xx:成功表示用户请求被正确接受

3xx:重定向，表示没有请求成功，客户必须采取进一步的动作

4xx:客户端错误，表示客户端请求有错误404NOTFound意味着请求中所引用的文档不存在

5xx：服务器错误，表示服务器不能完成对请求的处理

通过XMLHttpRequest发送请求

1.创建

var request = new XMLHttpRquest();

2.发送请求

两个方法：

open(method,url,async),Send(string)这两种方法可以将请求发送到服务器

Request.open(get,get.php,true)
Request.Send()
Request.open(post,post.PHP,true) 
Request.Send()
Request.open(post,post.php,true) 
Request.setRequestHeader(‘Content-Type','application/x-www-form-urlencoded') 
Request.send(“name=王二狗&sex=男”);

send()中的内容是要向后台传递的参数，在get请求是通过url传递参数，所以get中send()里面的内容可以省略，post方式中不能省略，省略了之后就是无意义的请求了

setRequestHeader是用来设置请求参数的类型，form

3.获取响应

responseText:获取字符串形式的响应式数据

responseXML:

Status和statusText：以数字和文本形式返回HTTP状态吗

getAllResponseHeader():获取所有的响应报头

getResponseHeader():查询相应中的某个字段的值

在响应返回成功时得到的通知，在实际操作中要监听

readyState属性的变化，他的变化代表着服务器相应的变化

0：表示服务器请求未初始化，open还没有被调用

1：服务器连接已经建立，open已经被调用

2：请求已经被接受，接收到头部信息

3：处理中，接收到相应主体

4：请求完成，并且响应完成

Var request=new XMLHttpRequest();
Request.open(get,url,true)
Request.send();
request.onreadyState=function(){
 If(request.readeyState===4&&request.Status===200){
 做一些事情 request.responseText
 }
}

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

推荐阅读：

使用Jquery获取iframe页面中Dom元素

$.ajax()使用详解

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!