| 标题 | JSONP跨域请求实例详解 |
| 内容 | JSOP简介 JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。 跨域请求的方式有很多种： 1.iframe 2.document.domain 3.window.name 4.script 5.XDomainRequest (IE8+) 6.XMLHTTPRequest (Firefox3.5+) 7.postMessage (HTML5) 8.后台代理 9.... 它们有各自的优缺点，返回的数据格式也各不同，应根据需求慎重选择。比如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"></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跨域请求实例详解，希望对大家有所帮助 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。