跨域请求之JSONP 一

时间：2021-09-06 18:41:13

跨域请求之JSONP 一

跨域请求的方式有很多种，

  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标记（还有一些清理工作如避免部分浏览器内存泄露等）

接口

1
2
3
4
5
Sjax.load(
    url, // 跨越请求的URL
    success,  // 回调函数，必须定义一个形参，用于接收后台返回的全局变量jsonp （约定后台返回如jsonp = {...}结构）
    timestamp, // 传true会加一个时间戳，防止缓存，默认不加
);

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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，它返回如下

1
jsonp = {name:'jack'};

因为是测试，这里使用最简单的方式实现。请求的后台其实不必是js文件，可以是php，java等任何后台语言，它们可能会连接数据库进行一系列的业务查询。总之它最后返回的结构必须变量jsonp，这个变量就是一个js对象，至于有多复杂则无需关注。

好了，试试吧

跨域请求之JSONP 一的更多相关文章

  1. js跨域请求（jsonp）

    jsonp是跨域请求的手段之一. jsonp的原理: 先来看看下面这段代码 <!DOCTYPE html> <html lang="en"> <hea ...

  2. JAVAEE——宜立方商城11：sso登录注册功能实现、通过token获得用户信息、Ajax跨域请求（jsonp）

    1. 学习计划 第十一天: 1.sso注册功能实现 2.sso登录功能实现 3.通过token获得用户信息 4.Ajax跨域请求(jsonp) 2. Sso系统工程搭建 需要创建一个sso服务工程,可 ...

  3. Ajax&plus;Spring MVC实现跨域请求（JSONP）JSONP 跨域

    JSONP原理及实现 接下来,来实际模拟一个跨域请求的解决方案.后端为Spring MVC架构的,前端则通过Ajax进行跨域访问. 1.首先客户端需要注册一个callback(服务端通过该callba ...

  4. 跨域请求，jsonp

    其实跨域请求,只需要在请求的url后面加上callback=?即可. 提供以下两种获取跨域的ajax的写法,都是基于jQuery.都已经成功使用,兼容做到ie7,(ie6未测试);案例地址来自豆瓣开放 ...

  5. Django跨域请求之JSONP和CORS

    现在来新建一个Django项目server01,url配置为 url(r'^getData.html$',views.get_data) 其对应的视图函数为get_data: from django. ...

  6. Ajax&plus;Spring MVC实现跨域请求（JSONP）&lpar;转&rpar;

    背景: AJAX向后台(springmvc)发送请求,报错:已阻止交叉源请求:同源策略不允许读取 http://127.0.0.1:8080/DevInfoWeb/getJsonp 上的远程资源.可 ...

  7. 搞定所有的跨域请求问题 jsonp CORS

    网上各种跨域教程,各种实践,各种问答,除了简单的 jsonp 以外,很多说 CORS 的都是行不通的,老是缺那么一两个关键的配置.本文只想解决问题,所有的代码经过亲自实践.   本文解决跨域中的 ge ...

  8. 跨域请求：JSONP

    在JavaScript中,有一个很重要的安全性限制,被称为"同源策略".即JavaScript只能访问与包含它的文档在同一域下的内容.然而,当进行一些比较深入的前端编程的时候,不可 ...

  9. 跨域请求之jsonp的实现方式

    ajax请求受同源策略影响,不允许进行跨域请求,而script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,在sr ...

随机推荐

  1. &lt&semi;精通JavaScript&gt&semi;---阅读笔记01

    下面是阅读精通JavaScript书做的相关笔记. JS中的函数重载 函数重载必须依赖两件事情:判断传入参数数量的能力和判断传入参数类型的能力,在js中每个函数都带有一个仅在这个函数范围内作用的变量, ...

  2. Callbacks vs Events

    前言:本文翻译自Dean Edwards的一篇文章,原文地址:http://dean.edwards.name/weblog/2009/03/callbacks-vs-events/. 文章主要指出了 ...

  3. 提升linux下tcp服务器并发连接数限制

    1.修改用户进程可打开文件数限制   在Linux平台上,无论编写客户端程序还是服务端程序,在进行高并发TCP连接处理时,最高的并发数量都要受到系统对用户单一进程同时可打开文件数量的限制(这是因为系统 ...

  4. 自己做jQuery插件：将audio5js封装成jQuery语音播放插件

    日前的一个项目需要用到语音播放功能.发现Audio5js符合需求且使用简单,又鉴于jQuery控件便于开发操作,于是有了以下的封装. 首先先简单介绍一下Audio5js吧. Audio5js是一个能够 ...

  5. 安装mysql8&period;0&period;12

    安装mysql8.0.12 https://blog.csdn.net/zwj1030711290/article/details/80039780 问题1:忘记记录日志打印的密码就把窗口给关了 解决 ...

  6. 多种解法解决n皇后问题

    多种解法解决n皇后问题 0x1 目的 ​ 深入掌握栈应用的算法和设计 0x2 内容 ​ 编写一个程序exp3-8.cpp求解n皇后问题. 0x3 问题描述 即在n×n的方格棋盘上,放置n个皇后,要求每 ...

  7. web Function函数

    javascript中函数定义 js中函数一般定义如下: function functionName(arg0,arg1,arg2,...,argN) { statements;}其中function ...

  8. idea svn performing vcs refresh 很长时间

    go to settings - version control - background set changelists to cache initially to minimal value (1 ...

  9. 在Android中实现图片的裁剪

        本实例的功能是将用户选择的图片裁剪后放入ImagView,布局文件是个Button和ImageView.为了图片的正常显示,我们在裁剪后先将裁剪好的图片先存放到SD卡中,这样就能在以后开启应用 ...

  10. How to work with the snap environment

    How to work with the snap environment SummaryThe snap environment manages snap agents and snap toler ...

相关文章