位置: 编程技术 - 正文

JS实现的ajax和同源策略(实例讲解)

编辑:rootadmin

推荐整理分享JS实现的ajax和同源策略(实例讲解),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

一、回顾jQuery实现的ajax

首先说一下ajax的优缺点

优点:

AJAX使用Javascript技术向服务器发送异步请求;

AJAX无须刷新整个页面;

因为服务器响应内容不再是整个页面,而是页面中的局部,所以AJAX性能高;

jquery 实现的ajax

index.html

Views.py

$.ajax参数

请求参数

响应参数

小练习:计算两个数的和

方式一:这里没有指定contentType:默认是urlencode的方式发的

index.html

views.py

方式二:指定conentType为json数据发送:

index2.html

views.py

二、JS实现的ajax

1、AJAX核心(XMLHttpRequest)

其实AJAX就是在Javascript中多添加了一个对象:XMLHttpRequest对象。所有的异步交互都是使用XMLHttpServlet对象完成的。也就是说,我们只需要学习一个Javascript的新对象即可。

var xmlHttp = new XMLHttpRequest();(大多数浏览器都支持DOM2规范)

注意,各个浏览器对XMLHttpRequest的支持也是不同的!为了处理浏览器兼容问题,给出下面方法来创建XMLHttpRequest对象:

2、使用流程

1、打开与服务器的连接(open)

当得到XMLHttpRequest对象后,就可以调用该对象的open()方法打开与服务器的连接了。open()方法的参数如下:

open(method, url, async):

method:请求方式,通常为GET或POST;

url:请求的服务器地址,例如:/ajaxdemo1/AServlet,若为GET请求,还可以在URL后追加参数;

async:这个参数可以不给,默认值为true,表示异步请求;

var xmlHttp = createXMLHttpRequest();

xmlHttp.open("GET", "/ajax_get/&#;a=1", true); 

2、发送请求

当使用open打开连接后,就可以调用XMLHttpRequest对象的send()方法发送请求了。send()方法的参数为POST请求参数,即对应HTTP协议的请求体内容,若是GET请求,需要在URL后连接参数。

注意:若没有参数,需要给出null为参数!若不给出null为参数,可能会导致FireFox浏览器不能正常发送请求!

xmlHttp.send(null);

3、接收服务器的响应(5个状态,4个过程)

当请求发送出去后,服务器端就开始执行了,但服务器端的响应还没有接收到。接下来我们来接收服务器的响应。

XMLHttpRequest对象有一个onreadystatechange事件,它会在XMLHttpRequest对象的状态发生变化时被调用。下面介绍一下XMLHttpRequest对象的5种状态:

0:初始化未完成状态,只是创建了XMLHttpRequest对象,还未调用open()方法;1:请求已开始,open()方法已调用,但还没调用send()方法;2:请求发送完成状态,send()方法已调用;3:开始读取服务器响应;4:读取服务器响应结束。

onreadystatechange事件会在状态为1、2、3、4时引发。

下面代码会被执行四次!对应XMLHttpRequest的四种状态!

但通常我们只关心最后一种状态,即读取服务器响应结束时,客户端才会做出改变。我们可以通过XMLHttpRequest对象的readyState属性来得到XMLHttpRequest对象的状态。

其实我们还要关心服务器响应的状态码xmlHttp.status是否为,其服务器响应为,或,那么就表示请求失败了。我们可以通过XMLHttpRequest对象的status属性得到服务器的状态码。

最后,我们还需要获取到服务器响应的内容,可以通过XMLHttpRequest对象的responseText得到服务器响应内容。

需要注意的:

如果是post请求:

如果是get请求:

小练习:和上面的练习一样,只是换了一种方式(可以和jQuery的对比一下)

views.py

JS实现ajax小结

总结:

实例(用户名是否已被注册)

JS实现的ajax和同源策略(实例讲解)

7.1 功能介绍

在注册表单中,当用户填写了用户名后,把光标移开后,会自动向服务器发送异步请求。服务器返回true或false,返回true表示这个用户名已经被注册过,返回false表示没有注册过。

