从外部获取ajax jsonp数据,通过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来实现：

test

$(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');

}

});

});

type：请求类型，GET 或 POST,默认为 GET；

async:true(异步)或 false(同步),默认情况下为true,同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行;

url:发送请求的地址(跨域请求时应为绝对地址);

dataType:指定服务器返回的数据类型;

jsonpCallback:自定义JSONP回调函数名称;

success:请求成功后回调函数;

error:请求失败时调用此方法。

运行结果：

服务器返回的数据类型：

返回一个指定函数名为message的回调函数，函数里面包裹的数据为JSON格式。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。