服务端：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. dmesg 程序崩溃调试2

    dmesg命令基于缓冲区打印信息dmesg -c可以清除该内存信息清除后demsg 命令不显示任何信息,但可以到/var/log/dmesg查看信息 dmesg |tail 20dmesg |head ...

  2. careercup-排序和查找 11.5

    11.5 有个排序后的字符串数组,其中散布着一些空字符串,编写一个方法,找出给定字符串的位置. 解法: 如果没有那些空字符串,就可以直接使用二分查找法.比较待查找字符串str和数组的中间元素,然后继续 ...

  3. vim的一些高级配置

    今天有幸看到一篇博文,有一些vim的高级配置 在linux或者unix下面的.vimrc文件中,在其中可以添加如下片段,可以实现解释上面你说的那些高级用法 " Ctrl + K 插入模式下光 ...

  4. Bash String Manipulation Examples – Length, Substring, Find and Replace--reference

    In bash shell, when you use a dollar sign followed by a variable name, shell expands the variable wi ...

  5. Java IO学习笔记

    Java流的分类,一般可按以下方式分: 按方向分,分为输入流,输出流. 按类型分,分为字节流和字符流. 2.1字节流是通过字节来读取数据 2.2字符流是通过字符来读取数据 按操作方式分,分为节点流和过 ...

  6. (转)CSS行高——line-height

    原文地址:http://www.cnblogs.com/dolphinX/p/3236686.html 初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了 ...

  7. Integer跟int的区别（备份回忆）

    int与Integer的区别 int 是基本数据类型Integer是其包装类,注意是一个类.为什么要提供包装类呢???一是为了在各种类型间转化,通过各种方法的调用.否则 你无法直接通过变量转化.比如, ...

  8. 一个月的时间--java从一无所有到能用框架做点东西出来

    四月20号到六月2号 因为顺利完成了Struts在线考试系统的学习,基本掌握了struts框架的原理和他众多复杂的标签.趁着下一件事情还没到时间,也顾不上写昨天研习的student部分和今天stude ...

  9. 详说C#中的结构struct

    一.结构和类的区别 1.结构的级别和类一致,写在命名空间下面,可以定义字段.属性.方法.构造方法也可以通过关键字new创建对象. 2.结构中的字段不能赋初始值. 3.无参数的构造函数无论如何C#编译器 ...

  10. 火狐浏览器插件Modify Headers伪造IP地址

    安装插件:先打开火狐浏览器 => 找到下载好的 modify_headers.xpi 插件文件 => 鼠标按住插件文件不放,拖拽到火狐浏览器界面 => 按提示重启浏览器 => ...