AJAX
Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)
环境搭建
-
安装node.js
C:\Users\xlgui>node -v v14.16.1
新建一个文件夹例如ajaxDemo, 进入
npm init --yes
# 安装express
npm i express
第一个案例
使用Ajax发送GET
前端get.html
<body>
<button>点击发送请求</button>
<div id="result"></div>
</body>
<script>
// 获取按钮
const btn = document.getElementsByTagName("button")[0];
const div = document.getElementById("result");
// 绑定点击事件
btn.onclick = function() {
// 发送ajax请求的四个步骤
// 1. 创建对象
const xhr = new XMLHttpRequest();
// 2. 初始化: 打开链接, 包括请求的方法和url
xhr.open("GET", "http://127.0.0.1:8000/server"); // 前面的IP也要写
// 3. 发送
xhr.send();
// 4. 事件绑定 处理服务端返回的结果 on realystate change 当就绪状态发生改变
// 有5中状态: 0, 1, 2, 3, 4
// 0 表示XMLHttpRequest对象刚初始化, 1表示open()完成, 2表示发生send()完成,
// 3表示返回部分数据, 4表示返回全部数据
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
// 再判断响应码
if (xhr.status >= 200 && xhr.status < 300) {
console.log(xhr.status);
console.log(xhr.statusText);
console.log(xhr.getAllResponseHeaders());
console.log(xhr.response);
div.innerHTML = xhr.response;
}
}
}
}
</script>
服务器端sever.js
// 1. 引入express
const { request, response } = require('express');
const express = require('express');
// 2. 创建应用对象
const app = express();
// 3. 创建路由规则
// 参数request是对请求报文的封装, response是对响应报文的封装
app.get("/server", (request, response)=>{
// 设置相应头-->允许跨域
response.setHeader("Access-Control-Allow-Origin", "*")
// 设置相应
response.send("hello, ajax");
});
app.listen(8000, ()=>{
console.log("服务器已启动,端口8000")
})
启动服务端
node "e:\download\bilibi\ajax尚硅谷\ajaxDemo\课堂\代码\原生ajax\server.js"
服务器已启动,端口8000
双击打开get.html
Ajax发送Post
前端post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>post请求</title>
<style>
#result {
width: 100px;
height: 100px;
border: springgreen solid 2px;
}
</style>
</head>
<body>
<div id="result"> </div>
<script>
const ret = document.getElementById("result");
// 绑定事件
ret.addEventListener("mouseover", function() {
// console.log("result");
const xhr = new XMLHttpRequest();
xhr.open("POST", "http://127.0.0.1:8000/server");
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status >=200 && xhr.status<300) {
ret.innerHTML = xhr.response;
}
}
}
});
</script>
</body>
</html>
后端 server.js
// 1. 引入express
const { request, response } = require('express');
const express = require('express');
// 2. 创建应用对象
const app = express();
// 3. 创建路由规则
// 参数request是对请求报文的封装, response是对响应报文的封装
app.get("/server", (request, response)=>{
// 设置相应头-->允许跨域
response.setHeader("Access-Control-Allow-Origin", "*")
// 设置相应
response.send("hello, ajax");
});
// 添加一个post相应
app.post("/server", (request, response)=>{
// 设置相应头-->允许跨域
response.setHeader("Access-Control-Allow-Origin", "*")
// 设置相应
response.send("ajax, post");
});
app.listen(8000, ()=>{
console.log("服务器已启动,端口8000")
})
使用post请求传递参数
在xhr.send()
方法中进行设置
xhr.send("a=1&b=2");
在send()
中可以传任意的字符串, 常见是上面这种用&连接的键值对和json, 只要你能在服务端正确地解析即可
设置请求头
更多推荐
尚硅谷ajax学习记录
发布评论