跨域有好多种方式，会根据当前的业务逻辑选择对应方式
这里介绍了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+'\"}")';
相关推荐
在这个"跨域jsonp资料包.zip"中，我们可以深入探讨JSONP的工作原理、应用场景、优缺点以及相关的实现方法。 ### JSONP 的工作原理 1. **同源策略**：浏览器的同源策略限制了JavaScript只能访问与当前页面同源...
【标题】"day10单点登录Redis跨域jsonp共16页.pdf" 提供了几个关键主题，分别是单点登录（Single Sign-On, SSO）、Redis、跨域（Cross-Origin Resource Sharing, CORS）以及JSONP（JSON with Padding）。这些是IT...
本文将深入讲解JSONP的原理及其在解决跨域问题中的应用。 ### JSONP 原理 JSONP 的全称是“JSON with Padding”，它并非一种新的数据格式，而是利用了 `<script>` 标签不受同源策略限制的特点来绕过浏览器的跨域...
本文将详细探讨JSONP的工作原理以及如何在实际项目中使用它来跨域获取JSON数据。 ### JSONP简介 JSONP全称为"JSON Padding"，它并不是JSON的一种新格式，而是一种利用动态创建`<script>`标签来绕过同源策略的技巧...
JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式，设计用来使人类可...随着 CORS（跨源资源共享）等更安全的跨域技术的发展，JSONP 的使用逐渐减少，但仍不失为解决某些特定场景下跨域问题的有效手段。
基于ajax方式的跨域请求jsonp的前后台代码
jsonp解决跨域 JsonP（JSON with Padding）是一种常用的解决跨域请求的技术。在本文中，我们将详细介绍 JsonP 的原理、作用、优缺点和使用场景。 1. 什么是跨域？ 跨域是指在不同域名或端口号之间的请求调用。...
本文将深入探讨如何在SpringBoot框架中解决跨域问题，主要涉及两种方法：JSONP和CORS。 ### JSONP(JSON with Padding) JSONP是一种解决跨域问题的早期方案，它利用了`<script>`标签的`src`属性不受同源策略限制的...
解决跨域封装的jsonp
### 使用JSONP完成HTTP和HTTPS之间的跨域访问 在现代Web开发中，跨域问题是一项常见挑战，尤其是在涉及不同协议（如HTTP与HTTPS）的数据交互时。本文将深入探讨如何利用JSONP（JSON with Padding）技术来实现HTTP与...
跨域_jsonp_原理，了解json的原理，等于我们掌握json的技术有帮助
1. 通过 jsonp 跨域：jsonp 是一种常见的解决方案，通常用于减轻 web 服务器的负载。我们可以通过动态创建 script 标签，请求一个带参数的网址实现跨域请求。 2. document.domain + iframe 跨域：此方案仅限主域相同...
03_跨域与JSONP
JSONP跨域和CORS跨域 什么是跨域？ 跨域：指的是浏览器不能执行其它网站的脚本，它是由浏览器的同源策略造成的，是浏览器的安全限制！ 同源策略 同源策略：域名、协议、端口均相同。 浏览器执行JavaScript脚本时，会...
2. **JSONP跨域**: JSONP的工作方式不同，它不依赖于XMLHttpRequest对象。首先，客户端在HTML页面中定义一个全局函数，如`handleData(data)`。然后，创建一个`<script>`标签，将`src`属性设置为服务器的URL，URL中...
在本文中，我们将讨论两个 Ajax 跨域实例，分别使用 JSONP 和 jQuery 来实现跨域操作。 知识点一：JSONP 跨域 JSONP（JSON with Padding）是一种用于跨域操作的技术，它可以突破浏览器的同源策略限制。JSONP 的...
JSONP（JSON with Padding）是一种跨域数据交互协议，它利用了`<script>`标签可以跨域请求资源的特性，为了解决JavaScript在浏览器端由于同源策略限制无法直接访问不同源的HTTP请求的问题。在本场景中，前端使用...
JSONP（JSON with Padding）是一种常见的解决浏览器同源策略限制的跨域数据交互方式，尤其在JavaScript中广泛使用。在本项目"JSONP跨域实现百度搜索功能(v1.0.0)"中，我们将深入探讨如何利用JSONP技术来实现在网页上...
然而，Ajax技术在实现动态网页交互时常常需要跨越这个限制，这时就引入了JSONP（JSON with Padding）作为跨域请求的一种解决方案。本文将详细介绍JSONP的工作原理以及如何在ASP.NET网站开发中应用JSONP解决Ajax跨域...