几种常用的ajax 跨域请求
前 言
首先,我们要明白,什么是跨域,为什么要跨域。 由于JS中存在同源策略。当请求不同协议名不同端口号下面的文件时,将会违背同源策略,无法请求成功!需要进行跨域处理!
这篇文章就为大家详细介绍一下个人常用的三种跨域方式,以请求PHP为例。
1header("Access-Control-Allow-Origin:*");
后台PHP进行设置,前台无需任何设置,在后台被请求的PHP文件中,写入一条header。表示允许哪些域名请求这个PHP文件,*表示所有域名都允许
eg:
前台:
$.post("http://localhost/lianxi/kuayu.php",function(data){
console.log(data);
})
后台:
header("Access-Control-Allow-Origin:*");
$str=<<<str [
{
"name": "zhangsan",
"age": 17,
"hobby": [
"吃",
"喝",
"玩",
"乐"
],
"score":{
"math":78,
"chinese":80
}
}
]
str;
echo $str;
前台返回:
2使用src属性+jsonp实现跨域
①用于src属性的标签自带跨域功能,所以可以使用script标签的src属性请求后台数据。
②由于src在加载数据成功后,会直接将加载内容放入到script标签中。所以后台直接返回JSON字符串不能在script标签中解析。因此,后台应该返回给前台一个回调函数,并将JSON字符串作为参数传入。
③前台就收到返回的回调函数,将直接在script标签中调用。因此需要声明这样一个回调函数,作为请求成功的回调。
jsonp:JSON with padding,是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。
前台:
<script type="text/javascript">
function callBack(data){
console.log(data);
}
</script>
<script type="text/javascript" src="http://localhost/lianxi/kuayu.php"></script>
后台:
header("Content-Type:text/html;charset=utf-8"); $str=<<<str [
{
"name": "zhangsan",
"age": 17,
"hobby": [
"吃",
"喝",
"玩",
"乐"
],
"score":{
"math":78,
"chinese":80
}
}, ]
str;
echo "callBack({$str})";
前台返回:
3JQuery的AJax实现JSONP
①在ajax请求时,设置dataType为"jsonp"
②后台返回时,依然需要返回回调函数名。但是ajax在发送请求时,会默认使用get请求回调函数名发给后台,后台可以使用$_GET['callback']取出回调函数名
echo "{$_GET['callback']}({$str})";
③后台返回以后,ajax依然可以用success作为成功的回调函数:
success:function(data){}
当然后台也可以随便返回一个回到函数名, echo "callBack({$json})"; 前台只要请求成功,就会自动调用这个函数。类似第二条的②③步
前台:
$.ajax({
type:"post",
url:"http://localhost/lianxi/kuayu.php",
dataType:"jsonp",
success:function(data){
console.log(data);
}
});
后台:
echo "{$_GET['callback']}({$str})";
前台返回:
以上就是本人常用的跨域方式,希望对各位读者有所帮助。欢迎批评、交流与沟通。
几种常用的ajax 跨域请求的更多相关文章
- ASP.NET MVC 实现AJAX跨域请求方法《1》
ASP.NET MVC 实现AJAX跨域请求的两种方法 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据 ...
- .Net Ajax跨域请求总结
导语 之前写过一篇文章Ajax跨域请求COOKIE无法带上的解决办法,这两天正好好好的查了一下相关知识,做来总结一下 一.传统 ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法 ...
- ASP.NET MVC 实现 AJAX 跨域请求
ASP.NET MVC 实现AJAX跨域请求的两种方法 和大家分享下Ajax 跨域的经验,之前也找了好多资料,但是都不行,后来看到个可行的修改了并测试下 果然OK了 希望对大家有所帮助! 通常发送 ...
- 解决ajax跨域请求 (总结)
ajax跨域请求,目前已用几种方法实现: 1)用原生js的xhr对象实现. var url="http://freegeoip.net/json/" ...
- $.ajax 跨域请求 Web Api
WepApi确实方便好用,没有配置文件,一个apicontroller直接可以干活了.但今天用$.ajax跨域请求的时候总是获取不到数据,用fiddler一看确实抓到了数据,但回到$.ajax函数中, ...
- jQuery ajax跨域请求的解决方法
在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数 ...
- Ajaxadr ajax跨域请求crossdomain
最近工作需要用到ajax跨域请求参数,网上找很很久,最终得到解决之道.分享一下吧,希望能帮到各位 也许你已经发现在浏览器直接敲路径能获得对方提供接口的参数,而一到项目中Ajax请求却老是失败.原因是, ...
- ajax跨域请求的解决方案
一直打算改造一下自己传统做网站的形式. 我是.Net程序员,含辛茹苦数年也没混出个什么名堂. 最近微信比较火, 由于现在大环境的影响和以前工作的总结和经验,我打算自己写一个数据,UI松耦合的比较新潮的 ...
- 本地主机作服务器解决AJAX跨域请求访问数据的方法
近几天学到ajax,想测试一下ajax样例,由于之前在阿里租用的服务器过期了,于是想着让本地主机既做服务器又做客户端,只是简单地测试,应该还行. 于是,下载了xampp,下载网址http://www. ...
随机推荐
- HDU 5976 数学
Detachment Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total ...
- Long Long Message (poj2774 后缀数组求最长公共子串)
Long Long Message Time Limit: 4000MS Memory Limit: 131072K Total Submissions: 19206 Accepted: 79 ...
- css常见布局方式
CSS常见布局方式 以下总结一下CSS中常见的布局方式.本人才疏学浅,如有错误,请留言指出. 如需转载,请注明出处:CSS常见布局方式 目录: 使用BFC隐藏属性 float + margin abs ...
- iKcamp出品|全网最新|微信小程序|基于最新版1.0开发者工具之初中级培训教程分享
- ZOJ2212 Argus 优先队列 结构体
#include <iostream> #include <string> #include <queue> using namespace std; struct ...
- IDL 数组运算
1.求大.求小和求余 IDL> arr=indgen(4) IDL> print,arr 0 1 2 3 IDL> print,arr>3 3 3 3 3 IDL> pr ...
- every();some();filter();map();forEach()各自区别:
every();some();filter();map();forEach()各自区别: (1)every()方法:(返回值为boolean类型) 对数组每一项都执行测试函数,知道获得对指定的函数返回 ...
- 学习总结---OSPF协议
总结: 1.ospf协议报文不会泛洪扩散,而是逐级路由器处理后,再从所有ospf启用端口发送出去,也就是说,只能从邻居接收到ospf报文,报文的源ip是邻居的ip地址,目的ip是组播ip. 2.开启o ...
- ajax和jsonp使用总结
前言:ajax和jsonp可以与后台通信,获取数据和信息,但是又不用刷新整个页面,实现页面的局部刷新. 一.ajax 定义:一种发送http请求与后台进行异步通讯的技术. 原理:实例化xmlhttp对 ...
- Django REST FrameWork中文教程3:基于类的视图
我们也可以使用基于类的视图编写我们的API视图,而不是基于函数的视图.我们将看到这是一个强大的模式,允许我们重用常用功能,并帮助我们保持代码DRY. 使用基于类的视图重写我们的API 我们将首先将根视 ...