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. VirtualBox虚拟机安装CentOS 7

    新建虚拟机 因为比较简单,所以对于VirtualBox就不做过多介绍了,直接下载安装即可,安装好之后打开Oracle VM VirtualBox管理器,点击新建,选择Red Hat(根据windows ...

  2. 小白书 黑白图像【DFS/Flood Fill】

    http://blog.csdn.net/u010470972/article/details/33415617 Description 输入一个n×n的黑白图像(1表示黑色,0表示白色),任务是统计 ...

  3. TreeSet与TreeMap排序

    1.TreeSet原理: /* * TreeSet存储对象的时候, 可以排序, 但是需要指定排序的算法 *  * Integer能排序(有默认顺序), String能排序(有默认顺序), 自定义的类存 ...

  4. android如何取消闹铃

    取消闹钟: Intent intent = new Intent(context, TestReceiver.class); PendingIntent pi = PendingIntent.getB ...

  5. PHP数组输出三种形式 PHP打印数组

    PHP数组输出三种形式 PHP打印数组   $bbbb=array("11"=>"aaa","22"=>"bbb&qu ...

  6. sql server 性能调优 资源等待之内存瓶颈的三种等待类型

    原文:sql server 性能调优 资源等待之内存瓶颈的三种等待类型 一.概述 这篇介绍Stolen内存相关的主要三种等待类型以及对应的waittype编号,CMEMTHREAD(0x00B9),S ...

  7. DTU

    DTU 编辑 DTU (Data Transfer unit),是专门用于将串口数据转换为IP数据或将IP数据转换为串口数据通过无线通信网络进行传送的无线终端设备.DTU广泛应用于气象.水文水利.地质 ...

  8. 【微信】微信小程序 应用内的页面跳转在添加了tab以后就跳转不成功的问题解决

    在微信小程序中,本来应用页面内绑定在按钮上跳转页面可以成功,但是将页面添加在tab以后就不能实现跳转了 原本代码如下: //事件处理函数 bindViewTap: function() { wx.na ...

  9. appium_v1.4.16版本自动化适配android7.0系统

    https://www.cnblogs.com/imlvbu/p/7127940.html 要解决的问题:appium在androidV7.0系统上运行时报错 Failure [INSTALL_FAI ...

  10. ElasticSearch 安装中文分词器

    1.安装中文分词器IK 下载地址:https://github.com/medcl/elasticsearch-analysis-ik 在线下载安装: elasticsearch-plugin.bat ...