服务端:PHP

客户端:Andorid, HTML5, jQuery, ajax

现象:本想通过jQuery的ajax功能从服务器取回数据存到手机的缓存里,结果总是错误,后来想到可能是跨域问题,所以查了下jsonp的方案先把流程跑通,明天再完善看看有什么好的方案

服务端:http://www.code-style.com/test/a.php

<?php

//服务端返回JSON数据
$arr=array('name'=>'shujun.li');
$result=json_encode($arr); //动态执行回调函数
$callback=$_GET['callback'];
echo $callback."($result)";
?>

客户端

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Listview AutodividersSelector - jQuery Mobile Demos</title>
<script src="js/jquery.js"></script> <script type="text/javascript">
$.ajax({
url:"http://www.code-style.com/test/a.php",
dataType:'jsonp',
data:'',
jsonp:'callback',
success:function(result) {
alert(result["name"])
},
timeout:3000
});
</script>
</head>
<body>
</body>
</html>

生成URL : http://www.code-style.com/test/a.php?callback=jQuery1102004144126083701849_1420635061128&_=1420635061129

响应:jQuery1102004144126083701849_1420635061128({"name":"shujun.li"})

JSONP原理解析:

相当于jquery在页面生成一个匿名函数,这个函数可以传入一个JS对象,然后把这个函数的函数名作为URL参数传递给服务器端,服务端吐出的实际上是对这个函数的调用语句,输出到了页面以后会通过eval执行这个调用,这个匿名函数会再次调用我们的success函数,最终这么拿的数据,如果这样的话JSONP无法大规模的传输数据

    $.ajax({
url:"http://www.code-style.com/test/a.php",
dataType:'jsonp',
data:'',
jsonp:'callback',
success: function(result) {
alert(result["name"])
},
timeout: 3000,
jQuery1102004144126083701849_1420635061128(obj)
{
success(obj);
}
});

WebApp开发:ajax请求跨域问题的解决的更多相关文章

  1. day78_淘淘商城项目_11_单点登录系统实现 + 用户名回显 + ajax请求跨域问题详解_匠心笔记

    课程计划 1.SSO注册功能实现 2.SSO登录功能实现 3.通过token获得用户信息 4.ajax跨域请求解决方案--jsonp 1.服务接口实现   SSO系统就是解决分布式环境下登录问题的,本 ...

  2. Grails项目开发——前端请求跨域问题

    Grails项目开发--前端请求跨域问题 最近做项目采用前后端分离的思想,使用Grails作为后台开发Restful API供前端调用. 在项目开发的过程中,遇到前端没办法通过ajax访问到后台接口的 ...

  3. 解决ajax请求跨域

    跨域大部分需要通过后台解决,引起跨域的原因: 3个问题同时满足 才可能产生跨域问题,即跨域(协议,主机名,端口号中有一个不同就产生跨域) 下面是解决方法 方法一 // ajax请求跨域 /* *解决a ...

  4. 解决Ajax请求跨域问题

    from:https://blog.csdn.net/wang379275614/article/details/53333775 上篇文章提到,由于浏览器的同源策略,使得,AJAX请求只能发给同源的 ...

  5. 处理Ajax请求跨域问题

    ajax跨域的原理 ajax出现请求跨域错误问题,主要原因就是因为浏览器的“同源策略”. CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resourc ...

  6. 关于ajax请求跨域问题

    jQuery中的异步请求跨域的方法: xhrFields: {withCredentials: true} 当设置为  true时,表示允许跨域: false时,表示禁止跨域

  7. 关于在JS中AJAX导致跨域问题的解决

    在部署一个原声的前端项目的时候,请求该服务器后端接口时发现出现了CORS跨域的问题,但是服务端已经做了同源策略的兼容,常见问题,遂记录. 报错信息: XMLHttpRequest cannot loa ...

  8. 关于ajax post请求跨域问题的解决心得

    最近啊,公司有个项目,需要做一个手机端APP的后台管理系统.所以用到了度文本编辑框,经过了好好一番周折,终于弄好了,带到上线的时候发现啊,只能使用ip去访问网页的时候上能穿图片他不会报跨域的问题,而使 ...

  9. nodejs服务实现反向代理,解决本地开发接口请求跨域问题

    前后端分离项目需要解决第一个问题就是,前端本地开发时如何解决通过ajax请求产生的跨域的问题.一般的做法是通过本地配置nginx反向代理进行处理的,除此之外,还可以通过nodejs来进行代理接口.当然 ...

随机推荐

  1. JNI 学习笔记系列(一)

    JNI全称是Java native interface,它是一个中间件,通过JNI可以使Java和C语言之间互相调用,在android开发中,像wifi热点的开启,像极品飞车中重力加速,碰撞效果的模拟 ...

  2. Java基础知识强化之IO流笔记52:IO流练习之 把一个文件中的字符串排序后再写入另一个文件案例

    1. 把一个文件中的字符串排序后再写入另一个文件 已知s.txt文件中有这样的一个字符串:"hcexfgijkamdnoqrzstuvwybpl" 请编写程序读取数据内容,把数据排 ...

  3. java与.net比较学习系列开发环境和常用调试技巧常用操作快捷键

    调试         F5 F11 调试运行   CTRL+F5 暂无 非调试运行   F6 不适用 编译整个解决方案   SHIFT+F6 不适用 编译当前选择的工程   SHIFT+F5 CTRL ...

  4. iOS 并行编程:GCD Dispatch Queues

    1 简介 1.1 功能          Grand Central Dispatch(GCD)技术让任务并行排队执行,根据可用的处理资源,安排他们在任何可用的处理器核心上执行任务.任务可以是一个函数 ...

  5. 移动平台作业——天气预报——天气数据的获得——为应用申请百度ak码

    需求: 可切换城市 可实时更新(按钮或手势或下拉刷新) 可现实未来三日的天气 不限制横屏或者竖屏,不限制布局样式,但要求得到的数据均需显示(北京.天气数据.天气图标) 提示: 获得实时天气数据(任选一 ...

  6. C#泛型集合—Dictionary<K,V>使用技巧

    转载:http://blog.csdn.net/a125138/article/details/7742022 1.要使用Dictionary集合,需要导入C#泛型命名空间 System.Collec ...

  7. Sublime Text 使用简介

    Sublime Text使用介绍 如果说Notepad++是一款不错Code神器,那么Sublime Text应当称得上是神器滴哥.Sublime Text最大的优点就是跨平台,Mac和Windows ...

  8. 错误编码 = 10022 错误消息 = SDK 组件 Qupaisdk 启动出错,错误消息为 [Qupaisdk], the android stack error message is Fail to start the plugin, which is caused by No implem

     so没有load到.几个可能,1.缺少so--在群共享下载拷贝到armeabi-v7a 2.so没有打入apk--检查打出来的apk.解压打开看下libs下面有没有so. 3.abi平台问题.检查平 ...

  9. Windows Server 2008 计划任务配置(任务计划程序)每分钟执行BAT

    首先Windows Server 2008不同于其他服务器操作系统和Windows Server 2003有着很大的区别,计划任务的名称是“任务计划程序”不在控制面板里,而是在“管理工具”里. 由于服 ...

  10. 如何重写EF DBContext 获取链接字符串的方法

    public partial class byvarDBFirst: DbContext { //使用自定义连接串 private static string GetEFConnctionString ...