课程来自B站尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版(ajax最新版).
代码来自课程
一、简介
1、AJAX简介
AJAX 全称为 Asynchronous JavaScript And XML,就是异步的 JavaScript 和 XML。
通过 AJAX 可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
2、XML简介
XML是一个可拓展标记的语言
XML被用来传输和储存数据
XML和HTML类似,不同的是HTML中的都是预定义标签,而XML中没有预定义标签,全都是自定义标签
比如有一个学生数据: name = “张三”; age = “18”; sex = “男”
用XML表示:
<student>
<name>张三</name>
<age>18</age>
<sex>男</sex>
</student>
XML现在已经被JSON取代了
{
"name": "张三",
"age": "18",
"sex" "男"
}
3、AJAX的特点
Ajax的优点
-
可以无需刷新页面而与服务器端进行通信
-
允许你根据用户事件来更新部分页面内容
Ajax的缺点
- 没有浏览历史,不能回退
- 存在跨域问题(同源)
- SEO 不友好
4、HTTP简介
HTTP(hypertext transport protocol)协议『超文本传输协议』,协议详细规定了浏览器和万维网服务器之间互相通信的规则、约定,、规则
请求报文
重点是格式与参数
行 POST /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>尚硅谷</h1>
</body>
</html>
Chrome网络控制台查看通信报文
1、Network --> Hearders 请求头
2、Network --> Response 响应体:通常返回的是html
二、原生AJAX
1、XMLHttpRequest,AJAX 的所有操作都是通过该对象进行的。
2、当前端想设置自定义的请求头时,需要后端设置响应头
//all表示接收任意类型的请求
app.all('/server', (request, response) => {
//响应头 允许跨域 运行自定义响应头
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', '*');}
3、ajax请求状态:xhr.readyState 0:请求未初始化,还没有调用 open()。
- 1:请求已经建立,但是还没有发送,还没有调用 send()。
- 2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。
- 3:请求在处理中;通常响应中已有部分数据可用了,没有全部完成。
- 4:响应已完成;您可以获取并使用服务器的响应了
Ajax的使用
//1.创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
//2.设置请求信息
xhr.open(method, url);
//可以设置请求头,一般不设置
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//3.发送请求
xhr.send(body) //get 请求不传 body 参数,只有 post 请求使用
//4.接收响应
//xhr.responseXML 接收 xml 格式的响应数据
//xhr.responseText 接收文本格式的响应数据
xhr.onreadystatechange = function (){
if(xhr.readyState == 4 && xhr.status == 200){
var text = xhr.responseText;
console.log(text);
}}
Get方式
//绑定事件
btn.onclick = function () {
//1. 创建对象
const xhr = new XMLHttpRequest();
//2. 初始化 设置请求方法和 url
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
//3. 发送
xhr.send();
//4. 事件绑定 处理服务端返回的结果
// 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) {
//处理结果 行 头 空行 体
//响应
// console.log(xhr.status);//状态码
// console.log(xhr.statusText);//状态字符串
// console.log(xhr.getAllResponseHeaders());//所有响应头
// console.log(xhr.response);//响应体
//设置 result 的文本
result.innerHTML = xhr.response;
} else {
}
}
}