一、后台代理技术

由服务器端向跨域下的网站发出请求,再将请求结果返回给前端,成功避免同源策略的限制。

具体操作如下:

1、在localhost:81/a.html中,向同源下的某个代理程序发出请求

$.ajax({

    url:'/proxy.php?name=hello&info=information',   //服务器端的代理程序

    type:'GET',

    success:function (){}

})

2、在代理程序proxy.php中,向非同源下的服务器发出请求,获得请求结果,将结果返回给前端。

<?php

$name=$_GET['name'];

$info = $_GET['info'];

$crossUrl = 'http://b.com/sub?name='.$name;   //向其他域下发出请求

$res = file_get_contents($crossUrl);

echo $res;

 ?>

二、Jsonp

为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

JSONP的客户端具体实现:

(1)远程服务器remoteserver.com根目录下有个remote.js文件代码如下:

localHandler({"result":"我是远程js带来的数据"});

(2)本地服务器localserver.com下有个jsonp.html页面代码如下:

<head>
<title></title>
<script type="text/javascript">
var localHandler = function(data){
alert('我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:' + data.result);
};
</script>
<script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>

(3)一个问题出现了,我怎么让远程js知道它应该调用的本地函数叫什么名字呢?

解决:服务端提供的js脚本是动态生成的就行了呗,这样调用者可以传一个参数过去告诉服务端“我想要一段调用XXX函数的js代码,请你返回给我”,于是服务器就可以按照客户端的需求来生成js脚本并响应了。

-- 本地服务器localserver.com下有个jsonp.html页面代码如下:

<script type="text/javascript">    // 得到航班信息查询结果后的回调函数
var flightHandler = function(data){
alert('你查询的航班结果是:票价 ' + data.price + ' 元,' + '余票 ' + data.tickets + ' 张。');
}; // 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码)
var url = "http://flightQuery.com/jsonp/flightResult.aspx? code=CA1998&callback=flightHandler"; // 创建script标签,设置其属性
var script = document.createElement('script');
script.setAttribute('src', url); // 把script标签加入head,此时调用开始
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>

-- 远程服务器很聪明,这个叫做flightResult.aspx的页面生成了一段这样的代码提供给jsonp.html

(4)jQuery如何实现jsonp调用?

<script type="text/javascript">
jQuery(document).ready(function(){
$.ajax({
type: "get",
async: false,
url: "http://flightQuery.com/jsonp/flightResult.aspx?
code=CA1998",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
success: function(json){
alert('您查询到航班信息:票价: ' + json.price + ' 元,余票: ' + json.tickets + ' 张。');
},
error: function(){
alert('fail');
}
});
});
</script>

  为什么我这次没有写flightHandler这个函数呢?而且竟然也运行成功了!这就是jQuery的功劳了,jquery在处理jsonp类型的ajax时,自动帮你生成回调函数并把数据取出来供success属性方法来调用

(5)补充

  1、ajax和jsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装;

  2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

  3、所以说,其实ajax与jsonp的区别不在于是否跨域,ajax通过服务端代理一样可以实现跨域,jsonp本身也不排斥同域的数据的获取。

  4、还有就是,jsonp是一种方式或者说非强制性协议,如同ajax一样,它也不一定非要用json格式来传递数据,如果你愿意,字符串都行,只不过这样不利于用jsonp提供公开服务。

  总而言之,jsonp不是ajax的一个特例,哪怕jquery等巨头把jsonp封装进了ajax,也不能改变这一点!

参考网址:http://kb.cnblogs.com/page/139725/

三、XmmlHttpRequest2(XHR2)

HTML5提供的XMLHttpRequest Level 2已经实现了跨域访问以及其他的一些新功能

这需要在远程服务器端添加如下代码

header('Access-Control-Allow-Origin:*'); //*代表可访问的地址,可以设置指定域名

header('Access-Control-Allow-Methods:POST,GET');

这样在客户端使用常规的AJAX代码即可。

参考网址:http://www.php186.com/content/article/ajax/24580.html

四、总结

代理实现最麻烦,但使用最广泛,任何支持AJAX的浏览器都可以使用这种方式。

JSONP相对简单,但只支持GET方式调用。

XHR2最简单,但只支持HTML5,如果你是移动端开发,可以选择使用XHR2。

