六、jQuery 中的 AJAX 跨域问题

第 2 章：jQuery 中的 AJAX

官方中文文档：https://jquery.cuishifeng.cn/jQuery.Ajax.html

2.1 get 请求

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

url:请求的 URL 地址。
data:请求携带的参数。
callback:载入成功时回调函数。
type:设置返回内容格式，xml, html, script, json, text, _default。

2.2 post 请求

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

url:请求的 URL 地址。
data:请求携带的参数。
callback:载入成功时回调函数。
type:设置返回内容格式，xml, html, script, json, text, _default。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>jQuery发送AJAX请求</title><link rel="stylesheet" href="../bootstrap-4.6.0-dist/css/bootstrap.min.css"></head><body><div class="container"><h2 class="page-header">jQuery发送AJAX请求</h2><button type="button" class="btn btn-primary">GET</button><button type="button" class="btn btn-danger">POST</button><button type="button" class="btn btn-info">通用型方法</button></div><script src="../bootstrap-4.6.0-dist/js/jquery.min.js"></script><script src="../bootstrap-4.6.0-dist/js/bootstrap.bundle.min.js"></script><script type="text/javascript">$('button').eq(0).click(function() {$.get('http://127.0.0.1:8000/jquery-server', {a: 100,name: 'zep'}, function(data) {console.log(data)}, 'json')})$('button').eq(1).click(function() {$.post('http://127.0.0.1:8000/jquery-server', {a: 100,name: 'zep'}, function(data) {console.log(data)}, 'json')})$('button').eq(2).click(function() {$.ajax({// urlurl: 'http://127.0.0.1:8000/jquery-server',// 参数data: {a:100, name: 'zep'},// 请求类型type: 'GET',// 响应体结果dataType: 'json',// 成功的回调success: function(data) {console.log(data)},// 超时时间timeout: 2000,// 失败的回调error: function() {console.log('出错啦！！！')},// 头信息headers: {c: 300,d: 400}})})</script></body>
</html>

server.js:

// 1. 引入express
const express = require('express')// 2. 创建应用对象
const app = express()// 3. 创建路由规则
app.get('/server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 设置响应体response.send('hello ajax！！！')
})// all 可以接收任意类型的请求
app.all('/server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 允许前端post请求 自定义请求头名称response.header('Access-Control-Allow-Headers', '*');// 设置响应体response.send('hello ajax post')
})app.all('/json-server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 允许前端post请求 自定义请求头名称response.header('Access-Control-Allow-Headers', '*');// 响应一个数据const data = {name: 'zep'};// 对 对象进行字符串转换let str = JSON.stringify(data)// 设置响应体,send方法只接收字符串类型的参数response.send(str)
})// 专门针对IE缓存
app.get('/ie', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 设置响应体response.send('hello ie3!!!')
})// 延时响应
app.get('/delay', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 设置定时器，当客户端发起请求时，服务端延迟3s再将响应数据发给客户端setTimeout(() => {// 设置响应体response.send('hello 延迟响应3秒!!!')}, 3000)})// jQuery服务
app.all('/jquery-server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 允许前端post请求 自定义请求头名称response.header('Access-Control-Allow-Headers', '*');// 设置响应体const data = {name: 'zep'}// response.send('hello jquery ajax!')response.send(JSON.stringify(data))
})// 4. 监听端口 启动服务
app.listen(8000, () => {console.log('服务已经启动，8000端口监听中...')
})

第3章： axios

官方中文文档：http://www.axios-js.com/zh-cn/docs/

使用方法：

第一种：

cdn引入： https://www.bootcdn.cn/axios/

第二种：

npm install axios

代码演示：

axios.html :

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>axios 发送ajax请求</title></head><body><button>GET</button><button>POST</button><button>AJAX</button><script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script><script>const btns = document.querySelectorAll('button');// 配置baseURLaxios.defaults.baseURL = 'http://127.0.0.1:8000'btns[0].onclick = function() {// GET 请求axios.get('/axios-server', {// url参数params: {id: 100,vip: 7},// 请求头信息headers: {name: 'zep',age: 22}}).then(value => {console.log(value)})}btns[1].onclick = function() {// POST请求axios.post('/axios-server',// 请求体{username: 'admin',password: 'admin'}, {params: {id: 200,vip: 10},// 请求头信息headers: {name: 'zep111',age: 22}})}btns[2].onclick = function() {axios({// 请求方法method: 'POST',// urlurl: '/axios-server',// url参数params: {vip: 20,level: 30},//头信息headers: {a: 100,b: 200},//请求体参数data: {username: 'admin',password: 'admin'}}).then(response => {console.log(response)// 响应状态码console.log(response.status)// 响应状态字符串console.log(response.statusText)// 响应头信息console.log(response.headers)// 响应体console.log(response.data)})}</script></body>
</html>

server.js:

// 1. 引入express
const express = require('express')// 2. 创建应用对象
const app = express()// 3. 创建路由规则
app.get('/server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 设置响应体response.send('hello ajax！！！')
})// all 可以接收任意类型的请求
app.all('/server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 允许前端post请求 自定义请求头名称response.header('Access-Control-Allow-Headers', '*');// 设置响应体response.send('hello ajax post')
})app.all('/json-server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 允许前端post请求 自定义请求头名称response.header('Access-Control-Allow-Headers', '*');// 响应一个数据const data = {name: 'zep'};// 对 对象进行字符串转换let str = JSON.stringify(data)// 设置响应体,send方法只接收字符串类型的参数response.send(str)
})// 专门针对IE缓存
app.get('/ie', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 设置响应体response.send('hello ie3!!!')
})// 延时响应
app.get('/delay', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 设置定时器，当客户端发起请求时，服务端延迟3s再将响应数据发给客户端setTimeout(() => {// 设置响应体response.send('hello 延迟响应3秒!!!')}, 3000)})// jQuery服务
app.all('/jquery-server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 允许前端post请求 自定义请求头名称response.header('Access-Control-Allow-Headers', '*');// 设置响应体const data = {name: 'zep'}// response.send('hello jquery ajax!')response.send(JSON.stringify(data))
})// axios服务
app.all('/axios-server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 允许前端post请求 自定义请求头名称response.header('Access-Control-Allow-Headers', '*');// 设置响应体const data = {name: 'zep-axios'}// response.send('hello jquery ajax!')response.send(JSON.stringify(data))
})// 4. 监听端口 启动服务
app.listen(8000, () => {console.log('服务已经启动，8000端口监听中...')
})

第4章： fetch()发送Ajax请求：

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch

第 45章：跨域

3.1 同源策略

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

同源：协议、域名、端口号必须完全相同。
违背同源策略就是跨域。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>首页</title></head><body><h1>我爱ajax</h1><button>点击获取用户数据</button><script>const btn = document.querySelector('button')btn.onclick = function () {const xhr = new XMLHttpRequest();// 这里因为时满足同源策略的，所以url可以简写xhr.open('GET', '/data');// 发送xhr.send();xhr.onreadystatechange = function () {if(xhr.readyState === 4) {if(xhr.status >= 200 && xhr.status < 300) {console.log(xhr.response);}}}}</script></body>
</html>

server.js :

const express = require('express')const app = express();app.get('/home', (request, response) => {// 响应一个页面response.sendFile(__dirname + '/index.html');});app.get('/data', (request, response) => {response.send('用户数据。。。')
})app.listen(9000, () => {console.log('服务已经启动。。。，监听9000端口！！！')
})

3.2 如何解决跨域

3.2.1 JSONP

JSONP 是什么 JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持 get 请求。
JSONP 怎么工作的？在网页有一些标签天生具有跨域能力，比如：img link iframe script。
JSONP 就是利用 script 标签的跨域能力来发送请求的。
JSONP 的使用
1.动态的创建一个 script 标签

var script = document.createElement("script");

设置 script 的 src，设置回调函数

script.src = "http://localhost:3000/testAJAX?callback=abc";
function abc(data) { alert(data.name);
};

将 script 添加到 body 中

document.body.appendChild(script);

4.服务器中路由的处理

router.get("/testAJAX" , function (req , res) { console.log("收到请求"); var callback = req.query.callback; var obj = {name:"孙悟空", age:18 }res.send(callback+"("+JSON.stringify(obj)+")");
});

jQuery 中的 JSONP

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body> <button id="btn">按钮</button><ul id="list"></ul><script type="text/javascript" src="./jquery-1.12.3.js"></script><script type="text/javascript">window.onload = function() {var btn = document.getElementById('btn') btn.onclick = function() {$.getJSON("http://api.douban.com/v2/movie/in_theaters?callback=?", function(data) {console.log(data); //获取所有的电影的条目 var subjects = data.subjects; //遍历电影条目for (var i = 0; i < subjects.length; i++) {$("#list").append("<li>" + subjects[i].title + "<br />" + "<img src=\"" + subjects[i].images.large + "\" >" + "</li>");}});}}</script></body>
</html>

代码演示

2. 原生jsonp实践：

3. jQuery 发送 jsonp实践：

3.2.2 CORS

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

CORS 是什么？
CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源
CORS 怎么工作的？
CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。
CORS 的使用主要是服务器端的设置：

router.get("/testAJAX" , function (req , res) {//通过 res 来设置响应头，来允许跨域请求
//res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");
res.set("Access-Control-Allow-Origin","*");
res.send("testAJAX 返回的响应"); })