zoukankan      html  css  js  c++  java
  • 使用JSONP来取代AJAX进行跨域

    说到用JavaScript动态加载内容,一般都会想到AJAX。
    但AJAX所用的XML其实并非必须,还有其他类型的数据结构(例如JSON和HTML)也可以实现。
    而且AJAX有个很大的问题:由于JavaScript的安全限制,AJAX的跨域非常麻烦。
    但如果使用JSONP的话,问题就很容易搞定了。

    JSONP就是JSON with Padding的缩写,意思是JSON加上一些填充。
    那么究竟填充什么呢?这就要说下原理了。
    当使用script标签时,浏览器可以加载来自外域的JavaScript文件。而JSON本身就是一个JavaScript的对象,所以浏览器也可以直接加载它们。
    但单纯的加载毫无用处,因为JSON只是数据,我们还需要处理它。因此,假如用括号将JSON数据包围起来,然后传给一个JavaScript function,那这个function就能处理这个JSON数据了。
    因此从技术上来说,JSONP并不是数据,而是JavaScript代码,和JSON是2个稍有区别的东西。

    首先来看最简单的实现:
    客户端:

    <html>
     <head>
      <title>JSONP Test</title>
        <script>
            function test(text) {alert(text.hello);}
        </script>
        <script src="test.json"></script>
     </head>
     <body>
     </body>
    </html>

    服务器端(就是那个test.json)

    test({"hello": "hello world!"})

    在浏览器中打开这个页面,将会弹出一个对话框,内容是hello world!。

    事实上,我们的test.json文件就是个JavaScript文件,它调用test方法,并将其中的JSON数据({"hello": "hello world!"})作为参数。

    也就是说,JSONP就是一次函数调用而已,明白这点就好办了。
    不过动态加载当然不可能直接用script标签来做,但JavaScript是可以操作DOM的,所以我们只需要把script标签添加到DOM,就能实现动态加载了。

    当然,改写DOM是个很麻烦的过程,我们可以使用一些JavaScript库来实现,下面就给个jQuery和GAE的例子:
    客户端:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta name="author" content="keakon" /> 
      <title>JSONP Test</title>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("jquery", "1.3.1");
        </script>
     </head>
    
     <body>
     <script>
        $.getJSON("http://localhost:8080/?jsoncallback=?",
            function (json) {
                alert(json.text);
            }
        );
     </script>
     </body>
    </html>

    服务器端(本来是发在Google的论坛的,所以注释用的是英文,将就看吧):

    import wsgiref.handlers
    from google.appengine.ext import webapp
    
    class MainHandler(webapp.RequestHandler):
      def get(self):
    
        # Since browsers can't handle application/json as a text,
        # and actually, it's a JavaScript code, not JSON, while I request jsoncallback,
        # I use text/javascript to both display and process it.
        self.response.headers['Content-Type'] = 'text/javascript; charset=UTF-8'
    
        json = {"text": "Hello world!"} # the json data I want to output
        jsoncallback = self.request.get('jsoncallback') # the jsoncallback argument
    
        # if doesn't contain jsoncallback argument, simply output it
        # otherwise, it should output jsoncallback_argument(json data)
        # eg: hello({"text": "Hello world!"})
        output = '%s(%s)' % (jsoncallback, json) if jsoncallback else json
    
        self.response.out.write(output)
    
    def main():
      application = webapp.WSGIApplication([('/', MainHandler)])
      wsgiref.handlers.CGIHandler().run(application)
    
    if __name__ == '__main__':
      main()

    jQuery隐藏了很多实现,实际上它会自动判断jsoncallback=?,然后将?替换为一个随机生成的函数名(实际上就是我们的匿名函数),于是就形成了一次函数调用。

    注意jsoncallback不是必须的,只是jQuery需要它的名字类似callback
    而且大多数都遵循这个命名规则,所以JSONP也被叫作JSON with callbacks
    个人也比较喜欢后者,因为更加贴近其原理,而不是其表面现象(填充了函数名和括号的JSON)。
    当然,你可以更改这个函数名,但必须使用$.AJAX函数的jsonp参数来指定,$.getJSON函数是不提供这个参数的。

    还在为AJAX跨域苦恼的不妨试试JSONP吧,而且JSON本身比XML也方便很多。

    文章来自网络,个人收藏,如有冒犯敬请原谅!

  • 相关阅读:
    计算机代数系统Computer Algebra Software: Mathematica, Maxima, Pari/GP
    计算机代数系统对比:Computer Algebra Software: Mathematica, Maxima, Pari/GP
    搜索大质数的算法PHP版本【算法导论实践】
    使用maxima解决初等数论中的问题:
    练习使用文法剖析工具:
    反查字符的unicode码~
    Maxima Overview:
    Elementary number theory using Maxima
    Word文档结构图内容“越界”问题:
    Maxima, Maple, and Mathematica: the Summary~
  • 原文地址:https://www.cnblogs.com/wujilong/p/3066174.html
Copyright © 2011-2022 走看看