六、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
  1. JSONP 是什么 JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明 才智开发出来，只支持 get 请求。
  2. JSONP 怎么工作的？ 在网页有一些标签天生具有跨域能力，比如：img link iframe script。
    JSONP 就是利用 script 标签的跨域能力来发送请求的。
  3. JSONP 的使用
    1.动态的创建一个 script 标签
var script = document.createElement("script");
  1. 设置 script 的 src，设置回调函数
script.src = "http://localhost:3000/testAJAX?callback=abc"; 
function abc(data) { alert(data.name); 
};
  1. 将 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)+")"); 
});
  1. 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

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

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/470792.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

常用的几种编程语言的介绍

常用的几种编程语言的介绍

编程语言&#xff08;programming language&#xff09;&#xff0c;来自百度百科的解释为&#xff1a;编程语言是用来定义计算机程序的形式语言。它是一种被标准化的交流技巧&#xff0c;用来向计算机发出指令。一种计算机语言让程序员能够准确地定义计算机所需要使用的数据&a…
阅读更多...
三门问题（Monty Hall problem）背后的贝叶斯理论

三门问题（Monty Hall problem）背后的贝叶斯理论

文章目录1 前言2 问题简介3 直观的解释4 贝叶斯理论的解释1 前言 三门问题可以说有着各种版本的解释&#xff0c;但我看了几个版本&#xff0c;觉得没有把其中的条件说清楚&#xff0c;所以还是决定按照自己的理解记录一下这个特别有意思的问题。 2 问题简介 三门问题&#…
阅读更多...
一、在vue项目中使用mock.js（详解）

一、在vue项目中使用mock.js（详解）

步骤1.搭建测试项目 步骤1.1创建项目 命令&#xff1a; vue create mock-demo 步骤1.2安装依赖 命令&#xff1a; #使用axios发送ajax cnpm install axios--save #使用mockjs产生随机数据 cnpm install mockjs--save-dev #使用json5解决ison文件&#xff0c;无法添加注释…
阅读更多...
二、在jQuery中使用mockjs

二、在jQuery中使用mockjs

在jQuery项目中使用mock.js 步骤1.搭建项目 步骤1.1创建项目 新建文件夹jquery-mock-demo 步骤1.2新建index.html&#xff0c;引入jquery.js文件和mock.js <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title&g…
阅读更多...
Android 中如何计算 App 的启动时间？

Android 中如何计算 App 的启动时间？

&#xff08;转载&#xff09; 已知的两种方法貌似可以获取&#xff0c;但是感觉结果不准确&#xff1a;一种是&#xff0c;adb shell am start -w packagename/activity,这个可以得到两个值&#xff0c;ThisTime和TotalTime&#xff0c;不知道两个有什么区别&#xff0c;而且与…
阅读更多...
项目实战：Express实现学生管理系统（CRUD）

项目实战：Express实现学生管理系统（CRUD）

一、起步 初始化 npm init -y 生成package.json文件 模板处理 cnpm install express --save cnpm install bootstrap --savenpm install --save art-template npm install --save express-art-template//两个一起安装 npm i --save art-template express-art-template文件目录…
阅读更多...
2016年度 JavaScript 展望（下）

2016年度 JavaScript 展望（下）

【编者按】本文作者为资深 Web 开发者 TJ VanToll, TJ 专注于移动端 Web 应用及其性能&#xff0c;是《jQuery UI 实践》 一书的作者。 本文系 OneAPM 工程师编译呈现&#xff0c;以下为正文的第二部分。点此阅读第一部分。 本地移动 apps 在2015年&#xff0c;出现了一种新的基…
阅读更多...
Python模块之MyQR——制作个性化动态二维码（超详细）

Python模块之MyQR——制作个性化动态二维码（超详细）

一、首先安装MyQR 第一种方式&#xff1a;cmd 命令行输入 pip install MyQR 第二种方式&#xff1a;pyCharm中手动选择进行安装 二、 myqr.run() 函数里面的参数 三、编写代码 # encodingutf-8 from MyQR import myqrmyqr.run(words"https://blog.csdn.net/weixin_448…
阅读更多...
地址选择控件开发-

地址选择控件开发-

先睹为快 闲话少说&#xff0c;我们先来看看今天我们研究的控件的最终效果图(参照天猫的送货地址设置的效果)&#xff1a; “地址选择Web控件”的基本组成&#xff1a; 使用控件举例&#xff1a; <!--需要加载和引用的文件--> <link rel"stylesheet" href&q…
阅读更多...
逻辑回归(logistic regression)的本质——极大似然估计

逻辑回归(logistic regression)的本质——极大似然估计

文章目录1 前言2 什么是逻辑回归3 逻辑回归的代价函数4 利用梯度下降法求参数5 结束语6 参考文献1 前言 逻辑回归是分类当中极为常用的手段&#xff0c;因此&#xff0c;掌握其内在原理是非常必要的。我会争取在本文中尽可能简明地展现逻辑回归(logistic regression)的整个推导…
阅读更多...
使用mongoose 在 Node中操作MongoDB数据库

