如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。意思就是远程服务端需要对返回的数据做下处理，根据客户端提交的callback的参数，返回一个callback(json)的数据，而客户端将会用script的方式处理返回数据，来对json数据做处理。JQuery.getJSON也同样支持jsonp的数据方式调用。下面演示关于jQuery处理跨域请求ajax的方式：

服务器端(PHP为例)：

<?php

$data = array('name'=>' 张三','age'=>22,'city'=>'newYork');

sleep(3);            //人为设置一个等待(用于观察什么是ajax的同步与异步)

responseAJAX($data); //响应请求返回数据

/**

 * 返回处理后的ajax请求数据

 * @author martinzhang

 * @param  $data 待返回的数据

 * @return none

 */

function responseAJAX($data){

    $data = json_encode($data);

    $getCallBackName = $_REQUEST['callback'];   //获取callback调用的function函数名

    if($getCallBackName != ''){

        //使用了jsonp跨域请求

        $data = $getCallBackName.'('.$data.')'; //返回格式形如:callbackFunName({"name":" \u5f20\u4e09","age":22,"city":"newYork"})

        die($data);

    }else{

        //未跨域

        die($data);

    }

}

客户端：

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>jsonp跨域</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<script type="text/javascript" language="javascript" src="../jquery-1.8.2.js"></script>

</head>

<body>

<form id="form1" runat="server">

<div>

<input type="button" id="btn1" onclick="BtnClick()" value="jsonp" style="width:55px; height:20px;" />

<input type="button" id="btn1" onclick="BtnClick2()" value="getJSON" style="width:55px; height:20px;" />

</div>

<p></p>

<div id="dd">

sd......

</div>

<div>

<script type="text/javascript" language="javascript">

//方式一：

function BtnClick() {

    $.ajax({

        url: 'http://others.com/0_module/0/jQuery/ajax_jsonp/serverAPI.php',

        //async: false,                     //ture表示异步(默认)；false表示同步；

        type: 'get',

        dataType : 'jsonp',                 //返回数据类型：需要显式指定

        jsonp: 'callback',                  //服务端用于接收callback调用的function名的参数名(变量名)

        //jsonpCallback: 'callbackFunName', //可以显式地指定callback的函数名【如果不设置此项jquery会使用一个随机的含时间串的名称做为callback的函数名】

        success: function(data){

            //alert(data);

            $('#dd').html(data.name);

        }

    }); 

    alert('什么是异步？就是js不会等ajax何时请求回数据，程序顺序向下执行它下面的其它程序，ajax何时候请求回数据就何时处理');

}

//方式二：

function BtnClick2() {

    $.ajaxSettings.async = false;           //显式声明此次请求为同步

    $.getJSON("http://others.com/0_module/0/jQuery/ajax_jsonp/serverAPI.php?callback=?",null,function(data){

        $('#dd').html(data.name);

    });

    alert('何谓同步？就是必须等ajax请求回来数据之后，js才会顺序向下执行它下面的程序');

}

</script>

</div>

</form>

</body>

</html>

