jquery跨域请求的原理

  • jquery 跨域请求什么实现?
  • jQuery  $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的.,$.getJSON是$.ajax()的封装,可以参考jquery aip 的$.getJSON部分。

    2、什么是 JSONP?

    JSONP(JSON with Padding-填充json数据也就是常用的json跨域方式):利用script标签,通过特定的src地址的调用,来执行一个客户端的js函数,在 服务器端生成相对的数据(json格式)并以参数的形式传递给这个客户端的js函数并执行这个函数,前提是需要服务器端的数据输出支持。

    3.为什么使用JSONP ?

    由于 JSON 只是一种含有简单括号结构的纯文本,因此许多通道都可以交换 JSON 消息。因为同源策略的限制,我们不能在与外部服务器进行通信的时候使用 XMLHttpRequest。而JSONP是一种可以绕过同源策略的方法,即通过使用 JSON 与 <script> 标记相结合的方法,从服务端直接返回可执行的JavaScript函数调用或者JavaScript对象。

    4、JSONP原理

    在 jQuery 1.2中,您可以通过使用JSONP形式的回调函数来加载其他网域的JSON数据,客户端传递的URL里要包含callback变量,如"myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。( 注意:此行以后的代码将在这个回调函数执行前执行),服务端获取客户端传递的callback的值,和需要传递的json字符串构成 callback+”(“json“)”  传回给客户端。

    再详细点

    (1)首先在客户端注册一个callback, 然后把callback的名字传给服务器,此时,服务器先生成 json 数据。 然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数callback

    (2)最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)

    5、先看看jQuery.ajax()方式,这种比较容易理解

    $.ajax({
                async:false,
                url: 'http://www.xxxxxxx.action',  // 跨域URL
                type: 'GET',
                dataType: 'jsonp',
                jsonp: 'callback', //默认callback,也就是URL后面所带的 url?callback=?
                data: mydata,
                timeout: 5000,
                beforeSend: function(){  //jsonp 方式此方法不被触发。原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了
                },
                success: function (json) { //客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数
                    if(json.actionErrors.length!=0){
                        alert(json.actionErrors);
                    }
                },
                complete: function(XMLHttpRequest, textStatus){
                    $.unblockUI({ fadeOut: 10 });
                },
                error: function(xhr){
                    //jsonp 方式此方法不被触发
                    //请求出错处理
                    alert("请求出错(请检查相关度网络状况.)");
                }
            });
           

    6、$.getJSON 方式

  •  $.getJSON("xxxxxx/user.html?callback=?", {},function(json){
    	if(json.errorFlag=="OK"){
    
    	}else{
    
    	}
     )};

    java 后台代码

    String callback = request.getParameter("callback");
    JSONObject ret =new JSONObject();
    ret.put("errorFlag", "OK");
    out.print(callback+ "(" + ret.toString() + ")");
  • 时间: 2024-08-28 05:15:09

    jquery跨域请求的原理的相关文章

    jQuery跨域请求,跨域Post提交数据的方法(.net/SQL技术交流群206656202 入群需注明博客园) - 思...

    jQuery跨域请求,跨域Post提交数据的方法(.net/SQL技术交流群206656202 入群需注明博客园) - 思... 无聊透顶,网上看看技术文章吸收下精华,无意中发现很多开发人员在跨域请求方面很是疑惑,本人整理了一下曾经写过的代码供苦苦寻找解决方案的IT人一点灵感,如果认为自己是高手呢那么您就可以潇洒的飘过了~~废话不说了免得招人烦~~ 一.get方式实现跨域请求 这里我使用jQuery.getJSON()函数实现      a站点 http://bj.xxxx.com.aspx 请

    jquery跨域请求json数据

    //服务端生成json数据json.php <?php $json=array("Volvo","BMW","SAAB"); $cb = $_GET['callback']; echo $cb.'('.json_encode($json, true).')'; ?> //客户端Ajax请求数据<script> $(document).ready(function() { var url="http://域名/js

    jquery跨域请求解决方案(我们寻找,我还没有添加验证)

    http://www.3lian.com/edu/2014/02-10/127921.html 本篇文章仅仅要是对jquery ajax跨域解决方法(json方式)进行了介绍,须要的朋友能够过来參考下,希望对大家有所帮助 近期公司开发的项目中非常多地方须要跨域ajax请求,比方几个子域名下 http://a.****.com/index123.aspx, http://b.****.com/index2.aspx 都要请求用户json信息,然后再对数据进行处理,起初我和同事们试了非常多种方法.使

    关于Jquery跨域请求php数据

    什么引起了ajax不能跨域请求的问题? ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,所以会警告. 跨域的安全限制都是指浏览器端来说的,服务器端是不存在跨域安全限制的.所以针对这2种情况衍生出2类跨域解决方案,一类是服务器端做中转类似代理方式,一类是js处理浏览器端的真正跨域访问. <script type="text/javascript" src="./jquery-1.6.4.min.j

    jquery跨域请求解决方案(都是从网上找的,本人未加验证)

    http://www.3lian.com/edu/2014/02-10/127921.html 本篇文章只要是对jquery ajax跨域解决方法(json方式)进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 最近公司开发的项目中很多地方需要跨域ajax请求,比如几个子域名下 http://a.****.com/index123.aspx, http://b.****.com/index2.aspx 都要请求用户json信息,然后再对数据进行处理,起初我和同事们试了很多种方法,使用$.

    jquery跨域请求jsonp

    服务端PHP代码  header('Content-Type:application/json; charset=utf-8'); $arr = array('a'=>1, 'b'=>2, 'c'=>3); $json = json_encode($arr); $callback = $_GET['callback']; echo $callback."($json)"; //注意callback是js那边传来的参数名称 js跨域请求的几种方式: 1,getJSON

    JQuery跨域请求

    javascript可跨域请求: <html> <head> <title>通过ajax调用WebService服务</title> <script> var xhr = new ActiveXObject("Microsoft.XMLHTTP"); function sendMsg(){ var name = document.getElementById('name').value; //服务的地址 var wsUrl =

    js Jquery 跨域请求问题解决

    Chrome报错:跨域问题处理( Access-Control-Allow-Origin)_ 用于本地测试的快捷解决方法 报错提示如下: XMLHttpRequest cannot load http://www.xxxx.com/264/Data/GetScreenInfo. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not a

    jsonp详解—javasript/jQuery跨域请求

    json相信大家都用的多,jsonp我就一直没有机会用到,但也经常看到,只知道是"用来跨域的",一直不知道具体是个什么东西.今天总算搞明白了.下面一步步来搞清楚jsonp是个什么玩意. 同源策略 首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性.看起来不知道什么意思,实践一下就知道了. 1.随便建两个网页 一个端口是2698,一个2701,按照定义它们是不同源的. 2.用jQuery发起不同源的请求 在2698端