跨域 jsonp

adonislu 2013-12-11

跨域有好多种方式，会根据当前的业务逻辑选择对应方式

这里介绍了jsonp的方法的实现过程

准备工作

模拟两个不同的域（下面用a.com 和b.com 来讲解）

a.com站点下面创建一个client.html 

b.com站点下面创建一个server.php

a.com站点通过js跨域请求b.com站点，我们利用script标签不受域访问限制特点进行请求（img标签同样有此特点）,最主要的特点就是能执行请求返回来的js脚本

下面代码执行过程是

1、点击send按钮，创建script标签，为该标签src赋值后，添加到document中。

2、放到document中会立即请求b.com中的server.php ，请求的地址有个callback=resutl参数，这个result就是client.html中定义的一个js函数

3、server.php 返回一个'result("{\"message\",\"xxxxxx\"}")';

4、接着执行client.html中的js函数resut;

代码如下：

client.html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>jsonpClient.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  <script type="text/javascript">
  	function createScript(){
  		var script = document.createElement("script");
		script.id="jsonid";
		script.src="http://b.com/server.php?q=sss&callback=result";
		document.body.appendChild(script);  		
  	}
  	
  	function result(data){
  		var dataJson = eval("("+data+")");
  		document.write(dataJson.message);
                document.body.removeChild(document.getElementById("jsonid"));

}
<body>
    <input type="button" value="send" onclick="createScript()"/>
  </body>
</html>

server.php 

q = $_REQUEST['p'];
callback = $_REQUEST['callback'];

处理过程省略
....
....
....
resutl="xxxxx";
echo callback+'("{\"message\",\"'+resutl+'\"}")';
adonislu

adonislu

相关推荐

前端JS跨域策略

这种策略为jsonp：JSONP是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题

学习web前端 / 0评论 2019-12-17

vue 解决jsonp跨域

在Vue中使用jsonp. 在vue中使用vue-jsonp

adonislu / 0评论 2019-11-07

什么是同源/跨域？什么是CORS？什么是JSONP？

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。同源又是什么呢？所谓同源是指，域名，协议，端口均相同。JSONP就可以解决跨域问题。JSONP是网页通过动态创建<script>元素向服务器发起请求

adonislu / 0评论 2019-09-08

Javascript跨域

在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。什么是JS跨域访问？

疯狂的扣子 / 0评论 2017-06-21

中止请求和超时 跨域的HTTP请求 认证方式 JSONP

