2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Totus processus AJAX est Asynchronous JavaScript And XML, qui est asynchronus JS et XML. Per AJAX, petitiones asynchronas servo in navigatro mittere potes. AJAX non est nova lingua programmandi, sed novus modus utendi simul exstantibus signis.
XML notae extensae linguae.
XML destinatum est transmittere et reponunt data.
XML similis est HTML. Differentia est quod praedefinitae sunt tags in HTML, sed nullae sunt praefinitae tags in XML.
<student>
<name>John</name>
<age>18</age>
</student>
Hoc nunc substitutum est apud JSON.
{"name":"John","age":18}
1) Communicare cum servo sine pagina refrigerio potest
II) Permittit te ut update pars paginae contenta in user eventus fundatur
1) Nulla historia pasco ac redire non potest
II) Est quaestio crucis-domain (eadem origine)
3) SEO amica non est (contentus telae non repit)
HTTP (hypertext transport protocollum) protocollum [Hypertext Transfer Protocol], protocollum normae communicandi inter navigatrum et server Telae Mundanae.
Focus in forma et 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:
Petitionem GET mitte: Aperi retiaculum in pagina perscriptio, refice paginam, petitionem mitte, responsionem accipias, petitionem summo aperi. Sunt Responsa capitis et capitis petendi in capite, sicut etiam in chorda Query Parametri. Query Parametri filum est effectus parsing contenti in URL rogatae, Petitio capitis est linea petitionis et locus petitionis capitis, Responsio capitis responsio est linea responsionis caput, et click Responsio est corpus responsionis.
Post petitionem mitte: Query chorda parametri in capitis capitis mutabis aliis.
XHR est acronym pro XMLHttpRequest, et XHR in inspectione retis paginae colum pro petitionibus AJAX est.
AJAX petitionem GET parametri in domicilio emittit.
http:127.0.0.1:8080/server?a=100&b=200&c=300
AJAX GET petitionem parametri mittit in xhr.send ()
//3.发送
xhr.send('a=100&b=200&c=300');
xhr.send('a:100&b:200&c:300');
xhr.send('1231212313');
Aiax mittit petitionem 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 misit Post petitionem
<!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>
Respondentem 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端口启动中。。。")
})
Custom petitionem header
//自定义请求头，需要在后端设置好，否则会报错
xhr.setRequestHeader('name','hhhhhh')
Respondentem backend occasus
//可以接收任意类型的请求
app.all('/server',(req,res)=>{
//设置响应头,设置允许跨域
res.setHeader('Access-Control-Allow-Origin','*');
//响应体
res.setHeader('Access-Control-Allow-Headers','*');
//设置响应体
res.send('okkkk');
})
Primum, res.setHeader('Access-Control-Permitte-Headers',''); nihil obtineri potest responsio, ita mutata omnibus ad recipiendum.
Servo respondet JSON data
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)
})
Responsum corpus non potest esse nisi chorda vel quiddam, ergo genus converti debet.
Quod client chorda accipit, quae in JSON converti potest. Dupliciter est una conversio latae, altera manualis conversio.
Conversio manualis:
const data=JSON.parse(xhr.response)
result.innerHTML=data.name;
Conversio automatica:
//设置响应体数的类型
xhr.responseType='json';
result.innerHTML=xhr.response.name;
technologiae technologiae plus quam 30 annos operam dedit et in variis linguis proficit ut java, linux, javascript, php, css, etc. Multas contributiones in aperto fonte campo fecit elit documentorum statione ad communicandas quaestiones in technologia progressus ad futuram referentiam
