AJAX跨域请求json数据的实现方法

前端技术 2023/09/03 JavaScript
我们都知道，AJAX的一大限制是不允许跨域请求。 不过通过使用JSONP来实现。JSONP是一种通过脚本标记注入的方式，它是可以引用跨域URL的js脚本，不过需要提供一个回调函数（必须在您自己的页面上），因此，你可以自己处理结果。 让我们看看JSONP的是怎么在jQuery，MooTools的，Dojo Toolkit中实现的。

jQuery的JSONP
jQuery.getJSON方法：

Js代码
复制代码 代码如下:

jQuery.getJSON(\"http://search.twitter.com/search.json?callback=?\",{
    q: \"Arsenal\"
},function(tweets) {
    // Handle response here
    console.info(\"Twitter returned: \",tweets);
});

或者 类似

Js代码
复制代码 代码如下:

$.ajax({
                type:\"get\",
                data:\"random=\"+Math.random(),
                url:url,
                dataType:\"jsonp\",
                jsonp:\"callback\",
                success:function(data){
                      $.each(data, function(key, val) {
                        $(\"#myDiv\").html($(\"#myDiv\").html()+val.cvalue+\"</br>\");
                      });
                }
            });

回调方法的参数 通过getJSON 就可以获取 到json对象

MooTools JSONP
MooTools 需要Request.JSONP Class , 可以从这里下载MooTools More .  选择Request.JSONP,
这样 从另一个域获取json就是小菜一碟了.

Js代码
复制代码 代码如下:

new Request.JSONP({
    url: \"http://search.twitter.com/search.json\",
    data: {
        q: \"Arsenal\"
    },//提交的参数, 没有参数可以不写
        callbackKey: \'jsoncallback\',//自己定义回调函数的参数名称
        onComplete: function(tweets) {
        // Log the result to console for inspection
        console.info(\"Twitter returned: \",tweets);
    }
}).send();

如果自己定义了回调函数的参数名称. 跟jquery一样.

服务器端你需要这样去取得:

Js代码
复制代码 代码如下:

String callback = request.getParameter(\"jsoncallback\");//取得回调方法名
        response.setHeader(\"Cache-Control\", \"no-cache\");
        response.setContentType(\"text/json;charset=UTF-8\");
        PrintWriter out;
        try {
            out = response.getWriter();
            out.print(callback+\"(\"+message+\")\");//这里是关键.主要就是这里
            out.flush();
            out.close();
        } catch (IOException e) {
            e.printStackTrace();
        }

顺便说一句: 个人比较喜欢mootools的语法结构,和框架设计思路. 再次赞美!

Dojo JSONP
JSONP 在Dojo Toolkit 中需要用上dojo.io.script (点击可以查看示例)

 
Js代码
复制代码 代码如下:

// dojo.io.script is an external dependency, so it must be required
dojo.require(\"dojo.io.script\");

// When the resource is ready
dojo.ready(function() {

    // Use the get method
    dojo.io.script.get({
        // The URL to get JSON from Twitter
        url: \"http://search.twitter.com/search.json\",
        // The callback paramater
        callbackParamName: \"callback\", // Twitter requires \"callback\"
        // The content to send
        content: {
            q: \"Arsenal\"
        },
        // The success callback
        load: function(tweetsJson) {  // Twitter sent us information!
            // Log the result to console for inspection
            console.info(\"Twitter returned: \",tweetsJson);
        }
    });
});

JSONP是一种非常有效的，可靠的，容易实现的远程数据获取方式。JSONP的策略也使开发人员能够避免繁琐的服务器代理方式,很方便的获取数据。 你可以自己写一个试试

本文地址：https://www.stayed.cn/item/8471

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案