浅论ajax跨域!从一个例子开始!

//所谓跨域,简单来说就是去访问不是自己域名下的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button id="button" name="button" onclick="jsonp()">button</button>
    <div id="div1"></div>
</body>
<script>
    function jsonp(){

            var s1=document.createElement("script");

            s1.src="2.php?cb=show";

            document.body.appendChild(s1);   

        }

        var dd=document.getElementById("div1");

        function show(data){

            dd.innerHTML=data.name;

        }
</script>
</html>

php文件如下,此时通过参数cb来了接的,这样就是是

<?php  

$show=$_GET[‘cb‘];
$xjson="{‘name‘:‘user1‘}";

echo $show."(".$xjson.")";
?>
时间: 2024-10-12 00:01:33

浅论ajax跨域!从一个例子开始!的相关文章

ajax跨域例子

例子 https://github.com/ruanyf/react-demos/blob/master/demo12/index.html 此网页代码运行在本地, 是可以访问 github 数据的. 是由于 github 网站开启的 ajax 跨域访问能力. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <script src="../b

Ajax 跨域请求 jsonp获取json数据

遇到Ajax的跨域请求出问题 找了中解决办法如下: 参考内容:http://justcoding.iteye.com/blog/1366102 由于受到浏览器的限制,该方法不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数 据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器上,Web 应用程序还有什么用处呢?如果需要从多个第三方服务器收集数据时,又该怎么办? 理解同源策略 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的

深入浅出JSONP:解决AJAX跨域问题

本文主要讲解了如何去解决AJAX跨域的问题,从跨域的简单原理到JONP实现模式详细的讲解整个解决方案,最后利用jQuery可以很方便的实现JSONP来进行跨域访问. 上周客户新买了服务器,原本在旧的服务器上放着客户的Web主页信息和一个后台程序(asp.net),在客户的主页中有一个动态显示最新消息的处理,这个处理就是通过ajax异步从那个后台程序中取得的.由于又购买了新的服务器,客户想把web主页和那个后台程序分开来,后台程序被部署到了新的服务器上.不过这个项目是我的同事小福同志开发的,也就由

Ajax跨域:Jsonp原理解析

推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容. JavaScript这个安全策略在进行多iframe或多窗口编程.以及Ajax编程时显得

JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对 http://store.company.com/dir/page.html 同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 1.通过jsonp跨域[解决ajax跨域] 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的

CXF发布支持ajax跨域访问的restful webservice

用apache cxf构建了一个玩具型restful webservice,内嵌jetty,加上gradle,发布无比轻松. apply plugin: 'java' apply plugin: 'application' repositories { maven { url "http://maven.oschina.net/content/groups/public" } } [compileJava,compileTestJava,javadoc]*.options*.encod

Nginx服务器中处理AJAX跨域请求的配置方法讲解

Nginx 实现AJAX跨域请求AJAX从一个域请求另一个域会有跨域的问题.那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加add_header Access-Control*指令.如下所示: ? 1 2 3 4 5 6 7 8 9 10 11 12 location /{ add_header 'Access-Control-Allow-Origin' 'http://other.subdomain.com'; add_header 'Access-Cont

ajax跨域问题解决方案

今天来记录一下关于ajax跨域的一些问题.以备不时之需. 跨域 同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同.这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作. 解决方式 通常来说,比较通用的有如下两种方式,一种是从服务器端下手,另一种则是从客户端的角度出发.二者各有利弊,具体要使用哪种方式还需要具体的分析. 服务器设置响应头 服务器代理 客户端采用脚本回调机制. 方式一 Access-C

jQuery中利用JSONP解决AJAX跨域问题

写在前面 跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨域问题的一种比较通用的方案——JSONP. 什么是跨域? 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”.而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果. 具体策略限制情况可看下表: URL 说明 允许通信 http:/