2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Der gesamte Prozess von AJAX besteht aus asynchronem JavaScript und XML, also asynchronem JS und XML. Über AJAX können Sie im Browser asynchrone Anfragen an den Server senden. Der größte Vorteil: Daten ohne Aktualisierung abrufen. AJAX ist keine neue Programmiersprache, sondern eine neue Möglichkeit, bestehende Standards gemeinsam zu nutzen.
Erweiterbare XML-Auszeichnungssprache.
XML dient der Übertragung und Speicherung von Daten.
XML ähnelt HTML. Der Unterschied besteht darin, dass es in HTML vordefinierte Tags gibt, in XML jedoch keine. Es handelt sich dabei ausschließlich um benutzerdefinierte Tags, die zum Markieren einiger Daten verwendet werden.
<student>
<name>John</name>
<age>18</age>
</student>
Es wurde jetzt durch JSON ersetzt.
{"name":"John","age":18}
1) Kann mit dem Server kommunizieren, ohne die Seite zu aktualisieren
2) Ermöglicht Ihnen, einen Teil des Seiteninhalts basierend auf Benutzerereignissen zu aktualisieren
1) Es gibt keinen Browserverlauf und Sie können nicht zurückgehen
2) Es liegt ein domänenübergreifendes Problem vor (gleicher Ursprung)
3) SEO ist nicht freundlich (Webinhalte können nicht gecrawlt werden)
HTTP-Protokoll (Hypertext Transport Protocol) [Hypertext Transfer Protocol]; das Protokoll beschreibt die Regeln für die Kommunikation zwischen dem Browser und dem World Wide Web-Server.
Der Fokus liegt auf Format und Parametern
行 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>
Notiz:
Senden Sie eine GET-Anfrage: Öffnen Sie das Netzwerk in der Seitenprüfung, aktualisieren Sie die Seite, senden Sie eine Anfrage, empfangen Sie eine Antwort und öffnen Sie die oberste Anfrage. Der Header enthält Antwortheader und Anforderungsheader sowie Abfragezeichenfolgenparameter. „Query String Parameters“ ist das Analyseergebnis des Inhalts in der angeforderten URL, „Request Headers“ ist die Anforderungszeile und der Speicherort des Anforderungsheaders, „Response Headers“ ist die Antwortzeile und der Antwortheader und „Click Response“ ist der Antworttext.
POST-Anfrage senden: Die Parameter der Abfragezeichenfolge in den Headern werden geändert.
xhr ist die Abkürzung für XMLHttpRequest und XHR im Webseiteninspektionsnetzwerk ist der Filter für AJAX-Anfragen.
AJAX sendet eine GET-Anfrage mit Parametern in der URL. Trennen Sie diese zunächst durch Fragezeichen, schreiben Sie sie dann direkt und verbinden Sie sie mit &.
http:127.0.0.1:8080/server?a=100&b=200&c=300
AJAX sendet eine GET-Anfrage mit Parametern in xhr.send()
//3.发送
xhr.send('a=100&b=200&c=300');
xhr.send('a:100&b:200&c:300');
xhr.send('1231212313');
AJAX sendet eine GET-Anfrage
<!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 sendet eine POST-Anfrage
<!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>
Entsprechender Backend 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端口启动中。。。")
})
Benutzerdefinierter Anforderungsheader
//自定义请求头，需要在后端设置好，否则会报错
xhr.setRequestHeader('name','hhhhhh')
Entsprechende Backend-Einstellungen
//可以接收任意类型的请求
app.all('/server',(req,res)=>{
//设置响应头,设置允许跨域
res.setHeader('Access-Control-Allow-Origin','*');
//响应体
res.setHeader('Access-Control-Allow-Headers','*');
//设置响应体
res.send('okkkk');
})
Zuerst wird res.setHeader('Access-Control-Allow-Headers','*'); so eingestellt, dass alle Antwortheader empfangen werden, und dann bedeutet app.all, jede Art von Anfrage zu empfangen, da Anfragen vom Optionstyp zurückgegeben werden Es kann keine Antwort erhalten werden. Ändern Sie daher die Einstellung auf „Alle empfangen“.
Der Server antwortet auf JSON-Daten
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)
})
Der Antworttext kann nur eine Zeichenfolge oder ein Puffer sein, daher muss der Typ konvertiert werden.
Was der Client erhält, ist eine Zeichenfolge, die in ein JSON-Objekt konvertiert werden kann. Es gibt zwei Möglichkeiten: eine automatische Konvertierung und die andere eine manuelle Konvertierung.
Manuelle Konvertierung:
const data=JSON.parse(xhr.response)
result.innerHTML=data.name;
Automatische Konvertierung:
//设置响应体数的类型
xhr.responseType='json';
result.innerHTML=xhr.response.name;
Er widmet sich seit mehr als 30 Jahren der Technologieforschung und beherrscht verschiedene Sprachen wie Java, Linux, Javascript, PHP, CSS usw. Er hat viele Beiträge im Open-Source-Bereich geleistet, Entwicklerdokumentationsstation, um einige Themen in der Technologieentwicklung als zukünftige Referenz zu teilen
