PHP下ajax跨域的解决方案之window.name实例分析

本文实例讲述了PHP下ajax跨域的解决方案之window.name。分享给大家供大家参考,具体如下:

原理核心:window对象的name属性是一个很特别的属性,当该window的location变化,然后重新加载,它的name属性可以依然保持不变。

依此原理,我们可以在页面A中用iframe加载其他域的页面B,而页面B中用JavaScript把需要传递的数据赋值给 window.name,页面A的iframe加载完成之后,页面A修改iframe的地址,将其变成同域的一个地址,然后就可以读出window.name的值了。

例:有两个网站www.a.com和www.b.com,我们要在www.a.com/a.html下获取www.b.com/data.html数据。

我们需要三个文件:

www.a.com 下的 a.html 获取数据并显示
www.b.com 下的data.html 提供数据
www.a.com 下的proxy.html 代理文件,与a.html同一域下,一般为空html文件。

www.b.com下的data.html如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Insert title here</title>
</head>
<body>
  <script type="text/javascript">
    //添加需要传递的数据,大小一般为2M,IE和firefox下可以大至32M左右
    window.name = '[{"name":"test1"},{"name":"test2"}]';
  </script>
</body>
</html>

www.a.com下的proxy.html如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Insert title here</title>
</head>
<body>
  <!-- 空的html文件 -->
</body>
</html>

www.a.com下的a.html如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Insert title here</title>
</head>
<body>

<!-- 用于引用www.b.com/data.html文件 -->
<iframe id="iframe" src=""></iframe>

<!-- 显示获取到的数据 -->
<div id="data"></div>

<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
var ifr = document.getElementById("iframe");
ifr.src = "http://www.b.com/data.html";
if (ifr.attachEvent) {
  ifr.attachEvent("onload", loadfunc);
} else {
  ifr.onload = loadfunc;
}

var state = 0;
function loadfunc() {
  if(state == 0) {
    state = 1;
    ifr.contentWindow.location = "http://www.a.com/proxy.html";
  } else {
    var data = ifr.contentWindow.name;
    $.each($.parseJSON(data), function(i, v) {
      $("#data").append(v.name);
    });

    //销毁iframe,保证安全
    ifr.contentWindow.document.write("");
    ifr.contentWindow.close();
    document.body.removeChild(ifr);
  }
}
</script>
</body>
</html>

更多关于PHP相关内容可查看本站专题:《PHP+ajax技巧与应用小结》、《PHP网络编程技巧总结》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》

希望本文所述对大家PHP程序设计有所帮助。

时间: 2020-03-04

PHP中运用jQuery的Ajax跨域调用实现代码

