jQuery的jsonp跨域是这么回事.

实现跨域请求的有iframe,img,script中的src属性.
那么jquery是如何解决跨域请求的呢?

一:
项目jsonp2中有个app.js文件,代码如下:

function app(json){

    alert(json['name']);

}

项目jsonp1中的index.html

<script type="text/javascript" src="http://127.0.0.1:8020/jsonp2/js/app.js"></script>

<script type="text/javascript">

    app({'name':"guoyansi",'age':25});

</script>

执行结果:
这里的app方法并没有申明,怎么就能调用了呢?
这里的第一个script出现了跨域请求,src指向的是jsonp2中的app.js
而在app.js中申明了app方法.
我们现在在火狐中查看index.html的源码,点开app.js的script

结论:从外部引入的app.js最终会被加载到浏览器中,渲染成这样:

<script type="text/javascript">

    function app(json){

    alert(json['name']);

}

</script>

根据上面的结论
我们如果利用script跨域向后台发送一个请求,
我们在后端返回一段js代码,前端不就可以调用了吗?
现在我们来验证假设.
我们用java为例子:
新建javaweb项目并且新建一个servlet,
这个servlet返回一个js代码;

package servelt;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class Jsonp2 extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        response.setContentType("text/javascript;charset=utf-8");//jsonp其实回写的就是一段javascript代码

        //或者:response.setContentType("text/plain;charset=utf-8");

        PrintWriter out = response.getWriter();

        out.print("app({'name':'思思博士','age':'25'})");

        out.flush();

        out.close();

    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        doGet(request, response);

    }

}

新建另外一个项目并且新建一个index.html页面

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <script type="text/javascript">

            function app(json){

                console.log(json);

            }

        </script>

        <script type="text/javascript" src="http://192.168.6.130:8080/jp/Jsonp2"></script>

    </head>

    <body>

    </body>

</html>

上面的第二个script直接执行了这个新的项目上的servlet.
并且最终被浏览器解析成如下格式:

<script type="text/javascript">

    app({'name':'思思博士','age':'25'})

</script>

index.html最终的页面变成这个样子:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <script type="text/javascript">

            function app(json){

                console.log(json);

            }

        </script>

        <script type="text/javascript">

            app({'name':'思思博士','age':'25'})

        </script>

    </head>

    <body>

    </body>

</html>

上面的代码我想大家都知道是怎么执行的了吧.
上面的代码返回的js代码的方法调用时时在服务器端写死的.我们也可以从客户顿指定要返回的反法调用名.
修改servlet:

package servelt;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class Jsonp2 extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        response.setContentType("text/javascript;charset=utf-8");//jsonp其实回写的就是一段javascript代码

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

        PrintWriter out = response.getWriter();

        out.print(appMethod+"({'name':'思思博士','age':'25'})");

        out.flush();

        out.close();

    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        doGet(request, response);

    }

}

在客户端指定要服务器要返回的js方法,添加appMethod参数,修改index.html.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <script type="text/javascript">

            function app(json){

                console.log(json);

            }

        </script>

        <script type="text/javascript" src="http://192.168.6.130:8080/jp/Jsonp2?appMethod=app"></script>

    </head>

    <body>

    </body>

</html>

上面的例子都是返回一段可执行的js代码,来调用本地的方法.
我们对上面的例子进行封装.java代码保持不变.

(function($){

    $.gys=function(opt){

        var scriptCode=(new Date()).getTime();

        //拼接script标签

        var html="<";

        html+="script id='script"+scriptCode+"' type='text/javascript' src='"+opt.src+"?"+opt.callbackName+"="+opt.callback+"'>";

        html+="<";

        html+"/script>";

        //申明一个全局的方法变量供远程返回的js方法的调用,方法名有callback指定

        window[opt.callback]=function(json){

            opt.success(json);//调用当前参数的方法

            $("#script"+scriptCode).remove();//删除script标签

        }

        $("head").append(html);//插入script标签

    }

})(jQuery);

调用:

$(function(){

    $.gys({

        callbackName:"appMethod",

        callback:"app",

        src:"http://192.168.6.130:8080/jp/Jsonp2",

        success:function(data){

            console.log(data);

        }

    });

});

看到这个有没有觉得和jquery的jsonp有点像了啊.
我们现在看看jquery的jsonp.
jsonp其实用的就是上面的原理

我们看看jquery的jsonp用法.

$.ajax({

    type:"get",//jsonp只能触发get请求

    url:""//跨域url

    dataType:"jsonp",

    jsonp:"",//对应上面封装的callbackName

    jsonpCallback:"",//对应上面封装的callback

    data:{},//提交参数

    beforeSend:function(){

        //jsonp 方式此方法不被触发。原因是这里已经不是ajax事件了.

    },

    success:funciton(data){

        //参数jsonpCallback的方法调用这里的success

    },

    error:function(){

        //这里不是ajax了,所以这个方法也不会触发.

    }

});

