2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Koko AJAX-prosessi on Asynchronous JavaScript and XML, joka on asynkroninen JS ja XML. AJAX:n kautta voit lähettää asynkronisia pyyntöjä selaimen palvelimelle. Suurin etu: tietojen hankkiminen ilman päivitystä. AJAX ei ole uusi ohjelmointikieli, vaan uusi tapa käyttää olemassa olevia standardeja yhdessä.
XML-laajennettava merkintäkieli.
XML on suunniteltu siirtämään ja tallentamaan tietoja.
XML on samanlainen kuin HTML. Erona on, että HTML:ssä on ennalta määritettyjä tunnisteita, mutta ne ovat kaikki mukautettuja tunnisteita, joita käytetään joidenkin tietojen merkitsemiseen.
<student>
<name>John</name>
<age>18</age>
</student>
Se on nyt korvattu JSONilla.
{"name":"John","age":18}
1) Pystyy kommunikoimaan palvelimen kanssa päivittämättä sivua
2) Voit päivittää osan sivun sisällöstä käyttäjien tapahtumien perusteella
1) Selaushistoriaa ei ole, eikä takaisin voi palata
2) Verkkotunnusten välinen ongelma (sama alkuperä)
3) SEO ei ole ystävällistä (verkkosisältöä ei voi indeksoida)
HTTP (Hypertext Transport Protocol) -protokolla [Hypertext Transfer Protocol], protokolla yksityiskohtaisesti selaimen ja World Wide Web -palvelimen välistä viestintää koskevat säännöt.
Painopiste on formaatissa ja parametreissa
行 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>
Huomautus:
Lähetä GET-pyyntö: Avaa verkko sivutarkistuksessa, päivitä sivu, lähetä pyyntö, vastaanota vastaus ja avaa ylempi pyyntö. Query String Parameters on pyydetyn URL-osoitteen sisällön jäsennystulos, Request Headers on pyyntörivi ja pyynnön otsikon sijainti, Response Headers on vastausrivi ja vastauksen otsikko, ja napsauta Response on vastauksen runko.
Lähetä POST-pyyntö: Otsikoiden kyselymerkkijonoparametrit muuttuvat muihin.
xhr on lyhenne sanoista XMLHttpRequest, ja XHR verkkosivujen tarkistusverkossa on AJAX-pyyntöjen suodatin.
AJAX lähettää GET-pyynnön, joka sisältää parametrit URL-osoitteessa. Erottele ne ensin kysymysmerkeillä, kirjoita ne sitten suoraan ja yhdistä ne &:llä.
http:127.0.0.1:8080/server?a=100&b=200&c=300
AJAX lähettää GET-pyynnön, joka sisältää parametrit muodossa xhr.send()
//3.发送
xhr.send('a=100&b=200&c=300');
xhr.send('a:100&b:200&c:300');
xhr.send('1231212313');
AJAX lähettää GET-pyynnön
<!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 lähettää POST-pyynnön
<!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>
Vastaava taustapalvelin.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端口启动中。。。")
})
Muokattu pyynnön otsikko
//自定义请求头，需要在后端设置好，否则会报错
xhr.setRequestHeader('name','hhhhhh')
Vastaavat tausta-asetukset
//可以接收任意类型的请求
app.all('/server',(req,res)=>{
//设置响应头,设置允许跨域
res.setHeader('Access-Control-Allow-Origin','*');
//响应体
res.setHeader('Access-Control-Allow-Headers','*');
//设置响应体
res.send('okkkk');
})
Ensin res.setHeader('Access-Control-Allow-Headers','*') on asetettu vastaanottamaan kaikki vastausotsikot, ja sitten app.all tarkoittaa minkä tahansa tyyppisten pyyntöjen vastaanottamista, koska vaihtoehtotyyppiset pyynnöt palautetaan ja vastausta ei saada, joten muuta se vastaanottaaksesi.
Palvelin vastaa JSON-tietoihin
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)
})
Vastauksen runko voi olla vain merkkijono tai puskuri, joten tyyppi on muutettava.
Asiakas vastaanottaa merkkijonon, joka voidaan muuntaa JSON-objektiksi. On olemassa kaksi tapaa, toinen on automaattinen muunnos ja toinen manuaalinen muunnos.
Manuaalinen muunnos:
const data=JSON.parse(xhr.response)
result.innerHTML=data.name;
Automaattinen muunnos:
//设置响应体数的类型
xhr.responseType='json';
result.innerHTML=xhr.response.name;
Hän on omistautunut teknologian tutkimukselle yli 30 vuoden ajan ja hallitsee useita kieliä, kuten java, linux, javascript, php, css jne. Hän on tehnyt paljon työtä avoimen lähdekoodin alalla Kehittäjän dokumentaatioasema, jossa voit jakaa joitakin teknologian kehittämisen ongelmia myöhempää käyttöä varten