可以在页面定义一个调用方法,如下: 复制代码 代码如下: function getData(){ $.getJSON("http://123.123.123.123/?callback=?", { "m":"data",// 指定php的文件名字 "act":"getdata",// 指定php文件中的方法 "name":"问题儿童"// 传入的参数 }, funct

jquery ajax结合thinkphp的getjson实现跨域的方法

本文实例讲述了jquery ajax结合thinkphp的getjson实现跨域的方法.分享给大家供大家参考,具体如下: jquery中post的应该是不能跨域,网上说get的可以跨域,但是我试了一下也不行,然后就进行最后的拼搏getjson,结果成功,哈哈 js处写作: $.getJSON( "/index.php/Index/test", function(data){ alert(data.dd); } ); 语法: jQuery.getJSON(url,[data],[call

php跨域cookie共享使用方法

A 机器所在的域:a1.main.com,A 有应用 main.phpB 机器所在的域:b1.test.com,B 有应用 test.php 1.在 main.php 里设置 cookie 的时候, cookie 的设置方法如下: 复制代码 代码如下: setcookie( "TestCookie",  "okol",  time() + 3600,  "/", "b1.test.com", 1 ); 这样在 test.php

PHP如何实现跨域

因工作需要,客户端软件的一些界面用HTML+CSS+Javascript实现,这些文件放在客户端本地,以本地文件形式加载,但是有些情况下,需要连接服务器取得一些信息,如果不做任何处理,则请求失败,返回的信息如下: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. 这是因为浏览器跨域策略起作用,阻止了

PHP ajax跨子域的解决方案之document.domain+iframe实例分析

本文实例讲述了PHP ajax跨子域的解决方案之document.domain+iframe.分享给大家供大家参考,具体如下: 对于主域相同,子域不同,我们可以设置相同的document.domain来欺骗浏览器,达到跨子域的效果. 例如:我们有两个域名:www.a.com 和 img.a.com 在www.a.com下有a.html 在img.a.com下有img.json和img.html这两个文件. img.json就是一些我们要获取的数据: [ { "name" : "

PHP防止跨域提交表单

在写用户注册的时候,一定要主要你的表单是否可以跨域提交.php中解决的方法:1.除了在页面做好表但验证之外,还要在提交的服务段的数据进行验证.验证的主要代码如下: 复制代码 代码如下: $servername=$_SERVER['SERVER_NAME'];//当前运行脚本所在服务器主机的名字.  $sub_from=$_SERVER["HTTP_REFERER"];//链接到当前页面的前一页面的 URL 地址  $sub_len=strlen($servername);//统计服务器

PHP下ajax跨域的解决方案之jsonp实例分析

本文实例讲述了PHP下ajax跨域的解决方案之jsonp.分享给大家供大家参考,具体如下: 首先要说明一下json和jsonp的区别? json是一种基于文本的数据交换方式,或者叫做描述数据的一种格式. var person = { "name": "test", "age": "25", "sex": "男" }; var data = [1, 2, 3, 4, 5]; 而jsonp是

PHP处理Ajax请求与Ajax跨域问题

PHP判断是否为Ajax请求 我们知道,在发送ajax请求的时候,可以通过XMLHttpRequest这个对象,创建自定义的header头信息, 在jquery框架中,对于通过它的$.ajax, $.get, 或者$.post方法请求网页内容时,它会向服务器传递一个HTTP_X_REQUESTED_WITH的参数,php中就是在header一层判断是否是ajax请求,对应的根据$_SERVER['HTTP_X_REQUESTED_WITH']判断.一般情况下$_SERVER['HTTP_X_RE

两种简单的跨域方法(jsonp、php)

Ajax不能跨域,比如您是www.baidu.com,您就不能请求www.163.com的文件.但您可以请求www.baidu.com/1.json.ent.baidu.com/1.json.这是因为安全原因,对于任何后台语言来说.服务器程序来说,所有的XHR类型的请求,如果来自其他的服务器,将不予应答. 一.使用jsonp JSONP是JSON with Padding的略称.它是一个非官方的协议,出处不可考,它允许在服务器端集成Script tags返回至客户端,通过javascript c

php实现跨域提交form表单的方法【2种方法】

本文实例讲述了php实现跨域提交form表单的方法.分享给大家供大家参考,具体如下: 有时我们为了网站安全考虑,我们不允许直接跨域提交form表单数据,如果我们自己有这个需求呢?下面我们来介绍两种跨域的方法解决直接跨域问题. 下面我们来看看两种php跨域提交form的方法 一.通过php curl function curlPost($url,$params) { $postData = ''; foreach($params as $k => $v) { $postData .= $k . '

浅析php中jsonp的跨域实例

我们现在www.test.com这个域名下面有这么个html文件testjsonp.html: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

使用jsonp实现跨域获取数据实例讲解

js部分 (function(window, document) { 'use strict'; var jsonp = function(url, data, callback) { //1.挂载回调函数 var fnsuffix = Math.random().toString().replace('.', ''); var cbFuncName = 'my_json_cb' + fnsuffix; window[cbFuncName] = callback; //2.将data转换成url

Ajax的jsonp方式跨域获取数据的简单实例

jsonp的调用,今天碰到了,正好整理了一下. <!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#b

jQuery使用JSONP实现跨域获取数据的三种方法详解

本文实例讲述了jQuery使用JSONP实现跨域获取数据的三种方法.分享给大家供大家参考,具体如下: 第一种方法是在ajax函数中设置dataType为'jsonp' $.ajax({ dataType: 'jsonp', url: 'http://www.a.com/user?id=123', success: function(data){ //处理data数据 } }); 第二种方法是利用getJSON来实现,只要在地址中加上callback=?参数即可 $.getJSON('http:/

详解vue-cli项目中的proxyTable跨域问题小结

什么是跨域? 同源策略规定了如果两个 url 的协议.域名.端口中有任何一个不等,就认定它们跨源了. 跨域的解决方式有哪几种? 1.JSONP 是 JSON with padding(填充式 JSON 或参数式 JSON)的简写. JSONP实现跨域请求的原理简单的说,就是动态创建<script>标签,然后利用<script>的src 不受同源策略约束来跨域获取数据. JSONP 由两部分组成:回调函数和数据.回调函数是当响应到来时应该在页面中调用的函数.回调函数的名字一般是在请求

谈谈如何在ASP.NET Core中实现CORS跨域

CORS(Cross-origin resource sharing)是一个W3C标准,翻译过来就是 "跨域资源共享",它主要是解决Ajax跨域限制的问题. CORS需要浏览器和服务器支持,现在所有现代浏览器都支持这一特性.注:IE10及以上 只要浏览器支持,其实CORS所有的配置都是在服务端进行的,而前端的操作浏览器会自动完成. 在本例中,将演示如何再ASP.NET Core中实现CORS跨域. 前期准备 你需要windows系统. 你需要安装IIS. 推荐使用VS2015 Upda

在vue项目中,使用axios跨域处理

跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无法自己独立的搭建一个服务器,所以就变成了一个尴尬的事情 当然,有很多的虚拟服务器,能够解决跨域问题,他们的实质都是通过后台取与后台沟通,从而委婉的解决跨域问题正好,webpack正有这种功能,所以vue-cli也是有解决跨域的能力 当然,不可能我们直接发送ajax就成功,对吧,我们肯定要修改配置文件 代码: dev: { env: require('./dev.env'), port: 8080, a

vue中axios解决跨域问题和拦截器的使用方法

vue中axios不支持vue.use()方式声明使用. 所以有两种方法可以解决这点: 第一种: 在main.js中引入axios,然后将其设置为vue原型链上的属性,这样在组件中就可以直接 this.axios使用了 import axios from 'axios'; Vue.prototype.axios=axios; components: this.axios({ url:"a.xxx", method:'post', data:{ id:3, name:'jack' } }

Vue 项目中遇到的跨域问题及解决方法(后台php)

问题描述 前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The valu

在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法

在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法 在ssm框架整合中,使用layui作为前端页面,拖拽图片上传,填写接口后,后台能够成功接收到数据,但由于页面资源和后台访问地址的不一致(即使域名一致但端口不一致)引起跨域问题,导致接收资源后在前端无法接收到后台返回的数据. 前台页面: <html> <head> <meta charset="UTF-8"> <title>校园网络打印</title> <li