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

我们都知道,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的策略也使开发人员能够避免繁琐的服务器代理方式,很方便的获取数据。 你可以自己写一个试试

(0)

相关推荐

  • jquery的ajax和getJson跨域获取json数据的实现方法

    很多开发人员在使用jquery在前端和服务器端进行数据交互,所以很容易会认为在前端利用jquery就可以读取任何站点的数据了.近日在进行开 发时,因为要和第三方公司的一个项目进行数据的共享,因为考虑多不占用服务器的资源,遂决定直接在html进行数据的读取,不走服务器端进行中转了.然后 正好就遇到了浏览器端跨域访问的问题. 跨域的安全限制都是指浏览器端来说的,服务器端不存在跨域安全限制的问题. 目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jso

  • 原生JS实现Ajax跨域请求flask响应内容

    Ajax方法好,网站感觉跟高大上,但由于Js的局限,跨域Ajax无法实现,这里,讲一下解决办法,前提是需要能够自己可以控制flask端的响应. 主要技术: 修改服务器相应的相应头,使其可以相应任意域名.and设置响应头,使其能够相应POST方法. 实现代码: 这里先放flask代码: from flask import make_response @app.route('/test',methods=['get','post']) def Test(): if request.method=='

  • js跨域和ajax 跨域问题的实现思路

    js 要跨域的话,可以用: <script src="别的网站的js地址(这里的内空可以是动态生成的,如:aaa.jsp.bbb.aspx)都可以."></script>这样是可以从别的网站里面读取出数据的. 关键是看你灵不灵活,会不会用了. ajax要跨域的话,可以用服务器去别的网站取内容,如asp.net的: 复制代码 代码如下: public string GetUrlData(string url) { System.Net.HttpWebRequest

  • 跨域请求之jQuery的ajax jsonp的使用解惑

    直接执行了error方法提示错误--ajax jsonp之前并没有用过,对其的理解为跟普通的ajax请求差不多,没有深入了解:出现了这种错误,几经调试(检查后台的代码和js部分的属性设置)还是不行,让我感觉很是意外和不解.于是,决定仔细研究下ajax jsonp的使用,并将最后测试成功的学习经验和大家分享下! 首先,贴出可以成功执行的代码: (页面部分) 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional

  • ajax跨域请求js拒绝访问的解决方法

    求解决办法 复制代码 代码如下: ajax{ url :"http://xxxx/app", type:"POST"; dataType:"json", } 不能用jsonp 因为jsonp发送数据 type 为 get type 必须为post url 不能加参 (例:http://xxxx/app?callback=aaa) 返回数据位json格式.求方法

  • Ajax跨域查询完美解决通过$.getJSON()实现

    原因:浏览器安全上做了限制,禁止ajax跨域获得数据. 解决方法:通过jquery提供的$.getJSON()可以跨域获得JSON格式的数据.优点:兼容性强. Java后台代码: 复制代码 代码如下: protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String callback =req.getParameter("cal

  • AJAX javascript的跨域访问执行

    突然感觉就是这里的问题,研究一下,搞定后其实觉得挺容易的,只是自己知识还是有些欠缺,解决方法如下: 阻塞的AJAX请求 我们先来证实一下请求的阻塞情况吧.我们使用如下的代码: 连续发起三个请求  复制代码 代码如下: function simpleRequest()  {     var request = new XMLHttpRequest();      request.open("POST", "Script.ashx");      request.sen

  • jquery ajax jsonp跨域调用实例代码

    客户端代码 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApp.WebForm1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:

  • jquery ajax跨域解决方法(json方式)

    最近公司开发的项目中很多地方需要跨域ajax请求,比如几个子域名下 http://a.****.com/index123.aspx, http://b.****.com/index2.aspx 都要请求用户json信息,然后再对数据进行处理,起初我和同事们试了很多种方法,使用$.ajax() 无论是get或post方法都会引起uri deny的错误.一番GG之后发现了解决方法,也了解其中的原因. jquery从1.2开始,.getJSON就支持跨域操作了.使用jquery.getJSON()方法

  • AJAX实现跨域的三种方法(代理,JSONP,XHR2)

    域: 域是WIN2K网络系统的安全性边界.我们知道一个计算机网最基本的单元就是"域",这一点不是WIN2K所独有的,但活动目录可以贯穿一个或多个域.在独立的计算机上,域即指计算机本身,一个域可以分布在多个物理位置上,同时一个物理位置又可以划分不同网段为不同的域,每个域都有自己的安全策略以及它与其他域的信任关系.当多个域通过信任关系连接起来之后,活动目录可以被多个信任域域共享. 由于在工作中需要使用AJAX请求其他域名下的请求,但是会出现拒绝访问的情况,这是因为基于安全的考虑,AJAX只

随机推荐