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

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

首先要说明一下json和jsonp的区别?

json是一种基于文本的数据交换方式,或者叫做描述数据的一种格式。

var person = {
  "name": "test",
  "age": "25",
  "sex": "男"
};

var data = [1, 2, 3, 4, 5];

而jsonp是一种非官方跨域数据交互协议,该协议允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住json数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

比如我在a.com的网站上引用了b.com的一个b.js,但这样跨域的引用并不会产生错误,说明调用js文件时不受跨域的影响。

<script type="text/javascript" src="http://www.b.com/b.js"></script>

那么我们在b.js里添加如下代码,看看是否能够执行

alert("I from b");

确定是可以执行。

那么如果我们在a.com上自已创建一个js函数,而在b.com下的b.js中调用,那是否可行呢?

a.com下的index.html如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <script type="text/javascript">
    function a(data) {
      alert("I from a \r\n" + "data:" + data);
    }
  </script>
  <script type="text/javascript" src="http://www.b.com/b.js"></script>
</body>
</html>

b.com下的b.js如下:

a("from b");

上面也是可以执行的,我们可以看到在b.js中的数据确实正确的传到了函数a中。

问题又来了,a.com中创建的函数名与b.js中调用的函数名必须一致,那么如何才能让b.com服务端知道这个函数名,只有通过地址栏来传递了,加上一个callback=函数名来传递。当然callback这个命名可以改,但大家都这么命名,也就约定俗成了。

a.com下的index.html如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <script type="text/javascript">
    function a(data) {
      alert("uid :" + data.uid + "name :" + data.name);
    }
  </script>

  <!-- 注意这里把b.js改成b.php了 -->
  <script type="text/javascript" src="http://www.b.com/b.php?callback=a"></script>
</body>
</html>

b.com下的b.php如下:

<?php
$callback = !empty($_GET['callback']) ? trim($_GET['callback']) : '';

if(!empty($callback)) {
  $data = json_encode(array(
    'uid' => 1,
    'name' => '测试',
  ));

  echo "{$callback}({$data});";
}

上面也是可以执行的,知道了回调函数名,b.com服务端处理好数据,然后通过字符串拼接输出。

jquery中就已经提供了jsonp的支持,a.com下的index.html如下所示:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <div class="info"></div>
  <script type="text/javascript" src="http://www.b.com/jquery.js"></script>
  <script type="text/javascript">
  $.ajax({
    dataType: "jsonp",
    url: "http://www.b.com/b.php",
    jsonp: "callback",
    success: function(data) {
      $(".info").text("uid:" + data.uid + " name:" + data.name);
    }
  });
  </script>
</body>
</html>

跨域策略限制情况表如下:

URL 说明 允许通信
http://www.a.com/a.js
http://www.a.com/b.js
同一域名下 允许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js
同一域名下不同文件夹 允许
http://www.a.com:8000/a.js
http://www.a.com/b.js
同一域名,不同端口 不允许
http://www.a.com/a.js
https://www.a.com/b.js
同一域名,不同协议 不允许
http://www.a.com/a.js
http://127.0.0.100/b.js
域名和域名对应ip 不允许
http://www.a.com/a.js
http://script.a.com/b.js
主域相同,子域不同 不允许
http://www.a.com/a.js
http://a.com/b.js
同一域名,不同二级域名(同上) 不允许
http://www.a.com/a.js
http://www.b.com/b.js
不同域名 不允许

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

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

时间: 2020-03-05

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

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" : "

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下ajax跨域的解决方案之window.name实例分析

本文实例讲述了PHP下ajax跨域的解决方案之window.name.分享给大家供大家参考,具体如下: 原理核心:window对象的name属性是一个很特别的属性,当该window的location变化,然后重新加载,它的name属性可以依然保持不变. 依此原理,我们可以在页面A中用iframe加载其他域的页面B,而页面B中用JavaScript把需要传递的数据赋值给 window.name,页面A的iframe加载完成之后,页面A修改iframe的地址,将其变成同域的一个地址,然后就可以读出w

浅析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

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

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

两种简单的跨域方法(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跨域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中运用jQuery的Ajax跨域调用实现代码

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

PHP防止跨域提交表单

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

PHP如何实现跨域

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

JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码

通过JQuery可以跨域获取JSON数据,但必须弄清楚的是,JQuery不可以跨域获取任意JSON格式的数据,必须要通过服务端输出特定的针对JQuery跨域读取的JSON数据.你可能目前对此仍然毫无了解,没关系,本文将以最简单易懂的方式介绍这个技术,相信人人都容易读懂,并能够实际应用. JQuery获取同域的JSON数据 首先引用jQuery库文件: <script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js&quo

JSONP跨域GET请求解决Ajax跨域访问问题

前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响应,怎么回事?代码没怎么改动,唯一修改的地方就是jQuery的ajax方法中的url地址.难道是这里的问题,经过检查和调试,发现原来是同源策略在作怪,我们知道,JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术.在JavaScript中,有一个很重要

extjs_02_grid显示本地数据、显示跨域数据

1.显示表格 http://img.blog.csdn.net/20140622133941015?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYWRhbV93enM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast <%@ page language="java" import="java.util.*" pag

解析AngularJS中get请求URL出现的跨域问题

今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<script src="../js/jquery-1.11.0.js"

详解AngularJS如何实现跨域请求

跨域,前端开发中经常遇到的问题,AngularJS实现跨域方式类似于Ajax,使用CORS机制. 下面阐述一下AngularJS中使用$http实现跨域请求数据. AngularJS XMLHttpRequest:$http用于读取远程服务器的数据 $http.post(url, data, [config]).success(function(){ ... }); $http.get(url, [config]).success(function(){ ... }); $http.get(ur

浅谈angular.js跨域post解决方案

跨域,前端开发中经常遇到的问题,AngularJS实现跨域方式类似于Ajax,使用CORS机制. 下面阐述一下AngularJS中使用$http实现跨域请求数据. AngularJS XMLHttpRequest:$http用于读取远程服务器的数据 $http.post(url, data, [config]).success(function(){ ... }); $http.get(url, [config]).success(function(){ ... }); $http.get(ur

Angular实现跨域(搜索框的下拉列表)

angular.js 自带jsonp,实现跨域,下面来实现搜索框的下拉列表,使用百度和360分别尝试一下 百度:url截取之后红色部分需替换 :https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=数据&cb=JSON_CALLBACK 360:https://sug.so.360.cn/suggest?callback=JSON_CALLBACK&word=数据 注意:需要在服务器环境下运行 思路: 1 .声明 angular 2

Springmvc ajax跨域请求处理方法实例详解

上次给一个网站写网站  前后端分离 最后跪在ajax跨域上面了  自己在网上找了个方法  亲试可用  记录一下 写一个类  继承HandlerInterceptorAdapter package com.util; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.web.servlet.handler.Ha

原生js的ajax和解决跨域的jsonp(实例讲解)

最近慢慢感觉,学再多框架,库,都不如老老实实先把基础弄扎实了. 不说废话,先上一个用ajax请求下本地的一个.txt文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload =function(){ var oBtn = d

关于python的bottle框架跨域请求报错问题的处理方法

在用python的bottle框架开发时,前端使用ajax跨域访问时,js代码老是进入不了success,而是进入了error,而返回的状态却是200.url直接在浏览器访问也是正常的,浏览器按F12后会发现下面这个错误提示 XMLHttpRequest cannot load http://192.168.0.118:8081/get_mobile_number/?id=1. No 'Access-Control-Allow-Origin' header is present on the r