AJAX —— 学习(三)(完结)

目录

一、jQuery 中的 AJAX

(一)get 方法

1.语法介绍

2.结果实现

(二)post 方法

1.语法介绍

2.结果实现 

(三)通用型的 AJAX 方法

1.语法介绍

2.结果实现  

二、AJAX 工具库 axios

(一)介绍

(二)axios 发送 AJAX 请求

1.基本语法

2.get 方法

语法

3.post 方法

语法

4.axios 发送 AJAX 请求优点

(三)axios 函数发送 AJAX 请求

1.语法

三、使用 fetch() 函数发送 ajax 请求

四、跨域

(一)同源策略

1.介绍

2.代码例子

(二)跨域

(三)解决跨域

1.JSONP 请求

介绍

如何工作

 2.原生 JSONP 实现

 3.利用 jQuery 发送 jsonp 请求

4.CORS 跨域设置


一、jQuery 中的 AJAX

要先去bootCDN网站中引入 jQuery

(一)get 方法

1.语法介绍

语法如下,括号里面有三个参数

第一参数:向谁发请求

第二参数:发送什么参数 是一个对象类型

第三参数:回调函数内部是响应体 data 参数是接收到的响应体,在回调函数中可以对响应体 data 做一些操作

第四参数:响应体类型通常用 ‘json’ 可以将 json 字符串进行解析 变回原来类型

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

用 json 返回数组 不用返回字符串

a, b参数成功发过去了,响应体也正确

控制台输出也正确,可能有警告,在引入的javascript 标签加上一个属性就行 匿名的意思crossorigin="anonymous"

<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

(二)post 方法

1.语法介绍

参数看 get 方法

改成 post 就行 换成第二个按钮 eq(1) 其它都一样

但是查看请求体内容和 get 方法不一样,post 不会直接显示到 url 后面,而是显示到请求字符串中

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

(三)通用型的 AJAX 方法

1.语法介绍

和前两个方法不同,AJAX方法 参数是对象,而且 使用这个方法可以对 http 报文内部的很多属性进行修改,功能性比较强。

能进行定义的六个属性两个方法

第一属性 url:url 请求的对象

第二属性 data:发送的请求体内容 也是对象

第三属性 type:以什么方法发送 GET 类型 还是 POST 类型

第四属性 dataType:响应体结果设置 ‘json’ 类型

第五属性 timeout:设置超时时间

第六属性 header:设置自定义请求头,如果报错看之前笔记,有处理方法,是对象形式

方法一 success:回调函数 如果请求成功 成功可以对返回的响应体内容进行处理

