Dans cet article nous partagerons avec vous les bases d'AJAX, PHP et AJAX, le format JSON et AJAX dans jQuery. J'espère que cet article pourra vous aider.
1. Les bases d'AJAX
(1) AJAX (Asynchronous JavaScript and XML) : abréviation de javascript et xml asynchrones.
(2) AJAX n'est pas un langage de programmation, mais une technologie qui permet de mettre à jour une partie d'une page Web sans charger la page entière.
(3) Inconvénients des pages Web traditionnelles : Si vous devez mettre à jour le contenu ou soumettre un formulaire, vous devez recharger la page entière. Avantages de l'utilisation d'AJAX : En échangeant une petite quantité de données avec le serveur dans l'arrière-plan, la page Web peut réaliser des mises à jour partielles asynchrones. Il offre une très bonne expérience utilisateur pour remplir des formulaires complexes.
(4) Synchronisation AJAX et asynchronisme : la synchronisation signifie simplement charger la page entière de manière asynchrone ; Plus précisément, la connexion entre le client et le serveur. Avant l’avènement de la technologie Ajax, les données étaient échangées de manière synchrone, ce qui serait très gênant si vous remplissiez des formulaires plus complexes. Avec l'objet XMLHttpRequest, le monde synchrone devient un monde asynchrone. Les données peuvent être échangées avec le serveur via l'objet XMLHttpRequest en arrière-plan.
(5) Création d'objet XMLHttpRequest : var requerst=new XMLHttpRequest(); Instanciez simplement l'objet directement Remarque : IE5 et IE6 ne prennent pas en charge cette définition. Si vous souhaitez obtenir la compatibilité des pages du navigateur, le code suivant s'affiche :
var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest(); // IE7+,Firefox,Chrome,Opera,Safari...
}else{
request = new ActiveObject("Microsoft.XMLHTTP"); // IE6,IE5
}Copier après la connexion
(6) Requête HTTP : http est un protocole sans état : pour parler franchement, c'est un protocole qui ne peut pas établir de connexions persistantes et n'a pas de mémoire. En outre : réalisez le débogage des pages Web grâce au processus de demande et de réponse de page.
(6.1) Un processus de requête HTTP complet comporte généralement les 7 étapes suivantes :
- Établissement d'une connexion TCP
- Le Web Le navigateur envoie une commande de requête au serveur Web
- Le navigateur Web envoie les informations d'en-tête de requête
- Le serveur Web répond
- Le serveur Web envoie des informations d'en-tête de réponse
- Le serveur Web envoie des données au navigateur
- Le serveur Web ferme la connexion TCP
(6.2) La requête http se compose généralement de quatre parties :
- Méthode ou action de requête HTTP, telle qu'une requête GET ou POST
- L'URL demandée doit connaître l'adresse demandée
- L'en-tête de la demande contient des informations sur l'environnement client, des informations d'authentification, etc.
- Corps de la demande, qui est le corps de la demande. Le corps de la demande peut inclure les informations de paiement de la requête, les informations du formulaire, etc. soumises par le client
(6.3 )GET et POST[Collectez la valeur du nom du formulaire avec method="post/get"]
Pour parler franchement, ils collectent tous la valeur transmise depuis le formulaire. Les valeurs transmises, l'une est affichée sous forme d'url (dangereuse), et l'autre est affichée sous forme de valeur (sûre) ; GET est généralement utilisé pour obtenir des informations, utilisez
url pour passer des paramètres , limité à 2000 caractères, visible par tous, non sécurisé. POST est généralement utilisé pour envoyer des données depuis un formulaire Les paramètres sont dans le corps de la requête http et il n'y a pas de limite sur le nombre de messages envoyés.
(6.4)La réponse HTTP se compose généralement de trois parties :
- Un code d'état composé d'un numéro et d'un texte, utilisé pour indiquer si la demande a réussi ou échoué ;
- En-tête de réponse, comprenant le type de serveur, la date et l'heure, le type et la longueur du contenu, etc.
- Corps de la réponse, qui est la réponse corps.
(6.5)Le code d'état HTTP se compose de trois chiffres, où le premier chiffre définit le type de code d'état :
- 1XX : Type d'information , indiquant que la demande du navigateur Web a été reçue et est en cours de traitement
- 2XX : Succès, indiquant que la demande de l'utilisateur a été reçue, comprise et traitée correctement, par exemple : 200 ; OK
- 3XX : Redirection, indiquant que la demande a échoué et que le client doit prendre des mesures supplémentaires
- 4XX : Erreur du client, indiquant que le la demande soumise par le client comporte une erreur, telle que 404 NOT FOUND, signifie que le document référencé dans la demande n'existe pas.
- 5XX : Erreur du serveur, indiquant que le serveur ne peut pas terminer le traitement de la requête.
(7)XMLHttpRequest envoie une requête : (méthode objet)
Par exemple :
request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置http的头信息,告诉web服务器要发送一个表单;注意：setRequest请求一定要放在open和send之间，否则会抛出异常
request.send("name=王大锤&sex=男");Copier après la connexion
(8)XMLHttpRequest obtient la réponse : (méthodes et propriétés de l'objet)
Attribut readyState : soyez averti lorsque la réponse est renvoyée avec succès.
0：请求未初始化，open还没有调用。
1：服务器连接已建立，open已经调用了。
2：请求已经接收，也就是接收到头信息了。
3：请求处理中，也就是接收到响应主体了。
4：请求已完成，且响应已就绪，也就是响应完成了。
举个栗子:涵盖了ajax的大部分内容(典型的xhr建立ajax的过程)
var request = new XMLHttpRequest();//创建XHR对象
request.open("GET","get.php",true);//调用异步请求
request.send();//发送异步请求
//对事件进行监听,判断服务器是否正确得做出了响应
request.onreadystatechange = function(){
if(request.readyState===4 && request.status === 200){
request.reponseText;//接收服务器响应回送的数据
}
}Copier après la connexion
2.PHP与AJAX
实战:[服务器端与客户端]实现查询员工和新建员工的后台接口
(1)客户端部分代码:
//新建员工客户端代码
document.getElementById("save").onclick=function(){
var request=new XMLHttpRequest();//创建XHR对象
request.open("POST","action.php");//调用异步请求
//data拼接的URL
//document.getElementById("staffName").value获取表单中用户写入的值
var data = "username=" + document.getElementById("staffName").value
+ "&num=" + document.getElementById("staffNumber").value
+ "&workname=" + document.getElementById("staffJob").value;
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置http的头信息
request.send(data);//发送异步请求
//对事件进行监听,判断服务器是否能正确做出响应
request.onreadystatechange=function(){
if(request.readyState===4){
if(request.status===200){
//innerHTML不仅可以读取元素内容,还可以将内容写入元素
//ajax引擎对象通过responseText属性或者responseXML属性接收服务器回送的数据，然后在静态页面中对其进行处理，使页面达到局部刷新的效果
document.getElementById("createResult").innerHTML=request.responseText;
}else{
alter("发生错误:"+request.status);
}
}
}
}Copier après la connexion
(2)服务器端部分代码:
//查询员工服务器端代码
<?php
header('Content-type:text/html;charset=utf8');
$con=mysqli_connect("127.0.0.1","","");
mysqli_select_db($con,"function");
$sql="SELECT * FROM `ajax`";
$query=mysqli_query($con,$sql);
//数据库数据的总条数$number
$number=mysqli_num_rows($query);
for($i=0;$i<$number;$i++){
//将每条数据转换成关联数组打印出来
$arr=mysqli_fetch_row($query);
//print_r($arr);
//echo $arr[2];die;
if($_GET['num']==$arr[2]){
echo "找到员工:编号$arr[2],姓名:$arr[1],职位:$arr[3]";
break;
}
}
?>Copier après la connexion
3.JSON格式
(1)json:javascript对象表示法。
(2)json是存储和交换文本信息的语法，类似xml。采用键值对的方式组织，易于人们阅读与机器解析。
(3)json是独立于语言的，不管什么语言都可以解析json，只要按json的规则来就行。
(4)json的长度比xml小;json读写的速度更快;json可以使用js内建方法直接解析，转化成js对象，非常方便。
(5)json语法规则：json数据的书写格式是：名称/值对。
名称/值对组合中的名称写在前面（在双引号中），值对写在后面（同样在双引号中），中间用冒号隔开，比如"name":"王大锤"。注意：json与javaScript对象表示法不同，javaScript对象表示法的键值不需要用引号，但是json的键值要用引号。
注意：json可以是整型、浮点型、字符串(在双引号中)、布尔值(true或false)、数组(在方括号中)、对象(在花括号中)、null等数据类型。
举个栗子：
{//定义了一个json对象
"staff":[//定义了一个数组
{"name":"王大锤","age":21},//定义了一个name对象
{"name":"叫兽","age":35}
]
}Copier après la connexion
(6)json解析：eval()和JSON.parse()两种方式解析成JSON形式
两种方法比较：建议使用JSON.parse()方法解析成JSON形式
eval();不安全，如果json中有函数或js程序代码（alert或一个window.location.href()跳转链接病毒网站等），会优先执行代码，危险操作。JSON.parse();对json文件具有校验功能，如果json文件里面有程序脚本，会解析报错。
举个栗子：
var jsondata='{
"staff":[{
"name":"王大锤",
"age":22
},
{
"name":"叫兽",
"age":23
},
{
"name":"王尼玛",
"age":24
}
]
}';
var jsonobj=JSON.parse(jsondata);//JSON.parse解析JSON
var jsonobj=eval('(' + jsondata + ')');//eval解析JSON
alert(jsonobj.staff[0].name);Copier après la connexion
注意：上面书写是错误的，只为了看清楚。逗号不是分隔符，逗号是文本内容，所有的都应该紧凑写，不能自己为了看清楚，人为用空格分开。(这里找了一个小时错误...)
(7)json验证工具：JSONLint
(8)举个栗子:
使用json,首先需要服务器端的约定,
用此种方法能够减少更多的判断,以更加优雅的形式显示
{
//前端规则验证、后端数据验证
"success":true,//是否正确执行(表单等规则验证)
"msg":"×××"//请求的响应值是否成功(http响应返回的信息)
}Copier après la connexion
服务器端部分代码:
//echo "参数错误，员工信息填写不全";
echo '{"success":false,"msg":"参数错误，员工信息填写不全"}';
if($query){
//echo "员工：" . $_POST["username"] . " 信息保存成功！";
echo '{"success":true,"msg":"员工保存成功"}';
}else{
//echo "员工：" . $_POST["username"] . " 信息保存失败！";
echo '{"success":false,"msg":"员工保存失败"}';
}Copier après la connexion
客户端json代码:其它不变,将服务器端响应传过来的responseText(文本形式)转换为(JSON形式),将json字符串转化为了一个json对象data,然后就能够以对象的形式处理数据
request.onreadystatechange=function(){
if(request.readyState===4){
if(request.status===200){
//将服务器端响应传过来的responseText(文本形式)转换为(JSON形式)
//将json字符串转化为了一个json对象data
var data=JSON.parse(request.responseText);
if(data.success){
document.getElementById("createResult").innerHTML=data.msg;
}else{
document.getElementById("createResult").innerHTML="出现错误"+data.msg;
}
}
}
}Copier après la connexion
4.jQuery中的AJAX
(1)使用jquery实现ajax请求：作用：避免兼容问题，代码简洁，操作快捷方便。
(2)语法:jQuery.ajax([settings])
type：类型，“POST”或“GET”，默认为“GET”。
url：发送请求的地址。
data：是一个对象，连同请求发送到服务器的数据。
dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息来智能判断，一般我们采用json格式，可以设置为“json”。
success：是一个方法，请求成功后的毁掉函数。传入返回后的数据，以及包含成功代码的字符串。
error：是一个方法，请求失败时调用此函数。传入XMLHttpRequest对象。
相关推荐：
PHP与Ajax调用
php与ajax实现页面自动刷新
PHP与Ajax相结合实现登录验证小Demo_PHP
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
