几种常用的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. ...
随机推荐
- Quartz入门案例与介绍(与spring整合)
Quartz概述 Quartz是OpenSymphony开源组织在Job scheduling领域又一个开源项目,它可以与J2EE与J2SE应用程序相结合也可以单独使用.Quartz可以用来创建简单或 ...
- Python-MongoDB的驱动安装、升级
安装pip,并通过此来安装pymongo–Python mongodb驱动 1.下载pip安装包,下载地址:http://pypi.python.org/packages/source/p/pip/p ...
- MMORPG战斗系统随笔(四)、优化客户端游戏性能
转载请标明出处http://www.cnblogs.com/zblade/ 说到游戏性能,这是一个永恒的话题.在游戏开发的过程中,性能问题一直是我们研发需要关注的一个节点.当然,说句客观话,很多程序员 ...
- REST架构概述
REST概述 REST(英文:Representational State Transfer,简称REST)描述了一个架构样式的网络系统,比如 web 应用程序.它首次出现在 2000 年 Roy F ...
- yii2-swiftmailer入门
1. 安装 用yii 2.0框架,默认会有这个扩展 composer require --prefer-dist yiisoft/yii2-swiftmailer 修改composer.json,re ...
- WPF通过代码动态的加载样式
tabitem.SetResourceReference(TabItem.StyleProperty, "mainTabItemStyle"); tabitem.Content = ...
- 从template到DOM(Vue.js源码角度看内部运行机制)
写在前面 这篇文章算是对最近写的一系列Vue.js源码的文章(https://github.com/answershuto/learnVue)的总结吧,在阅读源码的过程中也确实受益匪浅,希望自己的这些 ...
- winPcap编程之环境搭建(一)
之前用winPcap做过一个拦截网络数据包的程序,作为当时的网络编程课程的课程设计,现在重新学习一下. 工具:codeblocks 要用到的一些东西:WinPcap.exe与winPcap一些库文件 ...
- 组件 layui 常用控件下拉框的应用
下拉框的显示样式: 针对下拉框的绑定等操作时,在最后务必调用一次 form.render(); 1.基本定义: <div class="layui-form-item"> ...
- win10 uwp 模拟网页输入
有时候需要获得网页的 js 执行后的源代码,或者模拟网页输入,如点按钮输入文字. 如果需要实现,那么就需要用 WebView ,使用方法很简单. 首先创建一个 WebView ,接下来的所有输入都需要 ...