ajax 跨域请求问题

原文

JQuery1.2后getJSON方法支持跨域读取json数据，原理是利用一个叫做jsonp的概念。当然，究其本质还是通过script标签动态加载js，似乎这是实现真正跨域的唯一方法。

getJSON的用法JQuery手册已经写得很详细，参考手册就可以了，很简单。需要指出的一点是getJSON利用的jsonp需要客户端与服务端作出配合。

  1. 客户端传递的URL里要包含callback变量，以形如callback=?的形式结尾。（jquery会随机生成一个字符串替换？传递给服务端）
  2. 服务端获取客户端传递的callback的值callbackValue，和需要传递的json字符串构成 callbackValue.’(’.json.’)'传回给客户端（示例为PHP字符串连接方式，其他语言类似）

不出意外的话应该已经可以跨域读取了。

同时输出json数据时候{之前的是(

的中，由于安全的问题，浏览器默认是不支持跨域调用的。传统的方法，包括：（参考http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/）

Local proxy:Needs infrastructure (can't run a serverless client) and you get double-taxed on bandwidth and latency (remote - proxy - client).Flash:Remote host needs to deploy a crossdomain.xml file,Flash is relatively proprietary and opaque to use,requires learning a one-off moving target programming langage.Script tag:Difficult to kNow when the content is available,no standard methodology,can be considered a "security risk".

以上方法都各有缺陷，都不是很好多解决方案。后来出现了一种叫JSON with Padding的技术，简称JSONP.（原理参考http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/），应 用JSONP可以实现JSON数据的跨域调用。非常的幸运，JQuery1.2以后支持JSONP的应用。下面侧重说明在JQuery中，Json的跨域调用。

应用JSONP实现Json数据跨域调用，需要端与客户端的合作完成。引用Jquery官方的例子，客户端掉用如下：

1 $.getJSON(" http://api.flickr.com/services/Feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=? ",
2 function(data){
3 $.each(data.items,(i,item){
4 $("<img/>").attr("src""#images");
5 if( i == 3 )returnfalse;
6 });
7 });

注意这里调用的地址中jsoncallback=?是关键的所在！其中，符号会被Query自动替换成其他的回调方法的名称，具体过程和原理我们这里不理 会。我们关心的是jsoncallback=?起什么作用了？原来jsoncallback=?被替换后，会把方法名称传给服务器。我们在服务器端要做什 么工作呢？服务器要接受参数jsoncallback，然后把jsoncallback的值作为JSON数据方法名称返回，比如服务器是,我们会这 样做：

...

String jsoncallback=request.getParameter("jsoncallback");

out.print(jsoncallback+"({\"account\":\"XX\",\"passed\":\"true\",\"error\":\"null\"})");

Jquery取得的可能如下：

JQUET0988788({"account":"XX","passed":"true","":"null"})

总结，用JSONP要做两件事：

1/请求地址加参数：jsoncallback=?

2/服务器段把jsoncallback的值作为方法名传回来，如JQUET098788(...)

jQuery从1.2开始就支持XMLHttp跨域请求了，具体怎么操作？

jQuery中跨域访问的核心原理：JS文件注入，因为因为script标签的src属性是可以跨域的，利用script标签的src属性直接返回非本域名下的数据，具体采用的方式称为：jsonp。

代码：
test.html，例如位于www.qq.com

01 <!DOCTYPE html PUBLIC "-//W3C//DTD 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02 <htmlxmlns="http://www.w3.org/1999/xhtml">
03 head>
04 Metahttp-equiv"Content-Type"content"text/html; charset=gb2312"/>
05 title>jQuery-跨域请求</06 scripttype"text/javascript"src"/js/jquery.js"></script07 </08 "text/javascript"09 jQuery(document).ready(function(){
10 $.ajax({
11 type : "GET",monospace!important; border:0px!important; outline:0px!important; text-align:right!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:2.7em!important; line-height:1.1em!important; font-size:10pt!important; min-height:inherit!important; display:block!important">12 url : "http://www.b.com/server.PHP&action=getmsg&callback=?",
13 dataType : "jsonp",monospace!important; border:0px!important; outline:0px!important; text-align:right!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:2.7em!important; line-height:1.1em!important; font-size:10pt!important; min-height:inherit!important; display:block!important">14 jsonp: 'callback',monospace!important; border:0px!important; outline:0px!important; text-align:right!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:2.7em!important; line-height:1.1em!important; font-size:10pt!important; min-height:inherit!important; display:block!important">15 success : function(json){
16 $('#msg_Box').html(json.msg);
17 return true;
18 }
19 });
20 21 22 body23 divid"msg_Box"div24 25 html>

server.PHP，例如位于 www.baidu.com
<?PHP
$action=$_GET['action'];
$callback[callback ];
()
{
echo"{$callback}({"msg":"this is a jquery jsonp test message!"})"exit();
}
else
{
error action!;
();
?>

ajax 跨域请求问题的更多相关文章

  1. html5录音功能实战示例

    这篇文章主要介绍了html5录音功能实战示例的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

  2. ios – CLGeocoder错误. GEOErrorDomain代码= -3

    有没有关于apple的地理编码请求的文档？谢谢你提前.更新这是我的整个代码请求解决方法在搜索到答案后,它在Apples文档中！

  3. 应用程序关闭时的iOS任务

    我正在构建一个应用程序,通过ajax将文件上传到服务器.问题是用户很可能有时不会有互联网连接,并且客户希望在用户重新连接时安排ajax调用.这可能是用户在离线时安排文件上传并关闭应用程序.应用程序关闭时可以进行ajax调用吗？

  4. ios – 调用异步方法的方法的单元测试

    我想我有这些代码行：我想为该代码编写一个单元测试.对于initializeHomeData和initializeAnythingElse,我可以编写单元测试,如：我的问题是,如何测试reset()？我应该在testReset()中调用它们,如：但我认为这不是适当的实施.解决方法你是对的.要测试重置,您需要调用reset,而不是内部方法.话虽这么说,重置目前的编写方式使其不可测试.您能够如此轻松地测

  5. swift - The Facade Pattern

    Facade（外观）模式为子系统中的各类提供一个简明一致的界面，隐藏子系统的复杂性，使子系统更加容易使用。

  6. swift - The Proxy Pattern

    我在实际工作中vc也仿照过Foundation的delegate：button：内涵业务逻辑，底层实现；每个button是一个类，业务逻辑需要未知的参数和处理之后未知的结果反馈UI：点击button之后界面的改变，UI实现未知的参数和未知的结果反馈，也就是实现这个代理这样以来UI的定制，很灵活很容易，代码思路依然清晰如初。哪个是主体哪个是代理并不重要关键是看定义所说whichisusedwhenanobjectisrequiredtoactasaninterfacetoanotherobjectorres

  7. Swift学习: 从Objective-C到Swift

    希望这篇文章能够帮助已经有Objective-C经验的开发者更快地学习Swift。我们熟悉的Objective-C特性在Swift中如何展现。从Objective-C到Swift的进步改进。然后值得注意的是,在Objective-C中,我们可以跨过property直接与instancevariable打交道,而在Swift是不可以的。ASwiftpropertydoesnothaveacorrespondinginstancevariable,andthebackingstoreforapropertyi

  8. Swift - 自定义函数规则说明

    如果要改变参数的值，就需要在定义函数的时候加上关键字var。789101112age=22add//无法编译add{age+=1}//可以编译add{age+=1}6，如果想要同时改变函数内外的参数值，可以利用inout关键字，同时调用函数的时候给参数加上前缀“&”addprint//23inout){}7，可以使用函数类型的参数10additive(a:ottom:auto!important;font-family:Consolas,b:a+b}//函数类型的参数printAdditiveResult

  9. Swift - 类初始化和反初始化方法init与deinit

    important;font-family:Consolas,newAge:32)print2，deinit()：类反初始化方法11DBClass{conn:Connection?=()deinit{//可以做一些清理工作.conn!.close().conn=nil}db:()db=nil//设置nil后即可执行deinit()方法

  10. Swift - 下标脚本方法介绍及实例

    定义下标脚本之后，可以使用“[]”来存取数据类型的值。123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960classSubString{varstr:String=""init{self.str=str;}/**下标脚本：获取/设置部分字符串**/subscript->String{get{return.substringWithRang

随机推荐

  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找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部