您的位置：首页 > Web前端 > JavaScript

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

2017-01-22 15:33 1036 查看

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来实现：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>test</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type: "get",
async: false,
url: "http://encounter.christmas023.space/json.php?name=mavis&age=18",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"message",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success: function(json){
alert('你的名字：' + json.name + ' 年龄： ' + json.age);
},
error: function(){
alert('fail');
}
});
});
</script>
</head>
<body>
</body>
</html>
  • type
    ：请求类型，GET 或 POST,默认为 GET；
  • async
    :true（异步）或 false（同步）,默认情况下为true,同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行;
  • url
    :发送请求的地址(跨域请求时应为绝对地址);
  • dataType
    :指定服务器返回的数据类型;
  • jsonpCallback
    :自定义JSONP回调函数名称;
  • success
    :请求成功后回调函数;
  • error
    :请求失败时调用此方法。

运行结果：

服务器返回的数据类型：

返回一个指定函数名为

message
的回调函数，函数里面包裹的数据为
JSON
格式。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  ajax跨域 json数据
相关文章推荐
新的分享
章节导航