当前位置：首页 > news >正文

js高级06-ajax封装和跨域

news 文章来源：https://blog.csdn.net/qq_60060362/article/details/143989244 2025/5/6 23:38:37

8.1、ajax简介及相关知识

8.1.1、原生ajax

8.1.1.1、AJAX 简介

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。按需请求，可以提高网站的性能

AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

使用场景：

注册账号，核对输入是否符合设置要求，发送ajax请求，返回相关信息
京东、淘宝下拉加载更多的数据显示
鼠标移入，显示新的页面数据
鼠标点击，显示不同的页面切换数据
··············

8.1.1.2 XML 简介

XML 可扩展标记语言。 XML 被设计用来传输和存储数据。 XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据。

比如说我有一个学生数据：

name = "孙悟空" ; age = 18 ; gender = "男" ;

用 XML 表示：

<student> <name>孙悟空</name> <age>18</age> <gender>男</gender> 
</student>

现在已经被 JSON 取代了。

用 JSON 表示：

{"name":"孙悟空","age":18,"gender":"男"}

8.1.1.3 AJAX 的特点

AJAX 的优点

\1) 可以无需刷新页面而与服务器端进行通信。速度很快

\2) 允许你根据用户事件来更新部分页面内容。按需更新，鼠标移入请求数据，鼠标点击请求数据

AJAX 的缺点

\1) 没有浏览历史，不能回退

\2) 存在跨域问题(同源)

\3) SEO 不友好

8.1.2、HTTP

HTTP（hypertext transport protocol）协议『超文本传输协议』，协议详细规定了浏览器和万维网服务器之间互相通信的规则。（约定, 规则）

8.1.2.1、请求报文（重点关注格式与参数）

请求行：请求类型 url路径部分请求版本)

     POST /s?ie=utf-8 HTTP/1.1
名字: 值

请求头： Host: bdqn.com

Cookie: name=bdqn

Content-type: application/x-www-form-urlencoded /请求类型

User-Agent: chrome 83

请求空行：

请求体：（get请求，请求体为空，post请求体可以不为空）

     username=admin&password=admin