jQuery之ajax的跨域获取数据的更多相关文章

  1. AJAX远程跨域获取数据

    //本地获取json文件 $.ajax({ url : 'json.php', type : 'post', dataType : 'json',//返回json数据格式 success : func ...

  2. jQuery的Ajax的跨域请求

    今天碰到一个Ajax跨域请求的问题,我把源码down下来,然后在服务器端写了一个http请求的代理(因为服务器端是不存在跨域问题的),说白了就是用BufferedReader写了个IO流,然后读取到目 ...

  3. jsonp跨域获取数据小解

    jsonp跨域获取数据小解 由于浏览器有同源策略,所以要想获取非同源(协议,域名,端口三者有一不同都算非同源)的页面的数据,就得进行跨域 (1) jsonp原理 由于script标签的src属性可以访 ...

  4. 利用jquery的ajax实现跨域，内部其实是jsonp协议了，不是XHRhttp协议

    一.同源策略 要理解跨域,先要了解一下“同源策略”.所谓同源是指,域名,协议,端口相同.所谓“同源策略“,简单的说就是基于安全考虑,当前域不能访问其他域的东西. 一些常见的是否同源示例可参照下表: 在 ...

  5. 利用location.hash+iframe跨域获取数据详解

    前言 如果看懂了前文利用window.name+iframe跨域获取数据,那么此文也就很好理解了.一样都是动态插入一个iframe,然后把iframe的src指向服务端地址,而服务端同样都是输出一段j ...

  6. 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  7. XMLHTTPRequest对象不能跨域获取数据？！

    写了一小段代码,是用XMLHTTPRequest对象来获取数据的,在本地服务器中,运行的很顺利,但是转向实际服务器(实质上就是转向http://gumball.wickedlysmart.com获取一 ...

  8. iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  9. jquery中ajax处理跨域的三大方式

    一.处理跨域的方式: 1.代理 2.XHR2 HTML5中提供的XMLHTTPREQUEST Level2(及XHR2)已经实现了跨域访问.但ie10以下不支持 只需要在服务端填上响应头: ? 1 2 ...

随机推荐

  1. Python的regex模块——更强大的正则表达式引擎

    Python自带了正则表达式引擎(内置的re模块),但是不支持一些高级特性,比如下面这几个: 固化分组    Atomic grouping 占有优先量词    Possessive quantifi ...

  2. 【Unity3D基础教程】给初学者看的Unity教程（三）：通过制作Flappy Bird了解Native 2D中的Sprite，Animation

    作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点[推荐].谢谢! 引子 上一次我们讲了MonoBehaviou ...

  3. centos-系统语言检查设置安装

    查看当前系统语言 登陆linux系统打开操作终端之后,输入 echo $LANG可以查看当前使用的系统语言. 查看安装的语言包 查看是否有中文语言包可以在终端输入 locale命令,如有zh cn 表 ...

  4. [转]配置mysql允许远程连接的方法

    配置mysql允许远程连接的方法 vim /etc/my.cnf注释这一行:bind-address=127.0.0.1 ==> #bind-address=127.0.0.1保存退出.mysq ...

  5. 在word里插入图片，并设置图片的格式

    由于公司业务需要,需要在生成的word里插入图片(公司印章),仔细想了下,还是在word模板里添加一个书签,然后再该书签的位置插入图片,并设置图片的格式方便些: 代码如下: using System; ...

  6. [Spring MVC] - Annotation验证

    使用Spring MVC的Annotation验证可以直接对view model的简单数据验证,注意,这里是简单的,如果model的数据验证需要有一些比较复杂的业务逻辑性在里头,只是使用annotat ...

  7. Eclipse tomcat插件禁用热加载

    Eclipse中的tomcat插件默认是开户了热加载,只要是修改了java文件一保存,tomcat自动编译.加载.发布,很吃内存. 关闭方法: 打开eclipse,找到server项: 双击打开,修改 ...

  8. Struts2 + Spring + Hibernate

    Struts2 + Spring + Hibernate整合. 使用的是无配置方法进行SSH的整合,struts-convertion plugin + spring annotation + hib ...

  9. 【1】第一次电话面试---上海EMC

    时间是2016//11月,投的是上海的EMC2公司的JavaWeb开发岗,第一次接到的电话面试,问的题目很基础基础,很遗憾,本人在掌握的太不好,回答的很乱,目测定挂.下面记下HR问的问题及回答. 首先 ...

  10. python学习-day15：函数作用域、匿名函数、函数式编程、map、filter、reduce函数、内置函数r

    ---恢复内容开始--- 一.全局变量与局部变量 在子程序中定义的变量称为局部变量, 在程序的一开始定义的变量称为全局变量. 全局变量作用域是整个程序,局部变量作用域是定义该变量的子程序.当全局变量与 ...