客户端得到服务器返回的结果后,确定是否在用户名文本框后显示“用户名已被注册”的错误信息!

7.2 案例分析

页面中给出注册表单;

在username表单字段中添加onblur事件,调用send()方法;

send()方法获取username表单字段的内容,向服务器发送异步请求,参数为username;

django 的视图函数:获取username参数,判断是否为“yuan”,如果是响应true,否则响应false

参考代码:

三、同源策略与jsonp

同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。

同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。jsonp(jsonpadding)

之前发ajax的时候都是在自己给自己的当前的项目下发

现在我们来实现跨域发。给别人的项目发数据,

创建两个项目,先来测试一下

项目一:

项目二:

出现了一个错误,这是因为同源策略给限制了,这是游览器给我们报的一个错

(但是注意,项目2中的访问已经发生了,说明是浏览器对非同源请求返回的结果做了拦截。)

注意:a标签,form,img标签,引用cdn的css等也属于跨域(跨不同的域拿过来文件来使用),不是所有的请求都给做跨域,(为什么要进行跨域呢?因为我想用人家的数据,所以得去别人的url中去拿,借助script标签)

如果用script请求的时候也会报错,当你你返回的数据是一个return Httpresponse(“项目二”)只是一个名字而已,js中如果有一个变量没有声明,就会报错。就像下面的这样了

只有发ajax的时候给拦截了,所以要解决的问题只是针对ajax请求能够实现跨域请求

解决同源策源的两个方法:

1、jsonp(将JSON数据填充进回调函数,这就是JSONP的JSON+Padding的含义。)

jsonp是json用来跨域的一个东西。原理是通过script标签的跨域特性来绕过同源策略。

思考:这算怎么回事?

借助script标签,实现跨域请求,示例:

所以只是单纯的返回一个也没有什么意义,我们需要的是数据

如下:可以返回一个字典,不过也可以返回其他的(简单的解决了跨域,利用script)

项目一:

项目二:

这样就会取到值了

这其实就是JSONP的简单实现模式,或者说是JSONP的原型:创建一个回调函数,然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递,完成回调。

将JSON数据填充进回调函数,这就是JSONP的JSON+Padding的含义。

但是以上的方式也有不足,回调函数的名字和返回的那个名字的一致。并且一般情况下,我们希望这个script标签能够动态的调用,而不是像上面因为固定在html里面所以没等页面显示就执行了,很不灵活。我们可以通过javascript动态的创建script标签,这样我们就可以灵活调用远程服务了。

解决办法:javascript动态的创建script标签

为了更加灵活,现在将你自己在客户端定义的回调函数的函数名传送给服务端,服务端则会返回以你定义的回调函数名的方法,将获取的json数据传入这个方法完成回调:

将视图views改为

四、jQuery对JSONP的实现

getJSON

jQuery框架也当然支持JSONP,可以使用$.getJSON(url,[data],[callback])方法

的views不改动。

结果是一样的,要注意的是在url的后面必须添加一个callback参数,这样getJSON方法才会知道是用JSONP方式去访问服务,callback后面的那个?是内部自动生成的一个回调函数名。

此外,如果说我们想指定自己的回调函数名,或者说服务上规定了固定回调函数名该怎么办呢?我们可以使用$.ajax方法来实现

$.ajax

的views不改动。

当然,最简单的形式还是通过回调函数来处理:

jsonp: 'callbacks'就是定义一个存放回调函数的键,jsonpCallback是前端定义好的回调函数方法名'SayHi',server端接受callback键对应值后就可以在其中填充数据打包返回了;

jsonpCallback参数可以不定义,jquery会自动定义一个随机名发过去,那前端就得用回调函数来处理对应数据了。利用jQuery可以很方便的实现JSONP来进行跨域访问。  

注意 JSONP一定是GET请求

五、应用

