服务器端编写
express框架的安装和使用
- 终端初始化node:
npm init - -yes - express框架安装:
npm i express - 服务器端Ajax实例代码：
//1.引入express
const express = require('express')
const {request, response} = require("express"); //app.get中参数设置后，自动生成的全局变量
//2.创建应用对象
const app = express();
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/',(request,response)=>{
// 设置响应
response.send("Hello, Express")
})
// 4.监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动，8000 端口监听中....")
})
服务器端设置允许跨域
- 指令：
response.setHeader('Access-Control-Allow-Origin','*') - 实例代码：
//request是对请求报文的封装
//response是对响应报文的封装
/*
*第一个参数：‘/server’表示 当客户端浏览器发送请求时，如果请求行第二段内容url的路径
*是/server的话，就会执行回调函数
*/
app.get('/',(request,response)=>{
//设置响应头:设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
// 设置响应体
response.send("Hello, Ajax")
})
nodemon工具安装
- nodemon的作用：修改服务端js代码后，终端自动重启
- 安装指令：
npm install -g nodemon - 使用nodemon打开服务端文件(示例)：
nodemon .\server.js
html端编写
XMLHttpRequest介绍( 以下全文以 xhr 代替XMLHttpRequest对象)**
- Ajax 的核心是 XMLHttpRequest 对象。
- XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。
- html端获取响应体步骤：
1.创建XMLHttpRequest对象：const xhr = new XMLHttpRequest()
2.设置请求类型和访问路径：xhr.open('GET','http://127.0.0.1:7000')
3.发送请求：xhr.send()
XMLHttpRequest 对象的重要属性
- xhr.response：响应体内容
- xhr.responseType：此属性代表响应数据的类型，例如将该属性设置为"json"
- xhr.timeout：超时属性，接收响应的时间超过该属性值，则为超时，默认为0
- xhr.readyState：响应状态码，例如200 404 403 401 500等
其中[200,300)区间内的整数，代表服务器成功返回内容 - xhr.readyState：表示请求的五种状态
0：请求未初始化
1：服务器连接已建立
2：请求已接收，接收到了响应头
3：请求处理中，正在下载响应体
4：请求已完成，且响应已就绪 - xhr.statusText：响应状态字符串，例如“OK”、“Not Found”、“Forbidden”等
重要事件
- xhr.onreadystatechange：每当 readyState 的值改变时，就会触发
onreadystatechange 事件 - xhr.ontimeout：超时事件，当超过 xhr.timeout 的值时，未接收到响应则会触发
- xhr.onerror：当请求遇到错误时，将触发此事件
XMLHttpRequest对象的重要方法
- xhr.open("请求类型","请求地址")：设置请求方式 和 请求地址
- xhr.send()：发送请求
- xhr.abort()：取消网络请求
- xhr.getAllResponseHeaders()：获取所有响应头
对响应结果的判定
- 当 xhr.readyState === 4 时表示请求已完成，且响应已就绪
- 当 (xhr.status >= 200) && (xhr.status < 300) 时，服务器响应内容成功接收
- 当 xhr.readyState 和 xhr.status 的值均满足条件时，响应内容才是完整无误的
xhr.onreadystatechange = function (){
//判断(服务端返回了所有的结果)
if(xhr.readyState === 4){
//判断响应状态码 200 404 403 401 500等
//2xx 均为表示成功的状态码
if ((xhr.status >= 200) && (xhr.status < 300)){
//
result.innerText = xhr.response
}
}
}
解决发送请求时，浏览器读取缓存内容的问题
- 可为发送请求的URL拼接上Date参数，如此，浏览器不会读取缓存内容，而是重新发送网络请求
- 实例：
xhr.open('POST','http://127.0.0.1:7000/json-server?'+Date.now())
html端完整实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON响应</title>
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px palevioletred;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
window.onkeydown = function (){
const xhr = new XMLHttpRequest()
//设置响应体响应数据的类型
xhr.responseType = 'json' //此设置下会对json数据进行自动解析
xhr.open('POST','http://127.0.0.1:7000/json-server?t='+Date.now())
xhr.send()
//处理服务端返回结果
xhr.onreadystatechange = function (){
if (xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
const result = document.getElementById("result")
console.log(xhr.response)
result.innerText = xhr.response.name
}
}
}
}
</script>
</body>
</html>
服务器端完整实例
//1.引入express
const express = require('express')
const {request, response} = require("express");
//2.创建应用对象
const app = express();
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
/*
*第一个参数：‘/server’表示 当客户端浏览器发送请求时，如果请求行第二
*段内容url的路径，是/server的话，就会执行回调函数
*/
app.get('/',(request,response)=>{
//设置响应头:设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
// 设置响应体
response.send("Hello, Ajax")
})
//延时响应设置
app.get('/delay',(request,response)=>{
response.setHeader('Access-Control-Allow-Origin','*')
setTimeout(function (){
response.send("延时响应，AJAX123")
},3000)
})
app.post('/server',(request,response)=>{
//设置响应头:设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
// 设置响应体
response.send("Hello, Ajax.(POST)")
})
app.all('/json-server',(request,response)=>{
//设置响应头:设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
//响应一个数据
const data = {
name:'atguigu123',
type:'school'
}
//对对象进行转换
let str = JSON.stringify(data)
// 设置响应体
response.send(str)
})
// 4.监听端口启动服务
app.listen(7000,()=>{
console.log("服务已经启动，7000 端口监听中....")
})