τα στοιχεία επικοινωνίας μου
Ταχυδρομείο[email protected]
2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Η όλη διαδικασία του AJAX είναι Asynchronous JavaScript And XML, η οποία είναι ασύγχρονη JS και XML. Μέσω του AJAX, μπορείτε να στείλετε ασύγχρονα αιτήματα στον διακομιστή του προγράμματος περιήγησης Το μεγαλύτερο πλεονέκτημα: λήψη δεδομένων χωρίς ανανέωση. Το AJAX δεν είναι μια νέα γλώσσα προγραμματισμού, αλλά ένας νέος τρόπος χρήσης των υπαρχόντων προτύπων μαζί.
Επεκτάσιμη γλώσσα σήμανσης XML.
Η XML έχει σχεδιαστεί για τη μετάδοση και αποθήκευση δεδομένων.
Η XML είναι παρόμοια με την HTML Η διαφορά είναι ότι υπάρχουν προκαθορισμένες ετικέτες στην HTML, αλλά δεν υπάρχουν προκαθορισμένες ετικέτες στο XML.
<student>
<name>John</name>
<age>18</age>
</student>
Τώρα έχει αντικατασταθεί από JSON.
{"name":"John","age":18}
1) Μπορεί να επικοινωνήσει με τον διακομιστή χωρίς ανανέωση της σελίδας
2) Σας επιτρέπει να ενημερώνετε μέρος του περιεχομένου της σελίδας βάσει συμβάντων χρήστη
1) Δεν υπάρχει ιστορικό περιήγησης και δεν είναι δυνατή η επιστροφή
2) Υπάρχει πρόβλημα μεταξύ τομέων (ίδια προέλευση)
3) Το SEO δεν είναι φιλικό (το περιεχόμενο ιστού δεν μπορεί να ανιχνευτεί)
Πρωτόκολλο HTTP (πρωτόκολλο μεταφοράς υπερκειμένου) [Hypertext Transfer Protocol], το πρωτόκολλο περιγράφει λεπτομερώς τους κανόνες επικοινωνίας μεταξύ του προγράμματος περιήγησης και του διακομιστή World Wide Web.
Η εστίαση είναι στη μορφή και τις παραμέτρους
行 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>
Σημείωση:
Αποστολή αιτήματος GET: Ανοίξτε το δίκτυο στον έλεγχο σελίδας, ανανεώστε τη σελίδα, στείλτε ένα αίτημα, λάβετε απάντηση και ανοίξτε το επάνω αίτημα. Υπάρχουν κεφαλίδες απόκρισης και κεφαλίδες αιτήματος στην κεφαλίδα, καθώς και παράμετροι συμβολοσειράς ερωτήματος. Οι παράμετροι συμβολοσειράς ερωτήματος είναι το αποτέλεσμα ανάλυσης του περιεχομένου στη διεύθυνση URL που ζητήθηκε, οι κεφαλίδες αιτήματος είναι η γραμμή αιτήματος και η θέση της κεφαλίδας αιτήματος, οι κεφαλίδες απάντησης είναι η γραμμή απόκρισης και η κεφαλίδα απόκρισης και κάντε κλικ στην επιλογή Απόκριση είναι το σώμα απάντησης.
Αποστολή αιτήματος POST: Οι παράμετροι συμβολοσειράς ερωτήματος στις κεφαλίδες θα αλλάξουν σε άλλες.
Το xhr είναι το ακρωνύμιο του XMLHttpRequest και το XHR στο δίκτυο επιθεώρησης ιστοσελίδων είναι το φίλτρο για αιτήματα AJAX.
Το AJAX στέλνει ένα αίτημα GET που φέρει παραμέτρους στο url Πρώτα διαχωρίστε τα με ερωτηματικά, μετά γράψτε τα απευθείας και συνδέστε τα με το &.
http:127.0.0.1:8080/server?a=100&b=200&c=300
Το AJAX στέλνει ένα αίτημα GET που φέρει παραμέτρους σε xhr.send()
//3.发送
xhr.send('a=100&b=200&c=300');
xhr.send('a:100&b:200&c:300');
xhr.send('1231212313');
Το AJAX στέλνει αίτημα 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 στέλνει αίτημα 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>
Αντίστοιχος διακομιστής υποστήριξης.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端口启动中。。。")
})
Προσαρμοσμένη κεφαλίδα αιτήματος
//自定义请求头，需要在后端设置好，否则会报错
xhr.setRequestHeader('name','hhhhhh')
Αντίστοιχες ρυθμίσεις backend
//可以接收任意类型的请求
app.all('/server',(req,res)=>{
//设置响应头,设置允许跨域
res.setHeader('Access-Control-Allow-Origin','*');
//响应体
res.setHeader('Access-Control-Allow-Headers','*');
//设置响应体
res.send('okkkk');
})
Πρώτα, το res.setHeader('Access-Control-Allow-Headers','*' έχει ρυθμιστεί να λαμβάνει όλες τις κεφαλίδες απόκρισης και, στη συνέχεια, το app.all σημαίνει λήψη οποιουδήποτε τύπου αιτήματος, επειδή τα αιτήματα τύπου επιλογών θα επιστραφούν και). δεν μπορεί να ληφθεί καμία απάντηση, οπότε αλλάξτε την σε όλα για λήψη.
Ο διακομιστής ανταποκρίνεται στα δεδομένα 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)
})
Το σώμα απόκρισης μπορεί να είναι μόνο συμβολοσειρά ή buffer, επομένως ο τύπος πρέπει να μετατραπεί.
Αυτό που λαμβάνει ο πελάτης είναι μια συμβολοσειρά, η οποία μπορεί να μετατραπεί σε αντικείμενο JSON Υπάρχουν δύο τρόποι, ο ένας είναι η αυτόματη μετατροπή και ο άλλος η μη αυτόματη μετατροπή.
Μη αυτόματη μετατροπή:
const data=JSON.parse(xhr.response)
result.innerHTML=data.name;
Αυτόματη μετατροπή:
//设置响应体数的类型
xhr.responseType='json';
result.innerHTML=xhr.response.name;
Έχει αφοσιωθεί στην έρευνα της τεχνολογίας για περισσότερα από 30 χρόνια και είναι ικανός σε διάφορες γλώσσες όπως java, linux, javascript, php, css κ.λπ. Έχει κάνει πολλές συνεισφορές στον τομέα του ανοιχτού κώδικα σταθμός τεκμηρίωσης προγραμματιστή για να μοιραστείτε ορισμένα ζητήματα στην ανάπτυξη τεχνολογίας για μελλοντική αναφορά
Ταχυδρομείο[email protected]