六、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，一经查实，立即删除！

相关文章

LeetCode 474. Ones and Zeroes 动态规划解法+拓展

LeetCode 474. Ones and Zeroes 动态规划解法+拓展

问题来源 此题来源于LeetCode 474. Ones and Zeroes 在写这篇之前&#xff0c;我百度了一下这道题&#xff0c;发现已经有很多人写过这个问题了&#xff0c;然而大多数只是为了答题而答题&#xff0c;给出了代码&#xff0c;很少有文字解释的&#xff0c;也很少有深入拓展的。…
阅读更多...
常用的几种编程语言的介绍

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

编程语言&#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;无法添加注释…
阅读更多...
matlab如何建立一个空矩阵，然后往里面赋值

matlab如何建立一个空矩阵，然后往里面赋值

1 x1:0.1:10; 2 y[]; 3 for i1:length(x) 4 % y[y;x(i)];%把每一个x都放到Y里&#xff0c;成为一列 5 y[y,x(i)];%把每一个x都放到Y里&#xff0c;成为一行 6 end 转载于:https://www.cnblogs.com/sddai/p/5410821.html
阅读更多...
二、在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…
阅读更多...
决策树相关知识小结

决策树相关知识小结

前言 本文是一篇关于决策树方面知识的小结&#xff0c;不包含具体的例子&#xff08;想看例子推荐文献[1]的第4章&#xff09;&#xff0c;主要总结了ID3、C4.5和CART树三者的区别&#xff0c;剪枝处理&#xff0c;连续值和缺失值的处理。 决策树的基本算法 决策树的学习目的…
阅读更多...
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;出现了一种新的基…
阅读更多...
LeetCode547. Friends Circles 利用union find | bfs | dfs三种方法解决

LeetCode547. Friends Circles 利用union find | bfs | dfs三种方法解决

问题来源 此题来源于LeetCode547. Friend Circles&#xff0c;主要运用了并查集&#xff08;union find&#xff09;、广度优先遍历&#xff08;bfs&#xff09;和深度优先遍历&#xff08;bfs&#xff09;三种方法解决。 问题简述 给定一个NN的矩阵M表示了N个人之见的朋友关…
阅读更多...
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语言来操作所有的关系型数据库在操作之前都需要设计表结构而且数据表还支持约束 唯一的主键默认值非空 非关系型…
阅读更多...
回调和异步

回调和异步

// 回调函数&#xff1a;一个函数中调用传入的另一个函数 // 这里的callback就是个回调函数 function we(callback,something){something" is cool";callback(something); }function learn(something){console.log(something); }we(learn,"node.js"); //第…
阅读更多...
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;更令人惊奇的是它在分类和回归上表现出了十…
阅读更多...
个人博客总结3

个人博客总结3

一&#xff0e;昨天做了什么&#xff1f; 昨天利用安卓连接数据库完成一个图片的保存的程序例子&#xff0c;为我们的团队作业刷脸将人脸图片保存到数据中打下基础。 创建了一个相片和数据库保存和查询的工程创建了一个数据库然后将图片保存到数据库中&#xff0c;先将图片转化…
阅读更多...
最新文章

Copyright @ 2022~2023