位置: 编程技术 - 正文

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)

  • 新领的发票怎么分发
  • 购进货物支付的运输费用如何计算增值税
  • 公司间借款利息增值税进项能否抵扣
  • 分公司能享受小微企业所得税优惠吗
  • 企业所得税按月还是按季度申报
  • 出租不动产房屋交什么税
  • 发票抵扣联认证抵扣分录
  • 公司注册前发生费用没有发票怎么办
  • 生产质量问题报告怎么写
  • 营改增后向境外提供有偿服务是否需要缴纳增值税?
  • 可以把两张发票合写在记账凭证上吗
  • 出口退税要交企业所得吗
  • 个人股权转让是否先分红
  • 权益性投资损失包括哪些
  • 如何根据原始凭证填制记账凭证
  • 小微企业所得税减免政策2023
  • 代为持股有没有法律效应
  • 出口退税款的账户是什么
  • 没有收到发票的费用怎么入账
  • 收入记借方
  • 员工的餐费补助怎么算
  • 公司收到供应商的律师函
  • PHP:Memcached::touchByKey()的用法_Memcached类
  • 预提收入的会计处理方法
  • php __invoke
  • 耕地使用税的征收标准
  • 业务招待费能不能计入销售费用
  • 联想thinkpad l380yoga
  • 跨省不动产登记
  • clh锅
  • edge 状态栏
  • 基于stm32的毕业设计
  • ctf题目网站
  • javascript猜数字游戏+表单
  • sockas
  • 增值税专用发票进项
  • 购买二手设备
  • 退休认证在网上怎么操作
  • 帝国cms源码
  • 研发失败能做加工企业吗
  • 当月利息发票未开可以先入账吗
  • 可以现金结算的业务
  • 折旧费属于什么总账科目
  • 损益类科目全部科目
  • 预提费用在汇算清缴时调整,会计分录怎么做
  • 混合销售举例说明
  • 开发成本属于哪一类科目
  • 出口退回的增值税计入哪个会计科目
  • 预收租金会计分录科目
  • 非正常损失的原因是什么
  • 账户利息计入什么科目
  • 购入原材料结转成本怎么算
  • 预收租金的增值税
  • 建账有哪些步骤,每个步骤有哪些注意事项
  • win7的运行命令在哪里
  • windows写字板功能
  • image driver
  • winxp开启远程控制
  • win7系统无法打开任务管理器
  • win7系统网页无法调用摄像头
  • linux修改22端口号
  • oracle linux版
  • jquery的用处
  • android 自定义
  • JavaScript的21条基本知识点
  • Android HandlerThread 实例
  • android设计模式总结
  • python xml dom
  • 使用的英文
  • javascript详细介绍
  • javascript的dom
  • js字符串的操作方法
  • 基于python的研究
  • 农商银行股权分红如何计算
  • 办完营业执照多久可以开抖音小店
  • 金税盘显示证书口令错误
  • 甘肃税务局电子税务局官网电子发票怎么查询
  • 湖北中税网控股股份有限公司
  • 文件印发的格式怎么设置
  • 请问在哪里可以看到
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设