JavaScript之跨域请求解决方案 -

Lixh1986

浏览: 1111652 次

最近访客更多访客>>

Z865785437029

akingde

ningzong

蕃薯耀

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JavaScript之跨域请求解决方案

博客分类：

javaScript

javascript jsonp ajax 跨域请求

浏览器处于安全原因，在使用 Ajax 进行请求访问时，不允许跨域请求。
因为这涉及到（被浏览器添加在每次请求的请求头中的）Cookie 会被外域服务器读取到。

不过我们发现，Web页面上使用 script 标签加载js文件时则不受是否跨域的影响。也就是可以加载其它域名下的 javascript 文件。（不仅如此，我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>）；
基于此，实现跨域请求，只需要动态加载 js 文件就可以了。
但是动态加载 js 后，应该调用那个方法处理这些数据。我们只好把这个回调方法的名称以参数的形式传递给服务器。

这就是JSONP的实现原理：

1、动态的向页面中添加 src 属性为其它域名资源的 script 标签。
2、把回调方法写到 src 参数里，一起传递给服务器。
3、服务器在返回的 javascript 文件中，调用这个回调方法。

一、实现原理

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">

    // callback function.
    var flightHandler = function(data){
        console.log(data);
    };
    
    // 该 url 会返回一段 javascript 代码。
    var url = "http://remote.xx.com/xx?code=CA1998&callback=flightHandler";

    // 创建script标签
    var script = document.createElement('script');
    script.setAttribute('src', url);

    // 把script标签加入head，此时调用开始
    document.getElementsByTagName('head')[0].appendChild(script); 
    </script>
</head>
<body>

</body>
</html>

服务器端端返回值：

var obj = {
    "code": "CA1998",
    "price": 1780,
    "tickets": 5
};

flightHandler(obj);

为了不引起 obj 变量名冲突，写成 JSONP (JSON with Padding) 格式：

flightHandler({
    "code": "CA1998",
    "price": 1780,
    "tickets": 5
});

二、使用 JQuery 时，它把这种方式封装在了 ajax 方法中
但这绝不是 ajax 请求，实现原理不同。

$.ajax({
     type: "get",
     async: false,
     url: "http://remote.xx.com/xx?code=CA1998",
     dataType: "jsonp",
     jsonp: "callback",
     jsonpCallback:"flightHandler",
     success: function(data){
         console.log(data);
     },
     error: function(){
         alert('fail');
     }
 });

或

$.ajax({
     type: "get",
     async: false,
     url: "http://remote.xx.com/xx?code=CA1998",
     jsonp: "callback",
     jsonpCallback:"?", 
     success: function(data){
         console.log(data);
     },
     error: function(){
         alert('fail');
     }
 });

如果在 url 中含有 callback=? ，则 jquery 会认为是发送 jsonp 格式的请求。
并自动生成一个随机的回调函数名，传递给服务器。

JQuery 自动生成的 callback 方法名是如何调用 sucess 方法的？

$.ajax({
        url: 'http://url.of.my.server/submit',
        dataType: "jsonp",
        jsonp: 'callback',
        jsonpCallback: 'jsonp_callback'
    });

jsonp is the querystring parameter name that is defined to be acceptable by the server while the jsonpCallback is the javascript function name to be executed at the client.
When you use such url:

url: 'http://url.of.my.server/submit?callback=?'

the question mark ? at the end instructs jQuery to generate a random function while the predfined behavior of the autogenerated function will just invoke the callback -the sucess function in this case- passing the json data as a parameter.

$.ajax({
        url: 'http://url.of.my.server/submit?callback=?',
        success: function (data, status) {
            mySurvey.closePopup();
        },
        error: function (xOptions, textStatus) {
            mySurvey.closePopup();
        }
    });

The same goes here if you are using $.getJSON with ? placeholder it will generate a random function while the predfined behavior of the autogenerated function will just invoke the callback:

$.getJSON('http://url.of.my.server/submit?callback=?',function(data){
//process data here
});

引用

jsonpCallback
Type: String or Function()

Specify the callback function name for a JSONP request. This value will be used instead of the random name automatically generated by jQuery. It is preferable to let jQuery generate a unique name as it'll make it easier to manage the requests and provide callbacks and error handling. You may want to specify the callback when you want to enable better browser caching of GET requests. As of jQuery 1.5, you can also use a function for this setting, in which case the value of jsonpCallback is set to the return value of that function.

服务端返回数据的示例代码：

public void ProcessRequest (HttpContext context) {
	context.Response.ContentType = "text/plain";
	String callbackFunName = context.Request["callbackparam"];
	context.Response.Write(callbackFunName + "([ { name:\"John\"}])");
}

引用请注明，
原文出处：http://lixh1986.iteye.com/blog/2378307

-
引用：
http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html
http://api.jquery.com/jQuery.ajax/
https://stackoverflow.com/a/31087311/2893073

分享到：

JSP之 @include VS jsp:include | Responsive Web Design（自响应式网页设计 ...

2017-06-07 11:03
浏览 3969
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JavaScript之跨域请求解决方案

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JavaScript之跨域请求解决方案

评论

发表评论

相关推荐

Javascript 测试框架之 隐式声明 之 describe

JavaScript之ECMAScript6新特性之_03_箭头函数（Arrow Function）

JavaScript之ECMAScript6新特性之_02_线程异步阻塞: Promise, Async / await

JavaScript之ECMAScript6新特性之_01_开篇

jQuery Versions - browser support

基于HTML5实现的中国象棋游戏

JavaScript之 25 道面试题

JavaScript小应用之分页算法

jQuery之empty() VS. remove()

jQuery之 prop() VS. attr()

jQuery之mouseover,mouseover,mouseout,mouseleave

javascript之JS操作iframe

javascript之面向对象编程之原型继承

HTML5之Cookie,localStorage 与 sessionStorage

jquery之live(), delegate(), on() 方法

javascript之小应用：网页在线聊天

javascript之编程序题目

javascript之面向对象编程之属性继承

javascript 之 undefined

javascript之 == vs ===

最近访客更多访客>>

Javascript 测试框架之隐式声明之 describe