通过jsonp获取json数据实现AJAX跨域请求

2020-05-24 21:38:55易采站长站整理

AJAX(

异步的 JavaScript 和 XML
)是用于创建快速动态网页的一种技术,它在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页,ajax 使用
XMLHttpRequest
对象在后台与服务器交换数据,XMLHttpRequest 是 AJAX 的基础,它允许客户端 JavaScript 通过
HTTP
请求连接到远程服务器。

但是,由于受到浏览器的限制,这种方法不可以进行跨域访问,如果使用这种方法进行跨域访问则会出现安全问题。不过,我们可以发现,在web页面跨域调用 js文件时,不会受到浏览器的限制,所以我们可以利用将远程服务器端的数据装入js格式的文件,然后再用来供客户端进行调用。

JSON(

JavaScript 对象表示法
)是一种轻量级的文本数据交换格式,它具有自我描述性,易于理解。JSON 可通过
JavaScript 
进行解析,JSON 数据可使用
 AJAX 
进行传输。

JSON实例:


{
"employees": [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName":"Carter" }
] }

JSON 语法是 JavaScript 对象表示法语法的子集:

数据在

名称/值
对中, 数据由
逗号
分隔 ,
花括号
保存对象,
方括号
保存
数组

JSON的特性

纯文本,易于跨平台传递
Javascript原生支持,后台语言几乎全部支持
使用轻量级的文本数据交换格式,适合在互联网中传递
比 XML 更小、更快,更易解析。

基于

JSON
的这些特性,可以通过使服务器动态生成
JSON
文件,然后将客户端需要的数据装入这个文件,再将该文件调回客户端供客户端使用。为了便于客户端使用数据,逐渐形成了一种非正式传输协议
JSONP
,该协议的一个要点就是允许用户传递一个
callback
参数给服务端,然后服务端返回数据时会将这个
callback
参数作为函数名来装入
JSON
数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

如何使用JSONP

一种简单的方式就是使用jQuery来实现: