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. springBoot Ribbon Hystrix

    1.依赖包引入 <!-- 引入关于 hystrix的依赖 --> <dependency> <groupId>org.springframework.cloud&l ...

  2. [BZOJ1294][SCOI2009]围豆豆Bean 射线法+状压dp+spfa

    1294: [SCOI2009]围豆豆Bean Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 458  Solved: 305[Submit][Sta ...

  3. [thinkphp]查看thinkphp系统定义的常量值

    echo 'MEMORY_LIMIT_ON: ' . MEMORY_LIMIT_ON . '<br>'; echo 'THINK_PATH: ' . THINK_PATH . '<b ...

  4. python 字符串最长公共前缀

      编写一个函数来查找字符串数组中的最长公共前缀. 如果不存在公共前缀,返回空字符串 "". 示例 1: 输入: ["flower","flow&qu ...

  5. HDU 4815 Little Tiger vs. Deep Monkey 2013 长春现场赛C题

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=4815 [题意] n个题目,每题有各自的分数,A有50%的概率答对一道题目得到相应分数,B想要在至少P的概率 ...

  6. linux64位使用xampp及常见问题

    linux64位使用xampp及常见问题 换上ubntu9.10 64位,作为web工作者来说apache.php.mysql都必要安装的,在win里习惯了xampp,不是服务器为什么非要一个一个装呢 ...

  7. Ubuntu 16.04安装Chrome浏览器时提示:N: 忽略‘google-chrome.list.1’(于目录‘/etc/apt/sources.list.d/’),鉴于它的文件扩展名无效

    使用终端安装谷歌浏览器时,它会自动在/etc/apt/sources.list.d/这个目录下添加google-chrome.list文件,但是如果它原来就有一个google-chrome.list的 ...

  8. 操作系统/etc/hosts文件配置

    windows对应 C:\Windows\system32\drivers\etc\hosts linux: /etc/hosts Hosts - The static table lookup fo ...

  9. 有关奇葩的mex编程时的matlab出现栈内存错误的问题

    错误提示信息 (ntdll.dll) (MATLAB.exe中)处有未经处理的异常:0xC0000374:堆已损坏 该错误的表现是,matlab调用.mexw64函数时,第一次调用正常,第二次调用出现 ...

  10. JAVA常见算法题(十八)

    package com.xiaowu.demo; /** * 两个乒乓球队进行比赛,各出三人.甲队为a,b,c三人,乙队为x,y,z三人,以抽签决定比赛名单. 有人向队员打听比赛的名单:a说他不和x比 ...