2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
L'ensemble du processus d'AJAX est JavaScript et XML asynchrones, qui sont du JS et du XML asynchrones. Grâce à AJAX, vous pouvez envoyer des requêtes asynchrones au serveur dans le navigateur. Le plus gros avantage : obtenir des données sans actualisation. AJAX n'est pas un nouveau langage de programmation, mais une nouvelle façon d'utiliser ensemble les normes existantes.
Langage de balisage extensible XML.
XML est conçu pour transmettre et stocker des données.
XML est similaire à HTML. La différence est qu'il existe des balises prédéfinies en HTML, mais il n'y a pas de balises prédéfinies en XML. Ce sont toutes des balises personnalisées utilisées pour marquer certaines données.
<student>
<name>John</name>
<age>18</age>
</student>
Il a désormais été remplacé par JSON.
{"name":"John","age":18}
1) Peut communiquer avec le serveur sans actualiser la page
2) Vous permet de mettre à jour une partie du contenu de la page en fonction des événements utilisateur
1) Il n'y a pas d'historique de navigation et vous ne pouvez pas revenir en arrière
2) Il y a un problème cross-domaine (même origine)
3) Le référencement n’est pas convivial (le contenu Web ne peut pas être exploré)
Protocole HTTP (Hypertext Transport Protocol) [Hypertext Transfer Protocol], le protocole détaille les règles de communication entre le navigateur et le serveur World Wide Web.
L'accent est mis sur le format et les paramètres
行 GET /s?ie=utf-8 HTTP/1.1
头 Host: atguigu.com
Cookie: name=guigu
Content-type: application/x-www-form-urlencoded
user-Agent: chrome 83
空行
体 username=admin&password=admin
行 HTTP/1.1 200 OK
头 Content-Type: text/html;charset=utf-8
Content-length: 2048
Content-encoding: gzip
空行
体 <html>
<head>
</head>
<body>
<h1>HHHHello</h1>
</body>
</html>
Note:
Envoyer une requête GET : ouvrez le réseau dans la vérification de la page, actualisez la page, envoyez une requête, recevez une réponse et ouvrez la requête supérieure. Il y a des en-têtes de réponse et des en-têtes de requête dans l'en-tête, ainsi que des paramètres de chaîne de requête. Les paramètres de chaîne de requête sont le résultat de l'analyse du contenu de l'URL demandée, les en-têtes de demande sont la ligne de demande et l'emplacement de l'en-tête de demande, les en-têtes de réponse sont la ligne de réponse et l'en-tête de réponse, et le clic sur Réponse est le corps de la réponse.
Envoyer une requête POST : les paramètres de chaîne de requête dans les en-têtes seront remplacés par d'autres.
xhr est l'acronyme de XMLHttpRequest, et XHR dans le réseau d'inspection de pages Web est le filtre pour les requêtes AJAX.
AJAX envoie une requête GET portant des paramètres dans l'url. Séparez-les d'abord par des points d'interrogation, puis écrivez-les directement et connectez-les avec &.
http:127.0.0.1:8080/server?a=100&b=200&c=300
AJAX envoie une requête GET portant des paramètres dans xhr.send()
//3.发送
xhr.send('a=100&b=200&c=300');
xhr.send('a:100&b:200&c:300');
xhr.send('1231212313');
AJAX envoie une requête GET
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX GET 请求</title>
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px #90b;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
//获取button元素
const btn=document.getElementsByTagName('button')[0];
const result=document.getElementById('result')
//绑定事件
btn.onclick=function(){
//1.创建对象
const xhr=new XMLHttpRequest();
//2.初始化 设置请求方法和url
xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200');
//3.发送
xhr.send();
//4.事件绑定 处理服务端返回的结果
//on when 当...时候
//readystate是xhr对象中的属性，表示状态0,1,2,3,4
//change 改变
xhr.onreadystatechange=function(){
//判断（服务端返回了所有的结果）
if(xhr.readyState===4){
//判断响应状态码 200 404 403 401 500
//2xx 都是成功
if(xhr.status >= 200 && xhr.status<300){
//处理结果 行 头 空行 体
//1.响应行
// console.log(xhr.status);//状态码
// console.log(xhr.statusText);//状态字符串
// console.log(xhr.getAllResponseHeaders());//所有响应头
// console.log(xhr.response);//响应体
result.innerHTML=xhr.response
}else{
}
}
}
}
</script>
</body>
</html>
AJAX envoie une requête POST
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX POST 请求</title>
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px #903;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
//获取元素对象
const result=document.getElementById("result");
//绑定事件
result.addEventListener("mouseover",function(){
//1.创建对象
const xhr=new XMLHttpRequest()
//2.初始化 设置类型与URL
xhr.open('POST','http://127.0.0.1:8000/server');
//3.发送
xhr.send('a=100&b=200&c=300');
//4.事件绑定
xhr.onreadystatechange=function(){
//判断
if(xhr.readyState===4){
if(xhr.status>=200&&xhr.status<300){
//处理服务端返回的结果
result.innerHTML=xhr.response;
}
}
}
})
</script>
</body>
</html>
Serveur backend correspondant.js
const express=require('express')
//创建应用对象
const app=express()
//创建路由规则
//req是对请求报文的封装
//res是对响应报文的封装
app.get('/server',(req,res)=>{
//设置响应头,设置允许跨域
res.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
res.send('ok');
})
app.post('/server',(req,res)=>{
//设置响应头,设置允许跨域
res.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
res.send('okkkk');
})
//监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动，8000端口启动中。。。")
})
En-tête de demande personnalisé
//自定义请求头，需要在后端设置好，否则会报错
xhr.setRequestHeader('name','hhhhhh')
Paramètres backend correspondants
//可以接收任意类型的请求
app.all('/server',(req,res)=>{
//设置响应头,设置允许跨域
res.setHeader('Access-Control-Allow-Origin','*');
//响应体
res.setHeader('Access-Control-Allow-Headers','*');
//设置响应体
res.send('okkkk');
})
Tout d'abord, res.setHeader('Access-Control-Allow-Headers','*'); est configuré pour recevoir tous les en-têtes de réponse, puis app.all signifie recevoir tout type de requête, car les requêtes de type options seront renvoyées et aucune réponse ne peut être obtenue, alors remplacez-la par all to recevoir.
Le serveur répond aux données JSON
app.all('/json-server',(req,res)=>{
//设置响应头,设置允许跨域
res.setHeader('Access-Control-Allow-Origin','*');
//响应头
res.setHeader('Access-Control-Allow-Headers','*');
//响应一个数据
const data={
name:'hoshi'
};
//对对象进行字符串转换
let str=JSON.stringify(data);
//设置响应体
res.send(str)
})
Le corps de la réponse ne peut être qu'une chaîne ou un tampon, le type doit donc être converti.
Ce que le client reçoit est une chaîne qui peut être convertie en objet JSON. Il existe deux manières : l'une est la conversion automatique et l'autre est la conversion manuelle.
Conversion manuelle :
const data=JSON.parse(xhr.response)
result.innerHTML=data.name;
Conversion automatique :
//设置响应体数的类型
xhr.responseType='json';
result.innerHTML=xhr.response.name;
Il se consacre à la recherche technologique depuis plus de 30 ans et maîtrise divers langages tels que java, linux, javascript, php, css, etc. Il a apporté de nombreuses contributions dans le domaine de l'open source. station de documentation pour les développeurs pour partager certains problèmes de développement technologique pour référence future.
