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的特性
基于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
:请求失败时调用此方法。
运行结果:
服务器返回的数据类型: