跨域请求的方式有很多种，
1，iframe
2，document.domain
3，window.name
4，script
5，XDomainRequest (IE8+)
6，XMLHTTPRequest (Firefox3.5+)
7，postMessage (HTML5)
8，后台代理
...
它们有各自的优缺点，返回的数据格式也各不同，应根据需求慎重选择。比如iframe返回html片段就比较适合，费老劲用它返回JSON就得不偿失了。这篇开始我将打造一个实用的跨域请求工具Sjax。使用script请求的最大缺点，挑战是错误处理。比如404错误，它不象XMLHTTPRequest能准确的返回状态码404。我把这个放在最后一篇。
本系列主要描述以上列举的方式4，即通过script返回JSON格式数据数据。这种方式现在称为JSONP。JSON是目前前后台沟通使用最流行，也最广泛的格式之一。相对于早期的AJAX返回XML（AJAX中的X就是XML），JSON显得更轻量级，没有多余的Tag标记，解析也是原生的。XML返回到前端后先转成文档，通过DOM API一层层的解析。解析DOM是开销比较大的，尤其在早期的IE版本中（IE6/7/8），core js与dom沟通的代价是很大的。
JSONP的实现思路很简单
1, 前端创建script标记，设置src，添加到head中（你可以往body中添加）。
2, 后台返回一个js变量jsonp，这个jsonp就是请求后的JSON数据。
3, 回调完成后删除script标记（还有一些清理工作如避免部分浏览器内存泄露等）。
接口
Sjax.load(
url, // 跨越请求的URL
success, // 回调函数，必须定义一个形参，用于接收后台返回的全局变量jsonp （约定后台返回如jsonp = {...}结构）
timestamp, // 传true会加一个时间戳，防止缓存，默认不加
);
示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>sjax_0.1.js by snandy</title>
<script src="http://files.cnblogs.com/snandy/sjax_0.1.js"></script>
</head>
<body>
<p id="p1" style="background:gold;"></p>
<input type="button" value="Get Name" onclick="clk()"/>
<script type="text/javascript">
function clk(){
Sjax.load(
'http://files.cnblogs.com/snandy/jsonp.js',
function(){
document.getElementById('p1').innerHTML = 'Hi, ' + jsonp.name;
}
);
}
</script>
</body>
</html>
这个html实现一个最简单的前后台交互功能，点击按钮“Get Name”，获取到name后显示在段落P上。
clk函数中调用Sjax.load方法，Sjax中的S指script。之前我的Ajax系列中使用的Ajax命名，这里就使用了Sjax。
请求的后台url是jsonp.js，它返回如下
jsonp = {name:'jack'};
因为是测试，这里使用最简单的方式实现。请求的后台其实不必是js文件，可以是php，java等任何后台语言，它们可能会连接数据库进行一系列的业务查询。总之它最后返回的结构必须变量jsonp，这个变量就是一个js对象，至于有多复杂则无需关注。
分享到：
相关推荐
"jsonp跨域请求"可能是服务器返回的示例数据，模拟了JSONP的跨域请求过程。 总结，JSONP和CORS是解决JavaScript跨域问题的两种主要方法，它们各有优缺点，适用于不同的场景。JSONP简单易用，但安全性较低；CORS则更...
基于ajax方式的跨域请求jsonp的前后台代码
**AJAX和JSONP跨域请求的实现过程** 1. **AJAX跨域**: 通常，AJAX请求受到同源策略限制。为实现跨域，我们可以使用CORS（Cross-Origin Resource Sharing）机制。服务器需要在响应头中添加`Access-Control-Allow-...
2. **预检请求（Preflight Request）**：如果请求不符合简单请求的条件，浏览器会先发送一个`OPTIONS`请求到服务器，询问是否允许跨域。服务器响应中除了`Access-Control-Allow-Origin`，还需要包含`Access-Control-...
然而，Ajax技术在实现动态网页交互时常常需要跨越这个限制，这时就引入了JSONP（JSON with Padding）作为跨域请求的一种解决方案。本文将详细介绍JSONP的工作原理以及如何在ASP.NET网站开发中应用JSONP解决Ajax跨域...
这一步对于简单的跨域请求不是必需的。 2. **配置Tomcat以支持HTTPS**： - 在Tomcat的`conf/server.xml`文件中，找到或添加`<Connector>`标签以启用HTTPS连接： ```xml maxThreads="150" scheme=...
**Ajax跨域请求问题与jQuery JSONP解析** 在Web开发中，Ajax技术被广泛用于实现页面的异步更新，但浏览器的同源策略（Same-Origin Policy）限制了Ajax请求只能向同源（协议、域名、端口均相同）的服务器发送。这在...
由于浏览器允许不同源的`<script>`标签加载和执行，开发者可以利用这一点来实现跨域请求。 ### JSONP工作原理 1. **客户端（浏览器）**：在JavaScript中，我们创建一个`<script>`元素，并设置其`src`属性为服务器...
JSONP（JSON with Padding）是一种解决跨域请求的方法，即在客户端通过 script 标签请求服务器端的数据，然后服务器端将数据以 JSON 格式返回，并在返回数据中包含一个回调函数，以便客户端可以将数据处理。...
- **JSONP**（JSON with Padding）是一种利用`<script>`标签不受同源策略限制的特点来实现跨域请求的技术。 - JSONP的实现原理是动态插入`<script>`标签，并将回调函数名作为参数传递给服务器，服务器返回的结果会在...
JSONP跨域和CORS跨域 什么是跨域？ 跨域：指的是浏览器不能执行其它网站的脚本，它是由浏览器的同源策略造成的，是浏览器的安全限制！ 同源策略 同源策略：域名、协议、端口均相同。 浏览器执行JavaScript脚本时，会...
JSONP（JSON with Padding）是一种跨域数据交互协议，它利用了`<script>`标签可以跨域请求资源的特性，为了解决JavaScript在浏览器端由于同源策略限制无法直接访问不同源的HTTP请求的问题。在本场景中，前端使用...
【Ajax跨域请求WebService.asmx】是一个常见的Web开发技术应用场景，主要涉及到JavaScript的Ajax技术、C#编程语言以及ASP.NET的WebService组件。Ajax（Asynchronous JavaScript and XML）是一种在不刷新整个页面的...
SignalR 分：PersistentConnection和Hub 2种模式。跨域又分：UseCors和JsonP 2种方法 所以例子写了4种。介绍：http://www.cnblogs.com/shikyoh/p/6272679.html
JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。
JSONP是一种非官方的协议，通过动态创建`<script>`标签来实现跨域请求。由于`<script>`标签不受同源策略限制，可以加载任何源的JavaScript文件，开发者会在请求的URL中添加一个回调函数名参数，服务器接收到请求后，...
在这种背景下，Jsonp（JSON with Padding）应运而生，它是一种允许跨域数据交互的技术，特别适用于Ajax请求。 Jsonp的核心思想是利用HTML `<script>`标签的src属性可以不受同源策略限制的特性。它的工作流程如下： ...
JSONP（JSON with Padding）是一种常见的解决JavaScript跨域问题的技术。由于浏览器的同源策略限制，JavaScript通常不能向不同源的服务器...了解和掌握JSONP有助于理解跨域请求的原理，为解决实际问题提供更多的选择。
JSONP（JSON with Padding）是一种解决跨域请求的方法，它利用了script标签不受同源策略限制的特性，使得客户端可以请求跨域的JSON数据。同源策略是浏览器的一个安全机制，它阻止了网页的脚本向非同源服务器发送请求...