Ajax入门笔记（原生AjaxjQueryaxiosfetch跨域SONPCORS）
Posted 明金同学
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax入门笔记（原生AjaxjQueryaxiosfetch跨域SONPCORS）相关的知识，希望对你有一定的参考价值。
文章目录
一、基础知识
1.1AJAX简介
AJAX 全称为 Asynchronous javascript And XML，就是异步的 JS 和 XML。
通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。
AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。
1.2 AJAX的特点
1.2.1 AJAX 的优点
-
可以无需刷新页面而与服务器端进行通信。
-
允许你根据用户事件来更新部分页面内容。
1.2.2 AJAX 的缺点
-
没有浏览历史，不能回退
-
存在跨域问题(同源)
-
SEO 不友好
1.3 XML简介
XML 可扩展标记语言。
XML 被设计用来传输和存储数据。
XML 和 html 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，
全都是自定义标签，用来表示一些数据。
比如：
name = “孙悟空” ; age = 18 ; gender = “男” ;
用 XML 表示：
<?xml version="1.0" encoding="utf-8"?>
<student>
<name>孙悟空</name>
<age>18</age>
<gender>男</gender>
</student>
现在开发中多数已经被 JSON 取代了。
用 JSON 表示：
"name":"孙悟空","age":18,"gender":"男"
1.4 HTTP简介
HTTP（hypertext transport protocol）协议『超文本传输协议』，协议详细规定了浏览器和万维网服务器之间互相通信的约定，规则。
1.4.1 请求报文
重点是格式与参数
行 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
1.4.2 响应报文
TTP/1.1 200 OK
行 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>
```
常用的状态码及含义：
404（未找到） 服务器找不到请求的网页。
403（禁止） 服务器拒绝请求。
401（未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
500（服务器内部错误） 服务器遇到错误，无法完成请求。
200（成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。
常用的状态码及含义：https://www.jianshu.com/p/c8c756c49f7f
二、express框架
后面我们使用express框架模拟后端响应操作。
Node.js中文网：http://nodejs.cn/
Express中文网：https://www.expressjs.com.cn/
2.1 AJAX-express框架介绍与基本使用
初始化命令：
npm init --yes
"name": "administrator",
"version": "1.0.0",
"main": "index.js",
"dependencies":
"antd": "^4.16.5",
"hexo-generator-search": "^2.4.3",
"hexo-generator-searchdb": "^1.4.0"
,
"scripts":
"test": "echo \\"Error: no test specified\\" && exit 1"
,
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
安装express命令：
npm i express
启动服务：
// 引入express
const express = require('express')
// 创建应用对象
const app = express()
// 创建路由规则
app.get('/',(request , response)=>
response.send('hello world');
);
// 监听端口启用服务
app.listen(8000,()=>
console.log("服务已启动")
)
2.2 使用nodemon工具
用来监控你 node.js 源代码的任何变化和自动重启你的服务器。
以前，我们开发一个node后端服务时，每次更改文件，均需重启一下，服务才能生效。这使我们的开发效率降低了很多。nodemon的出现，可以随时监听文件的变更，自动重启服务，我们开发时只需关注代码即可，不再需要手动重启服务。
官方地址：https://www.npmjs.com/package/nodemon
安装命令：
npm install -g nodemon
使用命令：
nodemon
三、原生AJAX请求的基本操作
AJAX请求状态
xhr.readyState 可以用来查看请求当前的状态
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readyState
0: 表示 XMLHttpRequest 实例已经生成，但是 open()方法还没有被调用。
1: 表示 send()方法还没有被调用，仍然可以使用 setRequestHeader()，设定 HTTP请求的头信息。
2: 表示 send()方法已经执行，并且头信息和状态码已经收到。
3: 表示正在接收服务器传来的 body 部分的数据。
4: 表示服务器数据已经完全接收，或者本次接收已经失败了
3.1 get 请求方式的使用
在这里实现一个，点击发送请求按钮，前端向服务器发送一个请求，然后服务器响应数据在DIV中显示出来。
前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX GET 请求</title>
<style>
#result
width: 200px;
height: 100px;
border: solid 1px #90b;
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
//获取button元素
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById("result");
//绑定事件
btn.onclick = function ()
//1. 创建HTTP请求对象
const xhr = new XMLHttpRequest();
//2. 初始化 设置请求方法和 url
xhr.open('GET', 'http://127.0.0.1:8000/server');
// xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
//3. 发送请求
xhr.send();
//4. 事件绑定 处理服务端返回的结果
// on when 当....时候
// 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;
</script>
</body>
</html>
express模拟后端：
//1. 引入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 GET');
);
// 监听端口启用服务
app.listen(8000, () =>
console.log("服务已启动")
)
使用参数的话在直接在链接后面跟上参数，如：
xhr.open('GET', 'http://127.0.0.1:8000/server');
改为
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
3.2 post 请求方式的使用
在这里实现一个，当鼠标移入到页面上的div元素时，页面发送请求到服务器，前端向服务器发送一个请求，然后服务器响应数据在DIV中显示出来。
前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX POST 请求</title>
<style>
#result
width: 200px;
height: 100px;
border: solid 1px #90b;
</style>
</head>
<body>
<div id="result"></div>
<script>
//获取元素
const result = document.getElementById("result");
//绑定事件
result.addEventListener("mouseover", function ()
//1. 创建HTTP请求对象
const xhr = new XMLHttpRequest();
//2. 初始化 设置请求方法和 url
xhr.open('POST', 'http://127.0.0.1:8000/server');
// xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
//3. 发送请求
xhr.send();
//4. 事件绑定 处理服务端返回的结果
// on when 当....时候
// 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;
)
</script>
</body>
</html>
express模拟后端：
//1. 引入express
const express = require('express');
//2. 创建应用对象
const app = express();
//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
// 创建post路由规则
app.post('/server', (request, response) =>
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
//设置响应体
response.send('HELLO AJAX POST');
);
// 监听端口启用服务
app.listen(8000, () =>
console.log("服务已启动")
)
与get请求方式不同的是这里使用的是post请求，设置post请求的反应请求
// 创建路由规则
app.post('/server', (request, response) =>
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
//设置响应体
response.send('hello ajax');
);
使用参数方法例如：
// 设置请求头
xhr.send('a=100&b=200&c=300');
// xhr.send('a:100&b:200&c:300');// 其他形式
// xhr.send('1233211234567');// 可以是任意格式数据
也可以设置头信息
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('name', 'atguigu'); // 可以自定义请求头，非预定的
如果自定义请求头信息，服务端也需要相应的响应
// 设置响应头信息
response.setHeader('Access-Control-Allow-Headers', '*') // 允许任何响应头
express模拟后端：
//1. 引入express
const express = require('express');
//2. 创建应用对象
const app = express();
//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
// all可以接收任意类型的请求
app.all('/server', (request, response) =>
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//响应头
response.setHeader('Access-Control-Allow-Headers', '*');// 允许任何响应头
//设置响应体
response.send('HELLO AJAX POST');
);
// 监听端口启用服务
app.listen(8000, () =>
console.log("服务已启动")
)
前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX POST 请求</title>
<style>
#result
width: 200px;
height: 100px;
border: solid 1px #90b;
</style>
</head>
<body>
<div id="result"></div>
<script>
//获取元素
const result = document.getElementById("result");
//绑定事件
result.addEventListener("mouseover", function ()
//1. 创建HTTP请求对象
const xhr = new XMLHttpRequest();
//2. 初始化 设置请求方法和 url
xhr.open('POST', 'http://127.0.0.1:8000/server');
//设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('name', 'atguigu');
//3. 发送请求
xhr.send('a=100&b=200&c=300');
//4. 事件绑定 处理服务端返回的结果
// on when 当....时候
// 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;
)
</script>
</body>
</html>
3.3 服务器响应 JSON 数据
设置一个键盘事件，当在网页中按下任意键盘，网页向服务器发送数据，然后服务端响应，反馈一组JSON数据，页面接收到后在div中显示
前端代码：
<!DOCTYPE html>
<html lang="en">
&l以上是关于Ajax入门笔记（原生AjaxjQueryaxiosfetch跨域SONPCORS）的主要内容，如果未能解决你的问题，请参考以下文章
Ajax入门笔记（原生AjaxjQueryaxiosfetch跨域SONPCORS）