le mie informazioni di contatto
Posta[email protected]
2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
L'intero processo di AJAX è JavaScript asincrono e XML, che è JS e XML asincroni. Tramite AJAX è possibile inviare richieste asincrone al server nel browser. Il vantaggio più grande: ottenere i dati senza aggiornare. AJAX non è un nuovo linguaggio di programmazione, ma un nuovo modo di utilizzare insieme gli standard esistenti.
Linguaggio di markup estensibile XML.
XML è progettato per trasmettere e archiviare dati.
XML è simile a HTML. La differenza è che ci sono tag predefiniti in HTML, ma non ci sono tag predefiniti in XML. Sono tutti tag personalizzati utilizzati per contrassegnare alcuni dati.
<student>
<name>John</name>
<age>18</age>
</student>
Ora è stato sostituito da JSON.
{"name":"John","age":18}
1) Può comunicare con il server senza aggiornare la pagina
2) Permette di aggiornare parte del contenuto della pagina in base agli eventi dell'utente
1) Non c'è cronologia di navigazione e non è possibile tornare indietro
2) C'è un problema tra domini (stessa origine)
3) La SEO non è amichevole (il contenuto web non può essere scansionato)
Protocollo HTTP (protocollo di trasporto ipertestuale) [Hypertext Transfer Protocol], il protocollo descrive in dettaglio le regole per la comunicazione tra il browser e il server World Wide Web.
L'attenzione è rivolta al formato e ai parametri
行 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>
Nota:
Invia una richiesta GET: apri la rete nel controllo della pagina, aggiorna la pagina, invia una richiesta, ricevi una risposta e apri la richiesta principale. Nell'intestazione sono presenti intestazioni di risposta e intestazioni di richiesta, nonché parametri di stringa di query. Parametri stringa di query è il risultato dell'analisi del contenuto nell'URL richiesto, Intestazioni richiesta è la riga di richiesta e la posizione dell'intestazione della richiesta, Intestazioni di risposta è la riga di risposta e l'intestazione della risposta e Risposta clic è il corpo della risposta.
Invia richiesta POST: i parametri della stringa di query nelle intestazioni cambieranno in altri.
xhr è l'acronimo di XMLHttpRequest e XHR nella rete di ispezione delle pagine Web è il filtro per le richieste AJAX.
AJAX invia una richiesta GET che trasporta i parametri nell'URL. Prima separali con punti interrogativi, quindi scrivili direttamente e collegali con &.
http:127.0.0.1:8080/server?a=100&b=200&c=300
AJAX invia una richiesta GET che trasporta i parametri in xhr.send()
//3.发送
xhr.send('a=100&b=200&c=300');
xhr.send('a:100&b:200&c:300');
xhr.send('1231212313');
AJAX invia la richiesta 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 invia una richiesta 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>
Backend corrispondente server.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端口启动中。。。")
})
Intestazione della richiesta personalizzata
//自定义请求头，需要在后端设置好，否则会报错
xhr.setRequestHeader('name','hhhhhh')
Impostazioni di backend corrispondenti
//可以接收任意类型的请求
app.all('/server',(req,res)=>{
//设置响应头,设置允许跨域
res.setHeader('Access-Control-Allow-Origin','*');
//响应体
res.setHeader('Access-Control-Allow-Headers','*');
//设置响应体
res.send('okkkk');
})
Innanzitutto, res.setHeader('Access-Control-Allow-Headers','*'); è impostato per ricevere tutte le intestazioni di risposta, quindi app.all significa ricevere qualsiasi tipo di richiesta, poiché le richieste di tipo opzioni verranno restituite e non è possibile ottenere alcuna risposta, quindi modificalo in tutti per ricevere.
Il server risponde ai dati 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)
})
Il corpo della risposta può essere solo una stringa o un buffer, quindi il tipo deve essere convertito.
Ciò che il client riceve è una stringa che può essere convertita in un oggetto JSON. Esistono due modi, uno è la conversione automatica e l'altro è la conversione manuale.
Conversione manuale:
const data=JSON.parse(xhr.response)
result.innerHTML=data.name;
Conversione automatica:
//设置响应体数的类型
xhr.responseType='json';
result.innerHTML=xhr.response.name;
Si dedica alla ricerca tecnologica da più di 30 anni ed è esperto in vari linguaggi come Java, Linux, Javascript, php, css, ecc. Ha dato numerosi contributi nel campo dell'open source stazione di documentazione per gli sviluppatori per condividere alcuni problemi nello sviluppo della tecnologia per riferimento futuro
Posta[email protected]