目录
1.AJAX案例准备
- 前端页面的准备
- 服务端代码的准备
页面准备:
需求:点击按钮向服务端发送请求,把服务端返回的响应体结果在框框内显示
服务端准备:
// 1. 引入express
const express = require('express');
// 2. 创建应用对象
const app = express();
// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Controll-Allow-Origin', '*');
// 设置响应体
response.send("Hello AJAX");
});
// 4. 监听端口,启动服务
app.listen(8000, () => {
console.log("服务已经启动, 8000 端口监听中...");
})
写好页面和服务端代码之后
在终端中输入node serve.js。
注意:若监听窗口已被占用,需要释放原来的监听窗口,或者用新的监听窗口。
启动服务之后,打开浏览器输入http://127.0.0.1:8000/server
页面显示正常,标头也显示了我们输入的*号。
2.AJAX请求的基本操作
代码如下:(每个步骤都有详细解释)
<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')
;
//3.发送
xhr.send();
//4.事件绑定 处理服务端返回的结果
// on 当什么的时候
//readystate 是xhr对象中的属性,表示状态 0(未初始化) 1(open方法已经调用完毕) 2(send方法已经调用完毕) 3(服务端返回了部分结果) 4(服务端返回了所有结果)
//change 改变
xhr.onreadystatechange = function(){
//判断(服务端返回了所有的结果)
if(xhr.readyState===4){
//判断相应状态码 200 404 403 401 500
//2xx 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;
}
else{}
}
}
}
</script>
点击按钮之后,控制台也正常输出:
响应头部分:
3.AJAX设置请求参数
传递参数: