JSON与JSONP技术详解：跨域解决方案对比

JSON基础与解析方法

JSON

1. JSON 的值可以是以下类型：

① 数字（整数或浮点数），例如123，1.23

② 字符串（需包含在双引号中）

③ 布尔值（true 或 false）

④ 数组（需包含在方括号中）

⑤ 对象（需包含在花括号中）

⑥ null

2. JSON 解析方法

① eval('(' + jsondata + ')' ); 该方法永远不安全，存在代码注入风险

② JSON.parse(jsondata);

JSONLint：用于校验 JSON 字符串的工具

jQuery Ajax配置详解

3. jQuery 实现 Ajax

jQuery.ajax([settings])

type ：请求类型

url ：发送请求的地址

data ：一个对象，包含随请求发送到服务器的数据

dataType ：预期服务器返回的数据类型。若未指定，jQuery 将根据 HTTP 包 MIME 信息智能判断；通常设置为 "json"

success ：请求成功后的回调函数，接收返回数据及包含成功代码的字符串

error ：请求失败时调用的函数，接收 XMLHttpRequest 对象

跨域问题与JSONP解决方案

JSONP

跨域

域名地址的组成要素：

http://www .abc.com :8080 / scripts/jquery.js

协议://子域名. 主域名 :端口号 / 请求资源地址

当协议、子域名、主域名、端口号中任意一项不同时，均视为不同域

不同域之间相互请求资源，即称为“跨域”

出于安全考虑，JavaScript 不允许跨域调用其他页面的对象。

跨域的定义：受限于 JavaScript 同源策略，a.com 域名下的 JS 无法操作 b.com 或 c.a.com 域名下的对象

处理跨域的方法：

—— 代理（属于后台技术）例如北京 Web 服务器后台调用上海服务器服务，再将响应结果返回前端，使前端调用北京同域服务器与调用上海服务效果相同。

—— JSONP

a 域名声明，b 域名调用

注意：JSONP 仅支持 GET 请求，不支持 POST 请求（存在局限性）

—— XHR2

HTML5 提供的 XMLHttpRequest Level2 已实现跨域访问及其他新功能

IE10 以下版本不支持

服务端需进行少量改造：

header("Access-Control-Allow-Origin:"); 表示允许所有服务器访问，也可替换为特定域名。例如服务器在上海，将 * 替换为北京服务器域名，则仅允许北京域名访问

header("Access-Control-Allow-Methods:POST,GET");

以下介绍 JSONP 的优缺点。

同源策略：即 JavaScript 只能访问与包含它的文档在同一域下的内容。JSONP 可突破同源策略，采用另一种协议通信。

JSONP 的优点：不受 XMLHttpRequest 对象实现的 Ajax 请求的同源策略限制；兼容性更好，古老浏览器均可运行，无需 XMLHttpRequest 或 ActiveX 支持；请求完成后可通过调用 callback 方式回传结果。

JSONP 的缺点：仅支持 GET 请求，不支持 POST 等其他 HTTP 请求类型；仅支持跨域 HTTP 请求场景，无法解决不同域的两个页面之间如何进行 JavaScript 调用的问题。

以上所述是小编给大家介绍的 json 与 jsonp 知识小结(推荐)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！