注意:以下代码请在Firefox 3.5、Chrome 3.0、Safari 4之后的版本中进行测试。IE8的实现方法与其他浏览不同。

跨域请求,顾名思义,就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见,比如说通过 style 标签加载外部样式表文件、通过 img 标签加载外部图片、通过 script 标签加载外部脚本文件、通过 Webfont 加载字体文件等等。默认情况下,脚本访问文档属性等数据采用的是同源策略(Same origin policy)。

那么,什么是同源策略呢?如果两个页面的协议、域名和端口是完全相同的,那么它们就是同源的。同源策略是为了防止从一个地址加载的文档或脚本访问或者设置从另外一个地址加载的文档的属性。如果两个页面的主域名相同,则还可以通过设置 document.domain 属性将它们认为是同源的。

随着 Web2.0 和 SNS 的兴起,Web 应用对跨域访问的需求也越来越多,但是,在脚本中进行跨域请求是受安全性限制的,Web 开发人员迫切需要提供一种更安全、方便的跨域请求方式来融合(Mashup)自己的 Web 应用。这样做的一个好处就是可以将请求分摊到不同的服务器,减轻单个服务器压力以提高响应速度;另外一个好处是可以将不同的业务逻辑分布到不同的服务器上以降低负载。

值得庆幸的是,跨域请求的标准已经出台,主流浏览器也已经实现了这一标准。W3C 工作组中的 Web Applications Working Group(Web 应用工作组)发布了一个 Cross-Origin Resource Sharing(跨域资源共享,该规范地址:http://www.w3.org/TR/access-control/和http://dev.w3.org/2006/waf/access-control/) 推荐规范来解决跨域请求的问题。该规范提供了一种更安全的跨域数据交换方法。具体规范的介绍可以访问上面提供的网站地址。值得注意的是:该规范只能应用在类似 XMLHttprequest 这样的 API 容器内。IE8、Firefox 3.5 及其以后的版本、Chrome浏览器、Safari 4 等已经实现了 Cross-Origin Resource Sharing 规范,已经可以进行跨域请求了。

Cross-Origin Resource Sharing 的工作方式是通过添加 HTTP 头的方法来判断哪些资源允许 Web 浏览器访问该域名下的信息。然而,对于那些 HTTP 请求导致用户数据产生副作用的请求方法(特别是对于除了GET、某些 MIME 类型的 POST 之外的 HTTP方法),该规范要求浏览器对请求进行“预先验”,通过发送 HTTP 的 OPTIONS 请求头询问服务器有哪些支持的方法,在征得服务器的同意后,再使用实际的 HTTP 请求方法发送实际的请求。服务器也可以通知客户端是否需要将验证信息(如 Cookie 和 HTTP Authentication 数据)随同请求一起发送。

下面我们就采用实际的例子说明 Cross-Origin Resource Sharing 是如何工作的。

1,简单请求

什么样的请求算是简单请求呢?简单请求必须满足下面2点:
a,只使用 GET、POST 进行的请求,这里的POST只包括发送给服务器的数据类型(Content-Type)必须是 application/x-www-form-urlencoded、multipart/form-data 或者 text/plain中一个。
b,HTTP 请求没有设置自定义的请求头,如我们常用的 X-JSON。

先使用下面的代码进行测试:

[xhtml] view plain copy
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <htmlxmlns="http://www.w3.org/1999/xhtml">
  4. headtitle>孟宪会之AJAX跨域请求测试</bodyinputtype='button'value='开始测试'onclick='crossDomainRequest()'/>
  5. divid="content">divmce:scripttype="text/javascript"><!--
  6. varxhr=newXMLHttpRequest();
  7. varurl='http://dotnet.aspx.cc/SimpleCrossSiteRequests.aspx';
  8. functioncrossDomainRequest(){
  9. document.getElementById("content").innerHTML="开始……";
  10. if(xhr){
  11. xhr.open('GET',url,true);
  12. xhr.onreadystatechange=handler;
  13. xhr.send();
  14. }else{
  15. document.getElementById("content").innerHTML="不能创建XMLHttpRequest";
  16. }
  17. }
  18. functionhandler(evtXHR){
  19. if(xhr.readyState==4){
  20. if(xhr.status==200){
  21. varresponse=xhr.responseText;
  22. document.getElementById("content").innerHTML="结果:"+response;
  23. }else{
  24. document.getElementById("content").innerHTML="不允许跨域请求。";
  25. else{
  26. document.getElementById("content").innerHTML+="br/>执行状态readyState:"+xhr.readyState;
  27. //--mce:scripthtml>

然后,在服务器创建 CrossDomainRequest.aspx 的内容如下:

copy

AJAXXMLHttpRequest进行跨域请求方法详解的更多相关文章

  1. AmazeUI 折叠面板的实现代码

    这篇文章主要介绍了AmazeUI 折叠面板的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 有关HTML5页面在iPhoneX适配问题

    这篇文章主要介绍了有关HTML5页面在iPhoneX适配问题,需要的朋友可以参考下

  3. Html5百叶窗效果的示例代码

    本篇文章主要介绍了Html5百叶窗效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  4. html5中使用hotcss.js实现手机端自适配的方法

    这篇文章主要介绍了html5中使用hotcss.js实现手机端自适配的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  5. IOS 10.2简单警报和徽章上的UserNotifications问题

    徽章问题我也试过在我的应用程序图标上实现了一个很好的标记,直到我试图删除它.这是执行它的功能:现在它没有增加徽章编号,因为它的名称应该建议,但它只是将徽章编号设置为1.文档说如果你将content.badge设置为0,它会删除它,但这不起作用.我尝试使用其他数字,当我手动将其更改为“2”,“3”等时……

  6. swift QQ聊天界面 cell 的计算

    ;/***是否隐藏时间*/varhideTime:Bool?.font=UIFont;//设置文本距离UIButton的边距_content.contentEdgeInsets=UIEdgeInsetsMake//填充背景if(chatMessageModel?.sourceId==7){//7是本人,暂时先写成硬编码bgImage.image=UIImage;}else{bgImage.image=UIImage;}//算内容所占的空间if(chatMessageModel?.hideTime==1){

  7. Swift学习笔记2网络数据交换格式XML,JSON解析 [iOS实战 入门与提高卷]

    示例文档Notes.xml创建XMLParser类调用与运行结果用TBXML来解析XML文档TBXML是第三方框架,使用起来比NSXML更简单。

  8. swift – 用户通知3天后重复每天/小时 – iOS 10

    UIlocalnotification已被折旧,因此我想将我的代码更新为UserNotification框架:在等待初始通知后,如何使用UserNotification框架设置类似的每日或每小时重复?看起来这似乎不受支持,但为了制定解决方法,您可以使用:与didReceive(_:withContentHandler:)结合使用,您可以使用:我知道这不是最佳的,但它应该不使用已弃用的类/方法.您使

  9. swift – iOS / FCM – 如何使用Payload中的图像名称将XCAsset文件夹中的图像显示为通知附件?

    实际上,来自有效载荷的键/值“attch”:“7a”是天气图像的代码,作为附件显示在通知中.我已将所有图像保存在我的xcassets文件夹中我需要:>获取通知中收到的图像名称>在xcassets文件夹中获取关联的图像>将图像的PNG表示复制到FileManager(磁盘)>将其设置为通知的附件编辑:已解决!

  10. 重复本周特定日期的本地通知(Swift 3 IOS 10)

    我正在尝试为一周中的特定日期安排本地通知,然后每周重复一次.这是用于设置通知的屏幕的外观:用户可以选择通知时间和重复日期.我调度单个非重复通知的方法如下所示:日期组件从UIDatePicker小部件中提取并存储在提醒类中:我有一个数组selectedDays[Int]来保存通知应该触发的星期几的信息.如何在一周中的特定日期安排通知以及如何每周重复一次?

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部