WebApp开发:ajax请求跨域问题的解决

服务端: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"})

时间: 2024-10-29 19:07:53

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

AJAX及其跨域的主要解决方法

AJAX = Asynchronous JavaScript andXML(异步的 JavaScript 和 XML).通过在后台与服务器进行少量数据交换,使网页实现异步更新.要明白异步交互可以通过同步和异步的对比很容易明白: 同步交互,就是最常见的click-refresh模式,点一个连接或提交一个表单,然后就必须重载整个页面 异步交互,javascript根据返回的数据,不刷新页面而改变当前页面的显示,例如:新浪微博,百度地图. Ajax的异步交互从XMLHttpRequest这个对象开始,

http升级为https后,静态资源失效和ajax请求跨域问题

把http升级以后,一打开原本的网站,会发现很多静态资源失效了. 只需要在html页面加入: <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 2:ajax请求与显示跨域 当发送ajax请求时报错: XMLHttpRequest cannot load [ajax请求的服务器url] No 'Access-Control-Allow-Origin

前后端分离ajax请求跨域问题

解决方案一(服务器端): 1.java语言 如果您使用的mvc框架是spring4.2以上的话,一个@CrossOrigin就可以搞定.将@CrossOrigin加到Controller上,那么这个Controller所有的请求都是支持跨域的,代码如下: @Controller @CrossOrigin public class GreetingController {} 将@CrossOrigin加到请求方法上,那么这个请求是支持跨域的,代码如下 @CrossOrigin @RequestMa

AJAX请求跨域的问题

$.ajax({ type: "post", url: "http://192.168.1.100:12806/Mine/DisCount.aspx?action=GetDiscountPoolForJsonp&type=name&typevalue=" + encodeURI("注册有奖"), dataType: 'jsonp', jsonp: "getDiscountForUserByPoolId", //

cors解决ajax请求跨域问题

Access-Control-Allow-Origin: * 适用tomcat部署的项目 在web.xml里添加以下内容 <filter> <filter-name>CorsFilter</filter-name> <filter-class>org.apache.catalina.filters.CorsFilter</filter-class> </filter> <filter-mapping> <filter

ajax j跨域请求sonp

需求 遇到的问题 解决方案 需求 如今,该项目需要获得数据访问外部链接.它是跨域.使用ajax 直提示: 遇到的问题 1. 怎样使用ajax 跨域请求数据 2. 能不能post请求 解决的方法 经过网上查找资料.能使用jsonp请求跨域数据. jsonp请求数据仅仅能get.不支持post跨域请求 用法.见代码: $.ajax({ type: "post",//这里写post也没用,也是get请求 url: "url", dataType: "jsonp&

原生JS实现Ajax及Ajax的跨域请求

  前  言          如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. 而,其中,用得最多的应该苏算是JQuery的Ajax了.但是,今天,影子向大家介绍的是原生js的Ajax,及跨域请求. 一. JQuery的Ajax 首先,先回忆下JQuery的Ajax写法: $.ajax({ url: , type: '', dataType: '', data: { }, s

原生JS实现Ajax的跨域请求

原生JS如何实现Ajax的跨域请求? 在解决这个问题之前,我们务必先清楚为什么我们要跨域请求,以及在什么情况下会跨域请求. 了解一下:"同源策略",你就知道了: 同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互.这是一个用于隔离潜在恶意文件的关键的安全机制. 它的定义是: 一段脚本向后台请求数据,只能读取属于同一协议名.同一主机名.同一端口号下的数据: 所以,请求不同协议名.不同端口号.不同主机名下面的文件时, 将会违背同源策略,无法请求成功,需要进行跨越处理!!

Ajax之跨域请求

一.引子 我现在开启了两个django项目,分别叫Demo1和Demo2,Demo1中有一个路径'http://127.0.0.1:8000/index/',对应的视图是index视图返回一个index页面,页面中只有一个button按钮,按钮绑定了一个单击事件,点击之后会发送一个ajax请求,请求的路径为'http://127.0.0.1:8001/ajax/',Demo1的ip和端口号是:'http://127.0.0.1:8000/',Demo2的ip和端口号是:'http://127.0