以上这篇JS实现的ajax和同源策略(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持积木网。

原生JS实现ajax与ajax的跨域请求实例 一、原生JS实现ajax第一步获得XMLHttpRequest对象第二步:设置状态监听函数第三步:open一个连接,true是异步请求第四部:send一个请求,可以发送一个对象

微信小程序实现鼠标拖动效果示例 本文实例讲述了微信小程序实现鼠标拖动效果。分享给大家供大家参考,具体如下:1、效果展示2、关键代码index.wxml文件viewclass="view"style="left:{{left}}px;to

利用babel将es6语法转es5的简单示例 前言Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否

标签: JS实现的ajax和同源策略(实例讲解)

本文链接地址:https://www.jiuchutong.com/biancheng/373308.html 转载请保留说明!

上一篇:微信小程序表单验证功能完整实例(微信小程序表单制作代码)

下一篇:原生JS实现ajax与ajax的跨域请求实例(实现原生的ajax)

  • 小规模修理修配的税率是多少
  • 带薪年假是入职就有还是要等一年以后
  • 工会刻章费用计入什么支出
  • 滴滴行程单修改器
  • 原材料月末有余额吗
  • 免征增值税项目记忆
  • 帮别人买交强险,受益人是我,有影响吗
  • 社会团体财务手册怎么写
  • 资本金利息收入算业务收入吗
  • 结转以前的其他业务成本如何做会计分录呢?
  • 在途物资材料采购的区别
  • 合同印花税如何做账
  • 公积金抵扣个税上限
  • 企业所得税退税怎么做账务处理
  • 个税负数怎么做账
  • 工资薪金总额包括职工福利费吗
  • 公司与政府协议
  • 企业员工差旅平台排行
  • 享受小型微利企业税收优惠的条件
  • 买股票的分红怎么拿
  • 金蝶怎么一次性删除所有分录
  • 专利代理费如何报销
  • 如何刷新手机
  • 苹果紧急提醒
  • iis配置mime
  • remind32.exe - remind32是什么进程 有什么用
  • Win10 1809 17763.2268 更新发布:附更新修复内容汇总
  • 分配股利什么时候做账
  • 企业所得税税款
  • fpassist.exe是什么进程 有什么作用 fpassist进程查询
  • PHP:mcrypt_enc_get_algorithms_name()的用法_Mcrypt函数
  • php解析原理
  • css盒子模型怎么做
  • shapecfg命令 管制网络设备的流量
  • 财政拨款结转的二级科目有哪些
  • Huggingface之transformers零基础使用指南
  • css隐藏元素的方式
  • php视频加水印
  • 织梦内容页模板修改
  • 领取营业执照后超过30天
  • 一般纳税人和小规模纳税人怎么界定
  • SQL高级应用之同服务器上复制表到另一数据库中并实现去重复
  • 库存暂估入账的会计分录
  • 银行卡频繁小额转账
  • 库存商品转成本意味着什么
  • 资产负债表日后非调整事项应当在附注中披露
  • 不动产计提折旧时间
  • 模具报价成本核算方法
  • 当月无销售要计提工资吗
  • 收到微信公众号反诈骗风险提示
  • 根据《物业管理条例》的规定,物业服务企业
  • 微信转账报销怎么退回
  • 本期应征增值税销售额是什么意思
  • 饭店的会计做账怎么做
  • 一分钟教你
  • 发票丢失了怎么报销
  • 成本核算应设置哪些会计账户
  • 商业企业会计制度变迁论文
  • windows10预览
  • freebsd中文手册
  • 怎么给网络设置防火墙
  • linux 配置中文
  • win7笔记本触摸板怎么用滑轮
  • windows10图标显示不出来
  • win8.1系统如何升级到win11
  • vs2019怎么用gets
  • jquery实现密码和确认密码
  • cocos2dx android游戏防破解总结
  • linux命令有啥用
  • shell 批量执行命令
  • opengl怎么用
  • jquery 选中
  • js必须掌握的知识点
  • android studio 安装好后怎么在桌面找到
  • 电子税务局怎么添加银行账户信息
  • 基层税务局长工作职责
  • 福建省税务局举报中心
  • 收到补税点的分录
  • 长春税务局电话举报
  • 联通怎么在网上营业厅更改套餐
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设