jquery中把jsonp和ajax整合在一起了具有一定的迷惑性,ajax是不具有跨域请求的,
另外jsonp使用的核心也不是ajax的xmlhttprequest,而是script的http请求(脚本注入的行为).
另外这样的jsonp是不具有post请求的.
$.getJSON()和$.getScript()都是jsonp的高级封装.

jQuery的jsonp跨域是这么回事.的更多相关文章

基于jQuery的Jsonp跨域[Get方式]
由于目前的项目需要无刷新的跨域操作数据,整理了下自己使用的基于jQuery的Jsonp跨域[Get方式]. 代码如下: Javascript部分 $(function(){ $.ajax({ asyn ...
PHP 支持 JQuery 的 JSONP 跨域访问
Jquery Ajax进行跨域时需要使用JSONP,但JSONP格式和JSON格式是有区别的,如果直接返回JSON格式就会报错首先将原有的Jquery代码中的dataType改成“jsonp”,具体 ...
jquery ajax jsonp跨域调用实例代码
今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友客户端代码复制代码代码如下: <%@ Page Lan ...
用jQuery实现jsonp跨域
跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成“跨域访问”的工作,然后在浏览器端用AJAX获取本机服务器端“跨域访问”对应 ...
JQuery+ajax+jsonp 跨域访问
Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料. 关于Jsonp更详细的资料请参考http://baike.baidu.com/ ...
php+ajax+jquery实现jsonp跨域
我们有这么个html文件test.html: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
jQuery ajax的jsonp跨域请求
一直在听“跨域跨域”,但是什么是跨域呢?今天做了一些了解.(利用jQuery的jsonp) jQuery使用JSONP跨域 JSONP跨域是利用script脚本允许引用不同域下的js实现的,将回调方法 ...
33、JSONP跨域
跨域请求数据也是可以的,只不过Ajax这技术不行,而JSONP这种数据格式可以进行跨域.很多年前,浏览器是没有跨域限制的,可以正常跨域,浏览器为了安全和隐私限制了Ajax跨域 JSONP原理就是:将函 ...
JSONP跨域原理和jQuery.getJSON用法
JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式).本文主要介绍JS ...

随机推荐

执行NET 命令无法使用超过20个字符的组名或用户名
https://support.microsoft.com/en-us/kb/324639 执行 net localgroup "Performance Monitor Users& ...
CI框架3.0关于session的设置改动及存数据库的使用方法
Session的设置跟之前有点不一样我们来看看2.0版本中的设置是什么样子的: $config['sess_cookie_name']= 'test_session'; $config['sess_ ...
计时器Chronometer和时钟（AnalogClock和DigitalClock）
计时器Chronometer和时钟(AnalogClock和DigitalClock) (1)Android提供了两个时钟组件:AnalogClock和DigitalClock,DigitalCloc ...
Hadoop学习地址
hortonworks: http://zh.hortonworks.com/hdp/downloads/ http://zh.hortonworks.com/hadoop-tutorial/supe ...
@Secured(), @PreAuthorize()
前面简单的提到过这两个注解的区别,那只是从配置以及原理上做的说明,今天,将从使用即代码层面加以说明这两个的使用注意事项! 首先, 若是自己实现用户信息数据库存储的话,需要注意UserDetails的函 ...
SQL SERVER 组内排序
取出每组的第一个 select *from (select * ,RANK ( ) OVER( PARTITION by org order by reportcode asc) PartionNum ...
nova分析（8）—— nova-compute
nova-compute是管理和配置虚拟机的入口,在所有compute机器上都需要该服务来创建和管理虚拟机. nova-compute服务的入口在 nova.cmd.compute:main ,其启动 ...
剑指offer系列28--字符流中第一个不重复的字符
[题目]请实现一个函数用来找出字符流中第一个只出现一次的字符.例如,当从字符流中只读出前两个字符”go”时,第一个只出现一次的字符是”g”.当从该字符流中读出前六个字符“google”时,第一个只出现 ...
find_in_set mysql
有个文章表里面有个type字段,他存储的是文章类型,有 1头条,2推荐,3热点,4图文 .....11,12,13等等现在有篇文章他既是头条,又是热点,还是图文, type中以 1,3,4的格式存 ...
Excel定位对象(按钮等)
手头只有2003,2007应该类似首先显示控件工具箱,进入设计模式.然后按Ctrl+G,在定位条件里选对象,确定.此时所有空间即被选中,按del可删除之.

jQuery的jsonp跨域是这么回事.

jQuery的jsonp跨域是这么回事.的更多相关文章

随机推荐

热门专题