方法二 error:回调函数 如果请求超时 就返回一个提示

 $('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('出错!')},// 设置自定义请求头header: {c:100,d:100}})})
2.结果实现  

查看结果:结果正确

设置延时后:

二、AJAX 工具库 axios

(一)介绍

前端热门的 AJAX 工具库,用来发送 AJAX 请求

要先去bootCDN网站中引入 axios

(二)axios 发送 AJAX 请求

比如:我们可以使用这个工具库 把 url 地址单独写出来

    axios.defaults.baseURL = 'http://127.0.0.1:8000'

然后下面就不用写了,但是得写后面的 /axios-server

1.基本语法

axios.请求方法名( url地址后面部分,{里面是发送的一些参数值,可以自己设置

params:{

这里是 url 后面的传入的参数值

}

headers:{

自定义请求头

}

}).then(value => {这里面处理服务器返回的响应体(这里使用了es6 promise 语法)

console.log(value)这里的 value 是对象 里面有很多属性 包括返回来的响应体 data 能自动转换成对象

})

2.get 方法
语法

get 方法没有请求体内容 所以就按基本语法来就行

<script>const btns = document.querySelectorAll('button')axios.defaults.baseURL = 'http://127.0.0.1:8000'btns[0].onclick = function () {axios.get('/axios-server', {params: {id: 100,vip: 100},headers: {name: 'haha',age: 18}}).then(value => {console.log(value)})}</script>

3.post 方法

相比于 get 方法 还可以设置 请求体 的内容 在下面 data 部分书写

行,头,体 结构很清晰 

注意结构 post 因为有响应体结构,响应体内容作为第二个参数传入进去

格式是这样的

语法

 axios.post(url地址,响应体内容,(其它内容)).then((value)=> {

处理响应体内容 value(是一个对象里面包括响应体)

})

  btns[1].onclick = function () {axios.post('/axios-server', {username: 'admin',password: 'admin'}, {params: {id: 100,vip: 100},headers: {name: 'haha',age: 18}}).then(value => {console.log(value)})}

结果成功返回

4.axios 发送 AJAX 请求优点

数据获取完整 value 里面有很多信息

包含 data 返回的响应体 而且是直接解析后的结果 (比如自动解析成对象)

头信息

请求的原生 ajax 对象

相应的状态码

和响应状态字符串

(三)axios 函数发送 AJAX 请求

1.语法

很简单很贴合 http 报文的格式

在 axios 里面直接写一个对象

axios({

method:’发送方法‘,

url:目标地址,

params:{

url 后缀参数

},

headers:{

自定义请求头

},

data:{

请求体

}

}).then(response=>{

返回内容 还是一个对象

内容很多可以挨个调用里面的参数使用 且都是解析好的

})

用自己的方法(一个函数来发送)

 btns[2].onclick = function () {axios({method: 'post',url: '/axios-server',params: {vip: 10,level: 30},headers: {a: 100,b: 200},data: {username: 'admin',password: 'admin'}}).then(response => {console.log(123)})}

 response对象中的具体内容:

状态码,响应状态字符串,响应头信息,响应体

可以用下面语句进行检查调用

结果正确

三、使用 fetch() 函数发送 ajax 请求

fetch() 属于全局变量,可以直接调用,不用去外部引用

有两个参数

一个参数是 url

另一个参数是一个对象

可以配置method发送方法 headers请求头 body请求体

返回的结果是一个 promise 对象 response 不能直接使用而是 先return response.text()

再使用一个then 方法 里面就能使用 响应体了

如果响应体是 json 字符串型 我们直接 把上面的 text() 变成 json() 就能把 json 自负床解析成正常的数据类型了

  btn.onclick = function () {fetch('http://127.0.0.1:8000/fetch-server', {method: 'post',headers: {name: 'hahah'},body: 'username=admin&password=admin'}).then(response => {return response.json()}).then(response => {console.log(response)})}

四、跨域

(一)同源策略

1.介绍

同一个来源,浏览器的一种安全机制

当前网页的 url 和 AJAX 请求目标资源 (服务器)的url 必须相同

就是 url(协议、域名、端口)必须完全相同 就 满足同源策略

AJAX 默认遵顼同源策略,如果不满足发不了 AJAX 请求

2.代码例子

如果 a.com 向 b.com 发送请求 就不属于同源

下面这个例子 页面和用户数据资源都是从 9000端口来的 属于同源,可以直接发送 ajax 请求

就是使用同一个服务

这时我们可以省略 url 前面的部分 只写 ‘/data’

<body><h1>哈哈</h1><button>点击获取用户数据</button><script>const btn = document.querySelector('button')btn.onclick = function () {const x = new XMLHttpRequest();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>

(二)跨域

违背同源策略就是跨域

a.com 向 b.com 发送请求

3000 端口 向 8000 端口发请求

http 协议向 https 协议发送请求

上面都属于跨域

跨域很常见 因为一台服务器不够我们使用 ,我们得添加多台主机服务器使用,有利于资源的划分,向不用服务器发送请求就会发生跨域

(三)解决跨域

外部引入的资源协议 域名 端口 都不一样,是一个跨域请求

  <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
1.JSONP 请求
介绍

JSONP 全称是 JSON with Padding 是非官方的跨域解决方案,只支持 get 请求

如何工作

借助 javascript 工作的

script 标签本身就具有跨域特性

通过返回一个函数调用,函数的实参就是我们想返回给客户端的数据

函数得提前声明,否则报错

让 js 进行解析就是 JSONP 的工作方法

 2.原生 JSONP 实现

借助script 向服务器发送一个请求,服务器返回一个 handle 函数的调用 浏览器收到后一看能执行就进行解析和调用,数据就处理了,实现了跨域

客户端:

<body>用户名:<input type="text" id="username"><p></p><script>const p = document.querySelector('p')const input = document.querySelector('input')function handle(data) {input.style.border = 'solid 1px #f00'p.innerHTML = data.msg}input.onblur = function () {let username = this.valueconst script = document.createElement('script')script.src = 'http://127.0.0.1:8000/check-username'document.body.appendChild(script)}</script>
</body>

服务端:

app.all('/check-username', (request, response) => {const data = {exist: 1,msg: '用户名已存在'}let str = JSON.stringify(data)response.send(`handle(${str})`)
})

 结果:

 3.利用 jQuery 发送 jsonp 请求

客户端代码:

 <script>$('button').eq(0).click(function () {$.getJSON('http://127.0.0.1:9000/jquery-jsonp-server?callback=?', function (data) {console.log(data)})})</script>

服务端代码:

const express = require('express')
const app = express()
app.all('/jquery-jsonp-server', (request, response) => {const data = {name: '地方',city: ['北京', '上海', '深圳']}let str = JSON.stringify(data)response.end(`handle(${str})`)
})
app.listen(9000, () => {console.log('服务已启动')
})

查看报文:

发现出现了一个 callback 值,是 jquery 注册的函数,回来返回这个函数的调用,前端就能对这个数据处理

在服务端加上下面的代码,把请求当中 url 中的 callback参数值 cb 取出 ,就是上一个图片中的字符串,它是一个函数

let cb = request.query.callback

 使用这个调回函数返回查看

  response.end(`${cb}(${str})`)

然后返回调用就变成下面的形式了

最后在客户端调用返回的数据 data 就是服务端的对象数据

<body><button>点击发送jsonp 请求</button><div id="result"></div><script>$('button').eq(0).click(function () {$.getJSON('http://127.0.0.1:9000/jquery-jsonp-server?callback=?', function (data) {$('#result').html(`名称:${data.name}<br>城市:${data.city}`)})})</script>
</body>

服务端完整代码:

const express = require('express')
const app = express()
app.all('/jquery-jsonp-server', (request, response) => {const data = {name: '地方',city: ['北京', '上海', '深圳']}let str = JSON.stringify(data)let cb = request.query.callbackresponse.end(`${cb}(${str})`)
})app.listen(9000, () => {console.log('服务已启动')
})

结果正确成功拿到结果

4.CORS 跨域设置

全称是跨域资源共享,是官方的解决方案,不同于 jsonp 是程序员自己弄出来的

不需要在客户端做操作 正常发 AJAX 请求,只在服务器中进行设置响应头就可以限制跨域

支持 get post 请求 其它也支持

客户端代码:

<script>const btn = document.querySelector('button')btn.onclick = function(){const x= new XMLHttpRequest();x.open('get','http://127.0.0.1:9000/cors-server')x.send()x.onreadystatechange = function () {if (x.readyState === 4) {if (x.status >= 200 && x.status < 300) {console.log(x.response)}}}}

服务端代码:

app.all('/cors-server', (request, response) => {response.send(`hello cors`)
})

运行报错:服务端没有返回 CORS 头报错

这是因为我们之前会加上报错红字里面的 access... 的 响应头来支持跨域,但是这次没加,看下面图片可知我们客户端是 file 协议 而 服务端 是http 协议,所以这属于一个跨域请求

我们像以前一样设置一个下面的允许跨域的响应头,允许谁向我发送请求

后面是设置允许访问的地址,* 就是允许所有地址跨域访问

response.setHeader('Access-Control-Allow-Origin', '*')

还有很多请求头可以设置,可以自己看看 就比如下面 写完下面两句话就能自定义请求头和方法不报错了 

  response.setHeader('Access-Control-Allow-Headers', '*')response.setHeader('Access-Control-Allow-Method', '*')

 问题解决

服务端改进代码:

app.all('/cors-server', (request, response) => {response.setHeader('Access-Control-Allow-Origin', '*')response.send(`hello cors`)
})

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

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

相关文章

idea开发 java web 高校学籍管理系统bootstrap框架web结构java编程计算机网页

一、源码特点 java 高校学籍管理系统是一套完善的完整信息系统&#xff0c;结合java web开发和bootstrap UI框架完成本系统 &#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 前段主要技术 css jq…

人工智能、深度伪造和数字身份:企业网络安全的新前沿

深度伪造&#xff08;Deepfakes&#xff09;的出现打响了网络安全军备竞赛的发令枪。对其影响的偏执已经波及到一系列领域&#xff0c;包括政治错误信息、假新闻和社交媒体操纵。 深度伪造将加剧公共领域对信任和沟通的本已严峻的压力。这将理所当然地引起监管机构和政策制定者…

Ubuntu22.04安装Anaconda

一、下载安装包 下载地址&#xff1a;https://www.anaconda.com/download#Downloads 参考&#xff1a;Ubuntu下安装Anaconda的步骤&#xff08;带图&#xff09; - 知乎 下载Linux 64-Bit (x86) installer 二、安装 在当前路径下&#xff0c;执行命令&#xff1a; bash Ana…

每日面经:计算机网络part1

1. 计算机网络的组成部分有哪些&#xff1f; a. 硬件设备&#xff1a;计算机网络由各种硬件设备组成&#xff0c;包括计算机、服务器、路由器、交换机、网卡等。这些设备通过物理连接&#xff08;如网线、光纤&#xff09;相互连接。 b. 协议&#xff1a;计算机网络中的通信需…

硬件项目开发过程详细介绍

对于很多未毕业的学生以及刚参加工作的工程师&#xff0c;经常弄不清楚硬件项目的开发过程&#xff1f;本文将通过详细的步骤来对硬件项目开发过程进行详细的介绍。 硬件项目开发是一个复杂而精细的过程&#xff0c;需要经过多个阶段来完成。在这个过程中&#xff0c;团队成员…

【智能排班系统】基于SpringSecurity实现登录验证、权限验证

文章目录 SpringSecurity介绍sss-security实现依赖工具类Jwt工具JSON响应工具加密工具类 用户上下文用户信息实体类用户上下文 自定义重写自定义无权限的报错自定义密码加密自定义用户类 过滤器登录过滤器权限过滤器 Service登录Service 配置类说明登录验证权限验证IP流量限制 …

【.Net】Polly

文章目录 概述服务熔断、服务降级、服务限流、流量削峰、错峰、服务雪崩Polly的基本使用超时策略悲观策略乐观策略 重试策略请求异常响应异常 降级策略熔断策略与策略包裹&#xff08;多种策略组合&#xff09; 参考 概述 Polly是一个被.NET基金会支持认可的框架&#xff0c;同…

在线监测系统在水厂水质管理工程中的应用与研究

【摘要】&#xff1a;随着水厂水质管理技术和管理水平的提升&#xff0c;达到了在线监测系统通过监测数据的反馈&#xff0c;及时发现问题&#xff0c;快速处理事故&#xff0c;优化了水资源的利用率&#xff0c;提高了供水系统的稳定性和安全性&#xff0c;从而有效地提高供水…

FX110网:菲律宾 eToro 发起人面临最高 21 年监禁的风险

任何在菲律宾推广 eToro 的“推销员、经纪人、经销商或代理商”将面临 500 万比索&#xff08;约 88,500 美元&#xff09;的罚款或最高 21 年的监禁&#xff0c;或两者并罚。据当地监管机构称&#xff0c;这是因为“无权在菲律宾向公众出售或发行证券”。 菲律宾证券交易委员会…

Springboot相关知识-图片描述(学习笔记)

学习java过程中的一些笔记&#xff0c;觉得比较重要就顺手记录下来了~ 目录 一、前后端请求1.前后端交互2.简单传参3.数组集合传参4.日期参数5.Json参数6.路径参数7.响应数据8.解析xml文件9.统一返回类10.三层架构11.分层解耦12.Bean的声明13.组件扫描14.自动注入 一、前后端请…

时序预测 | Matlab实现CPO-BiLSTM【24年新算法】冠豪猪优化双向长短期记忆神经网络时间序列预测

时序预测 | Matlab实现CPO-BiLSTM【24年新算法】冠豪猪优化双向长短期记忆神经网络时间序列预测 目录 时序预测 | Matlab实现CPO-BiLSTM【24年新算法】冠豪猪优化双向长短期记忆神经网络时间序列预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现CPO-BiLST…

由两个线路驱动器、两个线路接收器和双电荷泵电路组成的芯片D3232,主要用于工控主板、新能源充电桩等众多涉及RS232通讯的产品中

一、应用领域 D3232芯片主要用于工控主板、工业控制器、程序烧录下载器、仿真器、新能源充电桩等众多涉及RS232通讯的产品。 二、基本特性 D3232芯片由两个线路驱动器、两个线路接收器和双电荷泵电路组成&#xff0c;具有HBM>15kV、CDM>2kV的ESD保护能力&#xff0c;并且…

在线视频教育平台|基于Springboot的在线视频教育平台系统设计与实现(源码+数据库+文档)

在线视频教育平台目录 基于Springboot的在线视频教育平台系统设计与实现 一、前言 二、系统设计 三、系统功能设计 1、前台&#xff1a; 2、后台 用户功能模块 教师功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&a…

Vue - 3( 15000 字 Vue 入门级教程)

一&#xff1a;初识 Vue 1.1 收集表单数据 收集表单数据在Vue.js中是一个常见且重要的任务&#xff0c;它使得前端交互变得更加灵活和直观。 Vue中&#xff0c;我们通常使用v-model指令来实现表单元素与数据之间的双向绑定&#xff0c;从而实现数据的收集和更新。下面总结了…

Java Spring IoCDI :探索Java Spring中控制反转和依赖注入的威力,增强灵活性和可维护性

&#x1f493; 博客主页&#xff1a;从零开始的-CodeNinja之路 ⏩ 收录文章&#xff1a;Java Spring IoC&DI :探索Java Spring中控制反转和依赖注入的威力,增强灵活性和可维护性 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 目录 前提小知识:高内…

LeetCode-78. 子集【位运算 数组 回溯】

LeetCode-78. 子集【位运算 数组 回溯】 题目描述&#xff1a;解题思路一&#xff1a;回溯&#xff0c;回溯三部曲解题思路二&#xff1a;0解题思路三&#xff1a;0 题目描述&#xff1a; 给你一个整数数组 nums &#xff0c;数组中的元素 互不相同 。返回该数组所有可能的 子…

【SpringCloud】Nacos 注册中心

目 录 一.认识和安装 Nacos1.Windows安装1. 下载安装包2. 解压3. 端口配置4. 启动5. 访问 2.Linux安装1. 安装JDK2. 上传安装包3. 解压4. 端口配置5. 启动 二.服务注册到 nacos1. 引入依赖2. 配置 nacos 地址3. 重启 三.服务分级存储模型1. 给 user-service 配置集群2. 同集群优…

JavaWeb前端基础(HTML CSS JavaScript)

本文用于检验学习效果&#xff0c;忘记知识就去文末的链接复习 1. HTML 1.1 HTML基础 结构 头<head>身体<body> 内容 图片<img>段落<p>图标<link> 标签 单标签双标签 常用标签 div&#xff1a;分割块span&#xff1a;只占需要的大小p&…

从三个维度看,你的企业是否需要引入精益管理咨询?

在快速变化的商业环境中&#xff0c;企业不断寻求提升自身运营效率和竞争力的方法。其中&#xff0c;精益管理作为一种追求卓越、消除浪费的管理理念&#xff0c;被越来越多的企业所认可。但是&#xff0c;如何判断自己的组织是否需要进行精益企业管理咨询呢&#xff1f;天行健…

【漏洞复现】通天星CMSV6车载视频监控平台FTP匿名访问

Nx01 产品简介 通天星车载视频监控平台软件拥有多种语言版本&#xff0c;应用于公交车车载视频监控、校车车载视频监控、大巴车车载视频监控、物流车载监控、油品运输车载监控等公共交通上。 Nx02 漏洞描述 通天星车载视频监控平台安装完毕后会默认开放端口2121作为ftp服务使用…