내 연락처 정보
우편메소피아@프로톤메일.com
2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
AJAX의 전체 프로세스는 비동기 JS 및 XML인 비동기 JavaScript 및 XML입니다. AJAX를 통해 브라우저에서 서버에 비동기 요청을 보낼 수 있습니다. 가장 큰 장점은 새로 고치지 않고도 데이터를 얻을 수 있다는 것입니다. AJAX는 새로운 프로그래밍 언어가 아니라 기존 표준을 함께 사용하는 새로운 방식입니다.
XML 확장 가능 마크업 언어.
XML은 데이터를 전송하고 저장하도록 설계되었습니다.
XML은 HTML과 유사하지만, HTML에는 미리 정의된 태그가 없지만, 이는 모두 일부 데이터를 표시하는 데 사용되는 맞춤 태그입니다.
<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는 URL에 매개변수를 포함하는 GET 요청을 보냅니다. 먼저 물음표로 구분한 다음 직접 작성하고 &로 연결합니다.
http:127.0.0.1:8080/server?a=100&b=200&c=300
AJAX는 xhr.send()에 매개변수를 포함하는 GET 요청을 보냅니다.
//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>
해당 백엔드 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端口启动中。。。")
})
사용자 정의 요청 헤더
//自定义请求头,需要在后端设置好,否则会报错
xhr.setRequestHeader('name','hhhhhh')
해당 백엔드 설정
//可以接收任意类型的请求
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)
})
응답 본문은 문자열 또는 버퍼만 가능하므로 유형을 변환해야 합니다.
클라이언트가 받는 것은 JSON 개체로 변환할 수 있는 문자열입니다. 두 가지 방법이 있는데, 하나는 자동 변환이고 다른 하나는 수동 변환입니다.
수동 변환:
const data=JSON.parse(xhr.response)
result.innerHTML=data.name;
자동 변환:
//设置响应体数的类型
xhr.responseType='json';
result.innerHTML=xhr.response.name;