使用mongoose 在 Node中操作MongoDB数据库

MongoDB 关系型和非关系型数据库 关系型数据库&#xff08;表就是关系&#xff0c;或者说表与表之间存在关系&#xff09;。 所有的关系型数据库都需要通过sql语言来操作所有的关系型数据库在操作之前都需要设计表结构而且数据表还支持约束 唯一的主键默认值非空 非关系型…
阅读更多...
pip install时发生raise ReadTimeoutError(self._pool, None, 'Read timed out.')的解决方案

pip install时发生raise ReadTimeoutError(self._pool, None, 'Read timed out.')的解决方案

问题描述 在windows下&#xff0c;python在安装一些包的时候&#xff0c;常常会碰到time out的情况&#xff0c;如下图所示。不管再重试几次都是如此&#xff0c;这时候该怎么办呢&#xff1f; 解决方案 方案一&#xff1a;更换安装源&#xff08;推荐使用豆瓣源&#xff09…
阅读更多...
使用Node 操作MySQL数据库

使用Node 操作MySQL数据库

1. 安装 官方文档&#xff1a;https://www.npmjs.com/package/mysql npm install --save mysql2.代码演示 var mysql require(mysql);// 1.创建连接 var connection mysql.createConnection({host : localhost,user : root,password : root,database : my_db …
阅读更多...
利用随机森林对特征重要性进行评估

利用随机森林对特征重要性进行评估

文章目录1 前言2 随机森林&#xff08;RF&#xff09;简介3 特征重要性评估4 举个例子5 参考文献1 前言 随机森林是以决策树为基学习器的集成学习算法。随机森林非常简单&#xff0c;易于实现&#xff0c;计算开销也很小&#xff0c;更令人惊奇的是它在分类和回归上表现出了十…
阅读更多...
Promise学习——解决回调地狱问题

Promise学习——解决回调地狱问题

Promise promise 容器概念&#xff1a; callback hell&#xff08;回调地狱&#xff09;: 文件的读取无法判断执行顺序&#xff08;文件的执行顺序是依据文件的大小来决定的&#xff09;(异步api无法保证文件的执行顺序) var fs require(fs);fs.readFile(./data/a.text,ut…
阅读更多...
基于哈希表的索引堆变形（Hackerrank: QHEAP1）

基于哈希表的索引堆变形（Hackerrank: QHEAP1）

问题来源 此题来自于Hackerrank中的QHEAP1问题&#xff0c;考查了对堆结构的充分理解。成功完成此题&#xff0c;对最大堆或者最小堆的基本操作实现就没什么太大问题了。 问题简述 实现一个最小堆&#xff0c;对3种类型的输入能给出正确的操作&#xff1a; “1 v” - 表示往…
阅读更多...
Node 中的path模块

Node 中的path模块

参考文档&#xff1a;https://nodejs.org/docs/latest-v13.x/api/path.html path模块中的常用API&#xff1a; path.basename&#xff1a;获取路径的文件名&#xff0c;默认包含扩展名path.dirname&#xff1a;获取路径中的目录部分path.extname&#xff1a;获取一个路径中的扩…
阅读更多...
Node中的fs模块

Node中的fs模块

1.fs.stat检测是文件还是目录 2.fs.mkdir创建目录 3.fs.writeFile创建写入文件 4.fs.appendFile追加文件 5.fs.readFile 读取文件 6.fs.readdir读取目录 7.fs.rename重命名 8.fs.rmdir删除目录 9.fs.unlink 删除文件 fs.stat 检测是文件还是目录 const fs require(fs)fs.stat…
阅读更多...
主成分分析（PCA）和基于核函数的主成分分析（KPCA）入门

主成分分析（PCA）和基于核函数的主成分分析（KPCA）入门

文章目录1 前言2 PCA的原理2.1 什么是投影2.2 投影后的方差2.3 转化为求特征值的问题2.4 符号的表示3 KPCA的原理4 PCA和KPCA在Python中的使用4.1 PCA的使用4.2 KPCA的使用5 参考文献1 前言 主成分分析是在做特征筛选时的重要手段&#xff0c;这个方法在大部分的书中都只是介绍…
阅读更多...
算法分类整理+模板①：矩阵快速幂

算法分类整理+模板①：矩阵快速幂

一直有一个想法&#xff0c;感觉自己很多基础算法不是很扎实&#xff0c;想要找个机会写一些算法的整理&#xff0c;顺便自己总结一些实用的模板。 最近偶然在训练赛中连续做了2道思维矩阵快速幂的题目&#xff0c;碰巧有时间&#xff0c;就以矩阵快速幂作为这个系列博客的开始…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023