ajax请求json数据跨域问题(转)的更多相关文章

  1. 关于使用Ajax请求json数据,@RequestMapping返回中文乱码的几种解决办法

    一.问题描述: 使用ajax请求json数据的时候,无论如何返回的响应编码都是ISO-8859-1类型,因为统一都是utf-8编码,导致出现返回结果中文乱码情况. $.ajax({ type:&quo ...

  2. bootstrap通过ajax请求JSON数据后填充到模态框

    1.   JSP页面中准备模态框 <!-- 详细信息模态框(Modal) --> <div> <div class="modal fade" id=& ...

  3. Ajax交互,浏览器接收不到服务器的Json数据(跨域问题)

    该问题的情景如下: 问题描述 Ajax的请求代码放在一台机器上,而服务器的java 路由程序放在另一个机子上,所以Ajax的url填写的是带"http://"  的地址,而不是相对 ...

  4. 使用ajax请求接口,跨域后cookie无法设置,全局配置ajax;及使用axios跨域后cookie无法设置,全局配置axios

    问题一: 使用ajax/axios跨域请求接口,后端放行了,能够正常获取数据,但是cookie设置不进去,后端登录session判断失效 ajax解决办法: //设置ajax属性 crossDomai ...

  5. 上传文件,使用FormData进行Ajax请求,jsoncallback跨域

    通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...

  6. ajax请求json数据案例

    今天有这样一个需求,点击六个大洲,出现对应的一些请求信息,展示在下面,请求请求过后,第二次点击就无需请求.如图所示:点击北美洲下面出现请求的一些数据 html代码结构: <div class=& ...

  7. jQuery实例之ajax请求json数据案例

    今天有这样一个需求,点击六个大洲,出现对应的一些请求信息,展示在下面,请求请求过后,第二次点击就无需请求.如图所示:点击北美洲下面出现请求的一些数据 html代码结构: <div class=& ...

  8. ajax 请求json数据中json对象的构造获取问题

    前端的界面中,我想通过ajax来调用写好的json数据,并调用add(data)方法进行解析,请求如下: json数据如下: { “type”:"qqq", "lat&q ...

  9. 浅析ajax请求json数据并用js解析(示例分析)

    这应该是每个web开发的人员都应该掌握的基础技术,需要的朋友可以参考下 自从接触了jquery就喜欢上了前端开发,而且深深感受到了前端开发的强大与重要之处.同时也想为asp.net鸣不平,事实上asp ...

随机推荐

  1. golang 并发顺序输出数字

    参考 package main import ( "fmt" "sync/atomic" "time" ) func main() { va ...

  2. 课程二(Improving Deep Neural Networks: Hyperparameter tuning, Regularization and Optimization),第三周(Hyperparameter tuning, Batch Normalization and Programming Frameworks) —— 2.Programming assignments

    Tensorflow Welcome to the Tensorflow Tutorial! In this notebook you will learn all the basics of Ten ...

  3. MySQL数据导入到Mongo

    背景:如题干所述,需要将一份数据导入到mongo数据库,减少项目依赖的数据源. 解决方案: 使用mongo自带的mongoimport工具. 首先在test库里创建一个空集合:[import_test ...

  4. 使用 Scrapyd 管理部署 Scrapy 的一些问题

    环境:Ubuntu Xenial (16.04) Scrapy 是一个不错的爬虫框架,但是不支持定时执行,常规的做法是使用 crontab 的方式进行定时执行 shell ,当爬虫数量多的时候,管理起 ...

  5. 公共技术点( View 绘制流程)

    转载地址:http://p.codekk.com/blogs/detail/54cfab086c4761e5001b253f 本文为 Android 开源项目源码解析 公共技术点中的 View 绘制流 ...

  6. Error:Could not determine the class-path for interface com.android.builder.model.AndroidProject.

    Android Studio导入Eclipse项目报错Error:Could not determine the class-path for interface com.android.builde ...

  7. JAVA进阶之路(一)

    初学的大三奋斗者,fighting!!! 下面是进阶之路 Java平台和语言最开始只是SUN公司在1990年12月开始研究的一个内部项目.SUN公司的一个叫做帕特里克·诺顿的工程师被自己开发的C和C语 ...

  8. linux上搭建ftp、vsftp, 解决访问ftp超时连接, 解决用户指定访问其根目录,解决ftp主动连接、被动连接的问题

    linux上搭建ftp 重要 解决如何搭建ftp         解决用户指定访问其根目录         解决访问ftp超时连接         解决ftp主动连接.被动连接的问题 1.安装ftp ...

  9. Linux Tomcat日志查看实用命令

    实用命令: 查看tomcat运行日志 tail -f catalina.out 通过关键字搜索查看日志 cat jeewx-2015-09-20.log | grep 验证码 查看固定时间日志 cat ...

  10. SpringMvc @RequestParam 使用推荐使用包装类型代替包装类型

    SpringMvc 中@RequestParam注解使用 建议使用包装类型来代替基本数据类型 public String form2(@RequestParam(name="age" ...