```

8.1.2.2、响应报文 response

响应行协议版本响应状态码

HTTP/1.1 200 OK

响应头

Content-Type: text/html;charset=utf-8 //响应类型描述

Content-length: 2048 //响应长度

Content-encoding: gzip //压缩方式

响应空行

响应体返回的结果

<html>

<head>

</head>

<body>

<h1>hello world</h1>

</body>

</html>

8.1.2.3、常用状态码

404 找不到

403 被禁止

401 未授权

500 错误

200 正确ok

8.1.2.4、网站查看

8.1.3、node.js安装

Node.js — Run JavaScript Everywhere 安装网址

检测是否安装

在开始的位置点开，输入cmd，点击命令提示符，在窗体里，输入node -v，出现版本信息

8.1.4、express框架

ajax发送请求，需要一个服务端，所以简单学习express

打开终端：

npm init --yes 初始化

npm i express 安装express

npm list express 查看express的版本

创建express.js文件，完成基本配置

//1. 引入express
const express = require('express');//2. 创建应用对象
const app = express();//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/', (request, response)=>{//设置响应response.send('HELLO EXPRESS');
});//4. 监听端口启动服务
app.listen(8000, ()=>{console.log("服务已经启动, 8000 端口监听中....");
});

启动express

在终端输入： node 文件名如：node express基本使用.js

在浏览器地址栏：http://127.0.0.1:8000/，可以显示响应文本

释放8000窗口，ctrl+C

8.1.5、nodemon安装

可以帮助自动重启express后台服务器

nodemon - npm

npm install -g nodemon

安装完毕，重启severs.js

启动命令

nodemon severs.js

8.2、原生ajax实现

8.2.1、页面及服务器准备

8.2.1.1、页面准备

需求：点击按钮，发送请求，将响应体结果返回在div中

<button>点击发送请求</button>
<div id="result"></div>

8.2.1.2、、服务器准备

新建server.js文件

//1. 引入express
const express = require("express");//2. 创建应用对象
const app = express();//3. 创建路由规则
// server 请求行的url有/server，就回执行对应函数
app.get("/server", (request, response) => {//设置响应头  设置允许跨域//Access-Control-Allow-Origin  响应头名字response.setHeader("Access-Control-Allow-Origin", "*");//设置响应体response.send("你好，ajax");
});
//4. 监听端口启动服务
app.listen(8000, () => {console.log("服务已经启动, 8000 端口监听中....");
});

8.2.2、ajax基本请求

8.2.2.1、get请求

<body><button>点击发送请求</button><div id="result"></div><script>//获取button元素const btn = document.querySelector("button");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?a=100&b=200&c=300");//3. 发送xhr.send();//4. 事件绑定 处理服务端返回的结果// on   当....时候// readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4// 0 表示初始化，1表示open()发送完毕 2 表示send()发送完毕  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;} else {}}};};</script></body>

8.2.2.2、post请求

 <head><meta charset="UTF-8" /><title>AJAX POST 请求</title><style>#result {width: 200px;height: 100px;border: solid 1px #903;}</style></head><body><div id="result"></div><script>//获取元素对象const result = document.getElementById("result");//绑定事件result.addEventListener("mouseover", function () {//1. 创建对象const xhr = new XMLHttpRequest();//2. 初始化 设置类型与 URLxhr.open("POST", "http://127.0.0.1:8000/server");//5、 设置请求头  xhr.setRequestHeader("头的名字", "头的值");// 用于做用户身份的校验//  Content-Type 设置请求体内容类型//  application/x-www-form-urlencoded  参数查询字符串类型，固定写法xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//6、 自定义请求头信息，这个自定义的请求头，需要在server.js中设置所有头信息，都能接受xhr.setRequestHeader("name", "bdqn");//3. 发送  可以传递参数，设置请求体xhr.send("a=100&b=200&c=300");// xhr.send('a:100&b:200&c:300');// xhr.send('1233211234567');//4. 事件绑定xhr.onreadystatechange = function () {//判断if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {//处理服务端返回的结果result.innerHTML = xhr.response;}}};});</script></body>

server.js

//可以接收任意类型的请求
app.all("/server", (request, response) => {//设置响应头  设置允许跨域response.setHeader("Access-Control-Allow-Origin", "*");//响应头   所有类型的头信息都可以接受response.setHeader("Access-Control-Allow-Headers", "*");//设置响应体response.send("HELLO AJAX POST");
});

8.2.2.3、JSON返回值

 <div id="result"></div><script>const result = document.getElementById("result");//绑定键盘按下事件window.onkeydown = function () {//1、发送请求const xhr = new XMLHttpRequest();//设置响应体数据的类型  响应数据自动转成jsonxhr.responseType = "json";//2、初始化xhr.open("GET", "http://127.0.0.1:8000/json-server");//3、发送xhr.send();//4、事件绑定xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {//这里返回的是一个字符串，需要转成对象// console.log(xhr.response);// result.innerHTML = xhr.response;// 1. 手动对数据转化// let data = JSON.parse(xhr.response);// console.log(data);// result.innerHTML = data.name;// 2. 自动转换console.log(xhr.response);result.innerHTML = xhr.response.name;}}};};</script>

severs.js

//JSON 响应
app.all("/json-server", (request, response) => {//设置响应头  设置允许跨域response.setHeader("Access-Control-Allow-Origin", "*");//响应头response.setHeader("Access-Control-Allow-Headers", "*");//响应一个数据const data = {name: "bdqn",};//对对象进行字符串转换let str = JSON.stringify(data);//设置响应体response.send(str);
});

8.2.3、IE缓存问题处理（一般现在不需要额外处理）

ie浏览器会对ajax请求的结果做一个缓存处理。产生的问题就是ajax的下一次请求，ie浏览器，就会走本地的缓存，而不是服务器返回的最新数据，这样对时效比较强的场景，ajax请求就会影响我们的结果。

<button>点击发送请求</button><div id="result"></div><script>const btn = document.querySelector("button");const result = document.querySelector("#result");btn.addEventListener("click", function () {const xhr = new XMLHttpRequest();// 为了解决ie浏览器缓存的问题，在发送请求时，添加参数，当前时间戳xhr.open("GET", "http://127.0.0.1:8000/ie?t=" + Date.now());xhr.send();xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {result.innerHTML = xhr.response;}}};});</script>

server.js

//针对 IE 缓存
app.get("/ie", (request, response) => {//设置响应头  设置允许跨域response.setHeader("Access-Control-Allow-Origin", "*");//设置响应体response.send("HELLO IE - 6");
});

8.2.4、超时与网络异常处理

 <button>点击发送请求</button><div id="result"></div><script>const btn = document.querySelector("button");const result = document.querySelector("#result");btn.addEventListener("click", function () {const xhr = new XMLHttpRequest();//超时设置 2s 设置xhr.timeout = 2000;//超时回调xhr.ontimeout = function () {alert("网络异常, 请稍后重试!!");};//网络异常回调，断网的时候，会出现的提醒xhr.onerror = function () {alert("你的网络似乎出了一些问题!");};xhr.open("GET", "http://127.0.0.1:8000/delay");xhr.send();xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {result.innerHTML = xhr.response;}}};});</script>

server.js

//延时响应
app.all("/delay", (request, response) => {//设置响应头  设置允许跨域response.setHeader("Access-Control-Allow-Origin", "*");// 允许任何头类型，自带的还有自定义的response.setHeader("Access-Control-Allow-Headers", "*");//为了测试服务器延迟响应到前台setTimeout(() => {//设置响应体response.send("延时响应");}, 3000);
});

8.2.5、ajax取消请求

abort() 取消请求

<body><button>点击发送</button><button>点击取消</button><script>//获取元素对象const btns = document.querySelectorAll("button");let x = null;btns[0].onclick = function () {xhr = new XMLHttpRequest();xhr.open("GET", "http://127.0.0.1:8000/delay");xhr.send();};// abort()  取消请求btns[1].onclick = function () {xhr.abort();};</script></body>

8.2.6、重复请求问题

如果用户疯狂点击请求后台数据，会导致服务器压力比较大。

处理办法：发送请求前，看之前有没有同样的请求，有的话，就把前面的请求去掉，发送一个新的请求

<body><button>点击发送</button><script>//获取元素对象const btns = document.querySelectorAll("button");let x = null;//1、标识变量，是否正在发送AJAX请求let isSending = false;btns[0].onclick = function () {//判断标识变量if (isSending) x.abort(); // 如果正在发送, 则取消该请求, 创建一个新的请求x = new XMLHttpRequest();//2、修改标识变量的值，在发送ajax请求isSending = true;x.open("GET", "http://127.0.0.1:8000/delay");x.send();x.onreadystatechange = function () {if (x.readyState === 4) {//3、修改标识变量，请求响应回来了，标识变量为falseisSending = false;}};};</script></body>

8.3、JQuery中发送ajax请求

sever.js

//jQuery 服务
app.all("/jquery-server", (request, response) => {//设置响应头  设置允许跨域response.setHeader("Access-Control-Allow-Origin", "*");response.setHeader("Access-Control-Allow-Headers", "*");// response.send('Hello jQuery AJAX');const data = { name: "bdqn" };response.send(JSON.stringify(data));
});

8.3.1、get请求

$.get(url, [data], [callback], [type])

url:请求的 URL 地址。

data:请求携带的参数。

callback:载入成功时回调函数。

type:设置返回内容格式，xml, html, script, json, text, _default。

$('button').eq(0).click(function(){$.get('http://127.0.0.1:8000/jquery-server',{a:100, b:200}, function(data){console.log(data);},'json');});

8.3.2、post请求

$.post(url, [data], [callback], [type])

url:请求的 URL 地址。

data:请求携带的参数。

callback:载入成功时回调函数。

type:设置返回内容格式，xml, html, script, json, text, _default。

      $('button').eq(1).click(function(){$.post('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){console.log(data);});});

8.3.3、通用方法ajax

 $('button').eq(2).click(function(){$.ajax({//urlurl: 'http://127.0.0.1:8000/jquery-server',//参数data: {a:100, b:200},//请求类型type: 'GET',//响应体结果dataType: 'json',//成功的回调success: function(data){console.log(data);},//超时时间timeout: 2000,//失败的回调error: function(){console.log('出错啦!!');},//头信息headers: {c:300,d:400}});});

8.4、axios发送ajax请求 axios官网：axios (v1.7.2) - Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 Node.js 中。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务铂特优选 axios线上链接：<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.8/axios.js"></script>

<head><meta charset="UTF-8" /><title>axios 发送 AJAX 请求</title><link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.8/axios.js"></script></head><body><div class="container"><h2 class="page-header">axios发送AJAX请求</h2><button class="btn btn-primary">GET</button><button class="btn btn-danger">POST</button><button class="btn btn-info">通用型方法ajax</button></div><script>var btns = document.querySelectorAll("button");// 设置基本路径axios.defaults.baseURL = "http://127.0.0.1:8000";// get请求btns[0].addEventListener("click", function () {axios.get("/axios-server", {//设置请求头headers: {id: "007",},}).then((response) => {console.log("服务器返回的数据：", response.data);},(error) => {console.log("错误信息", error.message);});});// post请求btns[1].addEventListener("click", function () {axios.post("/axios-server",{username: "admin",password: "123456",},{// urlparams: {id: "008",},// 请求头参数headers: {height: "180",weight: 180,},}).then((res) => {console.log(res.data);}).catch((error) => {console.log(error.message);});});// axios通用请求btns[2].addEventListener("click", async function () {try {let res = await axios({method: "POST", //默认是geturl: "/axios-server1", //请求路径params: {//url参数id: "005",},headers: {a: 100,},data: {//请求体参数username: "tom",password: "123abc",},});console.log(res.data);} catch (error) {console.log(error);}});</script></body>

8.5、跨域

8.5.1、同源策略

同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。

同源：协议、域名、端口号必须完全相同。

违背同源策略就是跨域。

8.5.2、演示同源策略

server.js

const express = require("express");const app = express();app.get("/home", (request, response) => {//响应一个页面   绝对路径,当前js文件所处的目录response.sendFile(__dirname + "/index.html");
});app.get("/data", (request, response) => {response.send("用户数据");
});app.listen(8001, () => {console.log("服务已经启动...");
});

index.html 跟serve.js同级

在网址栏直接输入 http://localhost:8001/home,不用vscode打开，否则会出现跨域问题

<body><h1>bdqn</h1><button>点击获取用户数据</button><script>const btn = document.querySelector('button');btn.onclick = function(){const x = new XMLHttpRequest();//这里因为是满足同源策略的, 所以 url 可以简写x.open("GET",'/data');//发送x.send();//绑定事件x.onreadystatechange = function(){if(x.readyState === 4){if(x.status >= 200 && x.status < 300){console.log(x.response);}}}}</script>
</body>

8.5.3 、如何解决跨域

8.5.3.1、 JSONP

1) JSONP 是什么

JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持 get 请求。

2) JSONP 怎么工作的？

在网页有一些标签天生具有跨域能力，比如：img link iframe script。 JSONP 就是利用 script 标签的跨域能力来发送请求的。

3）jsonp的简单原理

jsonp原理.html

<head><meta charset="UTF-8" /><title>Document</title><style>h1 {width: 300px;height: 100px;border: 1px solid red;}</style></head><body><h1 id="res"></h1><script>// 提前定义好，数据处理函数，用于处理script请求回来的数据function handle(data) {const res = document.getElementById("res");res.innerHTML = data.name;}</script><!--1、 script的正常使用，引入外部资源--><!-- <script src="./js/app.js"></script> --><!--2、 script跨域请求数据 --><script src="http://127.0.0.1:8000/jsonp-server"></script></body>

app.js 演示script的正常用法，引入外部资源

var data = {name: "jack",
};//1、 自定义一个handle的函数，处理这个data数据，放入到页面中
// function handle(data) {
//   const res = document.getElementById("res");
//   res.innerHTML = data.name;
// }
// 2、这个自定义函数，放入到html页面中，截止到这就是简单的引入
// 3、去sever.js文件中变形操作handle(data);

server.js

//jsonp服务
app.all("/jsonp-server", (request, response) => {// 返回字符串，这个字符串，要写js能识别的语法，js引擎要对返回内容进行解析// response.send('console.log("hello jsonp")');// 返回数据处理函数const data = {name: "北大青鸟",};//将数据转化为字符串let str = JSON.stringify(data);//返回结果，.end()不用设置响应头，这个handle（），在页面中要提前定义response.end(`handle(${str})`);
});

4) JSONP 的案例使用

需求：用户输入用户名，失焦时，发送ajax请求，判断用户名是否存在，存在将input变成红色框，且显示用户名已存在

<body>用户名: <input type="text" id="username"><p></p><script>//获取 input 元素const input = document.querySelector('input');const p = document.querySelector('p');//声明 handle 函数function handle(data){input.style.border = "solid 1px #f00";//修改 p 标签的提示文本p.innerHTML = data.msg;}//绑定事件input.onblur = function(){//获取用户的输入值let username = this.value;//向服务器端发送请求 检测用户名是否存在//1. 创建 script 标签const script = document.createElement('script');//2. 设置标签的 src 属性script.src = 'http://127.0.0.1:8000/check-username';//3. 将 script 插入到文档中，否则script不执行document.body.appendChild(script);}</script>
</body>

sever.js

//用户名检测是否存在
app.all("/check-username", (request, response) => {const data = {exist: 1, msg: "用户名已经存在",};//将数据转化为字符串let str = JSON.stringify(data);//返回结果，交给handle处理函数response.end(`handle(${str})`);
});

1) CORS 是什么？

CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源

2) CORS 怎么工作的？

CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

3) CORS 的使用

sever.js

app.all("/cors-server", (request, response) => {//设置响应头，允许跨域response.setHeader("Access-Control-Allow-Origin", "*");// 允许自定义响应头response.setHeader("Access-Control-Allow-Headers", "*");//设置请求允许的方法response.setHeader("Access-Control-Allow-Method", "*");// response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");response.send("hello CORS");
});

<body><button>发送请求</button><div id="result"></div><script>const btn = document.querySelector('button');btn.onclick = function(){//1. 创建对象const x = new XMLHttpRequest();//2. 初始化设置x.open("GET", "http://127.0.0.1:8000/cors-server");//3. 发送x.send();//4. 绑定事件x.onreadystatechange = function(){if(x.readyState === 4){if(x.status >= 200 && x.status < 300){//输出响应体console.log(x.response);}}}}</script>
</body>

参考文档：

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

8.5.3.3、搭建代理服务器

前端通过在前端框架中搭建临时代理服务器，解决跨域问题

8.1、ajax简介及相关知识

8.1.1、原生ajax

8.1.1.1、AJAX 简介

8.1.1.2 XML 简介

8.1.1.3 AJAX 的特点

8.1.2、HTTP

8.1.2.1、请求报文 （重点关注格式与参数）

8.1.2.2、响应报文 response

8.1.2.3、常用状态码

8.1.2.4、网站查看

8.1.3、node.js安装

8.1.4、express框架

8.1.5、nodemon安装

8.2、原生ajax**实现**

8.2.1、页面及服务器准备

8.2.1.1、页面准备

8.2.1.2、、服务器准备

8.2.2、ajax基本请求

8.2.2.1、get请求

8.2.2.2、post请求

8.2.2.3、JSON返回值

8.2.3、IE缓存问题处理（一般现在不需要额外处理）

8.2.4、超时与网络异常处理

8.2.5、ajax取消请求

8.2.6、重复请求问题

8.3、JQuery中发送ajax请求

8.3.1、get请求

8.3.2、post请求

8.3.3、通用方法ajax

8.5、跨域

8.5.1、同源策略

8.5.2、演示同源策略

8.5.3 、如何解决跨域

8.5.3.1、 JSONP

1) JSONP 是什么

2) JSONP 怎么工作的？

3）jsonp的简单原理

4) JSONP 的案例使用

1) CORS 是什么？

2) CORS 怎么工作的？

3) CORS 的使用

8.5.3.3、搭建代理服务器

相关文章：

8.1.2.1、请求报文（重点关注格式与参数）

8.2、原生ajax实现