Jquery跨域请求php数据

我们一般用到ajax的时候是在同服务器下,一般情况下不会跨域,但有时候需要调用其他域名或ip下的数据的时候,遇到跨域请求数据的时候。

今天在工作中碰到javascript(以下简称js)跨域的问题,以前有看过相关的文章不过没有亲自操作实践只是浏览了一下。由于很多页面调用相同的东西,我把需要出来操作的js代码统一放在了一个命名为.js文件中,如果是主域名访问不会出现什么问题,二级域名访问死活代码没有执行,纠结了我很长时间,不过最终还是搞定了,以下作为这次经过和经验的总结!

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

以下代码是我写在js文件中的一部分代码:

$.ajax({
type:'get',
url:"",//将要请求的方式
contentType: "application/json",//contentTy类型
data:"",
dataType:'jsonp',
//数据格式
jsonp: "callback",
//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"flightHandler",
//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
success : function(data){
//请求成功
alert($data);
},
error: function () {
//请求失败
}
});

以上代码是用于请求php文件异步获取数据实现二级联动菜单.或许你看到了标红的字样,平常异步调用数据dataType使用的都是json,而标红的是jsonp!是的你没有看错就是jsonp。
两者有什么请区别呢?
JSON和JSONP虽然只有一个字母的差别,但其实他们根本不是一回事儿:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。

请求的php文件返回数据的格式为json,范例代码如下:

$result = json_encode(array($data));
echo "flightHandler($result)"; //此处的flightHandler是上面$ajax中jsonpCallback定义的名称,由于jquery已经封装好了jsonp可以直接拿去用。
//当使用jsonp时,使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
//有人建议此处的函数名称可以弄成动态获取的,为了实现不同的操作代码范例: //或
$method = isset($_GET[‘method’])?trim($_GET[‘method’]):’flightHandler’;//获取方法名称
$result = json_encode(array($data));
echo $method ."($result)";

Jsonp原理:

1):首先在客户端注册一个callback (如:’jsoncallback’), 然后把callback的名字(如:jsonp1236827957501)传给服务器。
此时,服务器先生成 json 数据。
2):然后以 js语法的方式,生成一个function , function 名字就是传递上来的参数 ‘jsoncallback’的值jsonp1236827957501 .
3):最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。客户端浏览器,解析js标签,并执行返回的js 文档,此时js文档数据,作为参数,传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里.(动态执行回调函数)
可以说jsonp的方式原理上和是一致的(qq空间就是大量采用这种方式来实现跨域数据交换的) .JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患.

Jquery跨域请求php数据(jsonp)的更多相关文章

  1. Jquery 跨域请求JSON数据问题

    制作网站时,我们有时候为了方便快捷会调用别人写好的API接口,或者是调用一些免费的API接口获得JSON数据.比如天气,农历,网站备案信息查询等. 但是,这些API接口都是别人自己服务器上的,我们要调 ...

  2. jquery跨域请求json数据

    //服务端生成json数据json.php <?php $json=array("Volvo","BMW","SAAB"); $cb ...

  3. jquery 跨域请求数据问题

    昨天参加了一个前端的面试,被问到一个跨域请求数据问题,我们之前一直用的是apicloud的api进行请求的,跨域是被apicloud封装起来的,也就没有注意跨域请求数据的问题.当被问到用jquery跨 ...

  4. jQuery使用ajax跨域请求获取数据

    jQuery使用ajax跨域请求获取数据  跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的 ...

  5. jquery跨域请求数据

    jquery跨域请求数据 jquery跨越请求数据.实际开发中经常会碰到两个网站数据交互问题,当向另一个站点请求数据该如何做? 实际上非常容易,请按照下面的步骤做: 第一:编写js,通过get获取远程 ...

  6. AJAX跨域请求json数据的实现方法

    这篇文章介绍了AJAX跨域请求json数据的实现方法,有需要的朋友可以参考一下 我们都知道,AJAX的一大限制是不允许跨域请求. 不过通过使用JSONP来实现.JSONP是一种通过脚本标记注入的方式, ...

  7. 关于ajax跨域请求API数据的一些问题

    一般来说我们使用jquery的ajax来跨域请求API数据的时候每次请求,就只能请求一组数据,而且当我们再次点击发送ajax请求的时候,新请求的数据会覆盖掉原来的数据,那么如何每次在请求的数据的时候, ...

  8. 本地主机作服务器解决AJAX跨域请求访问数据的方法

    近几天学到ajax,想测试一下ajax样例,由于之前在阿里租用的服务器过期了,于是想着让本地主机既做服务器又做客户端,只是简单地测试,应该还行. 于是,下载了xampp,下载网址http://www. ...

  9. 用 jQuery.getJSON() 跨域请求 JSON 数据

    $.getJSON()可以理解为特殊形式的$.ajax(),手册里的说明好复杂,这里只记录一下用到的跨域请求. 先说在同一域名下,js发送数据到php,php返回JSON数据: $.getJSON(' ...

随机推荐

  1. ppt提取图片,视频文件

    1,将视频另存为htm格式,然后会生成文件夹,里面就有. 2,如果没法生成htm格式,可以生成odp格式,压缩文件,用解压缩软件查看odp文件,就能看到. 3,pptx直接修改后缀为rar或者zip, ...

  2. AC日记——Little Elephant and Function codeforces 221a

    A - Little Elephant and Function 思路: 水题: 代码: #include <cstdio> #include <iostream> using ...

  3. Educational Codeforces Round 33 (Rated for Div. 2) A. Chess For Three【模拟/逻辑推理】

    A. Chess For Three time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  4. Python的程序结构[8] -> 装饰器/Decorator -> 装饰器浅析

    装饰器 / Decorator 目录 关于闭包 装饰器的本质 语法糖 装饰器传入参数 1 关于闭包 / About Closure 装饰器其本质是一个闭包函数,为此首先理解闭包的含义. 闭包(Clos ...

  5. [BZOJ3237][AHOI2013]连通图(分治并查集)

    3237: [Ahoi2013]连通图 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 1736  Solved: 655[Submit][Status ...

  6. 20170416郑州市轻工业学院ACM校赛

    这是个星期天,但是,这种非一线城市,重点城市什么的高中,放假从来不按套路出牌,几乎可以说能给你一天是福气.当然,比县里好的多,问在县里上高中的初中同学,放假更是比我们一天里的午休+晚上吃饭时间还要少. ...

  7. ios 字体类型设置 倾斜加粗等

    后面加-Bold就是加粗 加-Oblique就是倾斜等 还有不懂请看http://iosfonts.com/ iPhone 5.0 iPad 5.0 Font Families: 58 Font Fa ...

  8. 单核时代,PHP之类多线程或者多进程的,是怎么处理并发的?是排队吗?

      答案是:的确就是排队.但是并不是一定要处理完请求1才能去处理请求2:实际上请求的处理过程中,有很多的时间是耗在IO等其他地方,这时可以切换去处理其他请求,把等待的时间可以充分利用起来,达到更高的吞 ...

  9. react.js Warning: Failed form propType: You provided a value prop to a form field without an onChange handler. This will render a read-only field.

    错误信息: eact.js:20483 Warning: Failed form propType: You provided a value prop to a form field without ...

  10. Mongodb副本集+分片集群环境部署

    前面详细介绍了mongodb的副本集和分片的原理,这里就不赘述了.下面记录Mongodb副本集+分片集群环境部署过程: MongoDB Sharding Cluster,需要三种角色: Shard S ...