一、什么是AJAX
1.AJAX
就是异步的JS和XML。通过AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。
2.XML
可扩展标记语言。XML被设计用来传输和存储数据。XML和HTML类似，不同的是HTML是用来呈现数据的，而且HTML中都是预定义标签（已经定义好的），而XML中没有预定义标签，全部都是自定义标签，用来表示一些数据。（目前已经被JSON取代）
3.AJAX的优缺点
优点：
（1）可以无需刷新页面而与服务器端进行通信。
（2）允许你根据用户事件（鼠标、键盘事件等等）来更新部分页面内容。
缺点：
（1）没有浏览历史，不能回退。
（2）存在跨域问题（不同网站中请求不到）
（3）SEO不友好（查看源代码中无法查找到）
二、HTTP协议
HTTP全称为hypertext transport protocol 协议【超文本传输协议】，协议详细规定了浏览器和万维网服务器之间互相通信的规则。
1.请求报文
2.响应报文
发过来的响应体里面有html，然后接收方再去解析然后显示在页面上
三、AJAX案例准备工作
1.配置环境
终端中输入npm i express
2.创建一个服务端
sudo node express.js
//引入express
const express = require('express');
//创建应用对象
const app = express();
//创建路由规则
//request是请求报文的封装
//response是响应报文的封装
app.get('/', (request, response) => {
response.send('hello express')
});
app.listen(8080, () => {
console.log('服务已经启动，8080端口监听中')
})
网页输入链接http://127.0.0.1:8080/
网页中出现 hello express
四、发送AJAX请求
1.发送GET请求
我们现在想要实现点击按钮发送请求将数据显示到div盒子中
客户端发送请求时，如果url是server，就会执行回调函数（箭头函数），并且由response来作出响应
<button>点击发送请求</button>
<div id="result"></div><script>
const btn=document.querySelector('button')
const result=document.querySelector('#result')
btn.onclick=function(){
//创建对象
const xhr=new XMLHttpRequest();
//初始化，设置请求方法和url;
//第一个参数：什么类型的请求，第二个参数给谁发
xhr.open('GET','http://127.0.0.1:8080/server')
//发送
xhr.send();
//事件绑定，处理服务端返回的结果
//on在什么什么的时候，readystate是xhr对象的属性它的值有：
//0-未初始化 1-open调用完毕 2-send调用完毕 3-服务端返回了部分结果 4-服务端返回了所有结果
//改变的时候触发，所以会触发四次
xhr.onreadystatechange=function(){
//判断（服务器返回全部数据
if(xhr.readyState==4){
//判断响应状态码 200 404 403 401 500
//响应状态中2开头都是表示成功
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
}
}
}
}
</script>服务端只修改了/server：
//引入express
const express = require('express');
//创建应用对象
const app = express();
//创建路由规则
//request是请求报文的封装
//response是响应报文的封装
app.get('/server', (request, response) => {
//设置响应头，名为Access-Control-Allow-Origin
//*设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
response.send('hello AJAX')
});
app.listen(8080, () => {
console.log('服务已经启动，8080端口监听中')
})