通过jsonp获取json数据实现AJAX跨域请求
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
通过jsonp获取json数据实现AJAX跨域请求
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="/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.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格式。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。