var timer = setTimeout(() => { // 设置计时器，将在timeout时间之后执行该操作，不同于直接定义，是直接。if return; // 确定此时仍然没有超时,如果此时仍然没有超时，直接取消。目前已经被证

遥望 / 0评论 2019-06-28

JSONP跨域函数的手工实现

queryString += item + '=' + data[item] + '&';

只争朝夕 / 0评论 2016-08-11

php不用jsonp也能跨域

js跨域方式无非就是使用jsonp,这种方法很大众,还有一种方式也可以,那就是在服务器端设置允许任何访问。在CODE上查看代码片派生到我的代码片。http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。HTTPS协议是由SS

austindev / 0评论 2016-05-28

前端跨域策略实践----cors，jsonp

但是，我们如何进行实践呢？向什么服务器发请求？很简单，就在当前网页，打开控制台，输入请求的代码。同时在本地创建一个node服务

zijinmu / 0评论 2019-06-27

ajax跨域 jsonp

js跨域，比如说你点击你本地环境里面的一张页面上的一个按钮，请求服务器端的一个文件。要想成功返回有效数据，那就必须得跨域。dataType:'jsonp', //指定为jsonp类型。jsonpCallba

liuyongfang0 / 0评论 2015-05-03

jsonp跨域请求数据实例—手机号码查询

网上有很多开放的api，我们在本地通过ajax获取数据时，总会碰到一个问题，那就是跨域！如果不借助php等，仅仅通过js怎么解决跨域的问题呢？或许jsonp是个不错的选择。<input type="text"> <sp

只争朝夕 / 0评论 2015-01-24

jquery + jsonp +ajax 跨域访问

js跨域访问有时候确实不好搞定，所以在特定的情形下就能跨域访问，这里我用的是简单的get提交，post很难搞，不借助其他手段根本实现不了，这里只讲get提交，然后获取返回数据，下面一组代码，我验证过的，直接运行即可，一个页面，一个后台java，java用的

Anything / 0评论 2014-09-03

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

写在前面跨域的解决方案有多种，其中最常见的是使用同一服务器下的代理来获取远端数据，再通过ajax进行读取，而在这期间经过了两次请求过程，使得获取数据的效率大大降低，这篇文章蓝飞就为大家介绍一下解决跨域问题的一种比较通用的方案——JSONP。简单的来说，出于

83453065 / 0评论 2014-06-06

JSONP跨域实现

简单的来说，出于安全方面的考虑，页面中的JavaScript无法访问其他服务器上的数据，即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制，实现不同服务器之间通信的效果。

只争朝夕 / 0评论 2014-03-09

跨域jsonp请求

事情是这样的，同事在网站上开发一个小功能，很简单的一个ajaxsubmit，点击按钮，调用后台java程序，返回json，解析，显示，但是他说回调success的data一直是null，但是单独在地址栏请求却能看到返回的数据。我看了一下firefox上请求

dalong / 0评论 2014-02-27

利用Script实现JSONP跨域

我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题.跨域问题是由于javascript语言安全限制中的同源策略造成的.简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端

疯狂的扣子 / 0评论 2014-01-24

sencha touch中JsonP跨域访问返回JSON字符串

Ext.Msg.alert('请求失败','AJAX请求发送失败！modelMap.put;返回值要加上传过来的callback回调函数,这样在客户端解析才不会抛出invalidlabel错误.

Dolphinsz / 0评论 2013-08-14

深入浅出JSONP--解决ajax跨域问题

火狐中请求响应码为200，但是颜色是红色，说明请求失败了。。。百思不得其解，最后发现时jquery发送跨域的ajax请求的原因，解决方法是使用jquery的getJSON方法，同时在请求url的后面加上一个参数：callback=?标示请求成功之后调用jq

欧阳凯少 / 0评论 2013-06-14

ajax，json，跨域jsonp总结

运用js操作DOM，实现动态的局部更新。3.HTTP请求GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量有限制，一般在2000个字符 发送的数据可见，并不安全

张树刚 / 0评论 2019-06-20

使用jsonp实现ajax跨域访问

工作中的一个巧合，提到了ajax跨域访问的问题，刚刚心血来潮，弄了个简单的例子，为便于记忆，将前端和后端代码简单贴下：

yigeng / 0评论 2012-08-31

轻量级网站建设jsonp跨域简单实例

浏览器的同源策略，限制脚本程序只能和同协议，同域名，同端口的脚本进行交互，包括共享和传递变量，cookie的传递。尽管浏览器不允许页面脚本跨域读取数据，但是允许html引用跨域的资源，比如脚本程序，css,图片，等等,因为script,iframe的src

sjunothing / 0评论 2012-08-14

使用JSONP完成HTTPS跨域请求

您的名字与姓氏是什么？[Unknown]：这里填写服务器所在的域名。您的组织单位名称是什么？您所在的城市或区域名称是什么？您所在的州或省份名称是什么？如果使用单向认证下面2，3，4步就不用了。下一步，是将该文件导入到服务器的证书库，添加为一个信任证书：

疯狂的扣子 / 0评论 2012-04-02

jsonp跨域请求详解

前端时间因为太忙，一直没有处理跨域这个事情，今天抽了一个小时轻松解决，突然发现上个月又写了很多重复代码。因为现在公司项目分为多个工程，前后端完全分离，manage工程做所有业务逻辑处理，app、微信两个前置工程通过httpClient去调用manage工程

promiseLOVE / 0评论 2017-07-13

原生JS封装Ajax插件(同域、jsonp跨域)

抛出一个问题，其实所谓的熟悉原生JS，怎样的程度才是熟悉呢？用原生Js封装了一个Ajax插件，引入一般的项目，传传数据，感觉还是可行的。。。简单说说思路，如有不正确的地方，还望指正^_^. Ajax技术的核心是XMLHttpRequest对象，IE5是第一

漂流 / 0评论 2016-05-03

详细解密jsonp跨域请求

using System;using System.Web;string msg = "{\"name\":\"kim\",\"gender\":\"男\",\&qu

文明 / 0评论 2019-04-26

Jsonp 跨域的原理以及Jquery的解决方案

如果要进行跨域请求，我们可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。

舜岳 / 0评论 2011-06-27

基于Jquery的跨域传输数据(JSONP)

> 前端: 代码如下：

ghjcduhvfyjhbf / 0评论 2011-03-10

ajax和jsonp跨域的原理本质详解

为什么会有跨域问题？- 因为有同源策略。同源策略是浏览器的一种安全策略，所谓同源指的是 请求URL地址中的 协议, 域名 和 端口 都相同，只要其中之一不相同就是跨域。JSONP 全称是 JSON with Padding ，是基于 JSON 格式的为解决

zndy0 / 0评论 2017-11-29

Ajax jsonp跨域请求实现方法

简单的来说，出于安全方面的考虑，页面中的JavaScript无法访问其他服务器上的数据，即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制，实现不同服务器之间通信的效果。在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，但img、i

水滴石穿 / 0评论 2019-04-04

jsonp 跨域访问

&quot;); ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;} ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;} ; ; ; ; ; ; ; ; ; ; ; ; ;

前端开发探路者 / 0评论 2016-09-14