Ajax
Ajax是 Asynchronus JavaScript and XML 的缩写,其核心是通过XMLHttpRequest对象,以一种异步的方式,向服务器发送请求,并通过该对象接收请求返回的数据,从而完成人机交互的数据操作。
jQuery中的load方法
load(url,[data],[callback])
url为被加载的页面地址
[data] 为发送到服务器的数据
[callback] 加载成功后,返回加载页面的回调函数。
script
$("#button1").click(){
$("#divTip").load("b.html");
}
b.html中的divContent元素
$("#divTip").load("b.html.divContent");
全局函数 getJSON()
$.getJSON(url,[data],[callback])
url请求地址
[data] 为发送到服务器的数据
[callback] 加载成功后,返回加载页面的回调函数。
script
$("#button1").click(){
$.getJSON("UserInfo.json",function(data){
$("#divTip").empty(); //清空标记中的内容
var strHTML="";//初始化保存内容变量
$.each(data,function(InfoIndex,Info){
strHTML+="姓名:"+Info["name"]+"<br>";
strHTML+="性别"+Info["sex"]+"<br>";
strHTML+="邮箱"+Info["email"]+"<br>";
}
$("#divTip").html(strHTML);//显示处理后的数据
}
}
UserInfo.json
[{
"name":"JACK",
"sex":"男",
"email":cc@cc.com"
},
{
"name":"Mack",
"sex":"男",
"email":mack@cc.com"
}]
全局变量 getScript()
全局变量 getScript()实现异步获取数据
$("#button").click(
function(){
$.getScript("UserInfo.js")
});
UserInfo.js
var data=[
{
"name":"Jack",
"sex":"男",
"email":“jack@jack.com”
},
{
"name":"lucy",
"sex":"女",
"email":" lucy@lucy.com"
}];
var strHTML="";//初始化保存内容变量
$.each(data , function () { //遍历获取的数据
strHTML+="姓名:"+this["name"]+"<br>";
strHTML+="性别:"+this["sex"]+"<br>";
strHTML+="邮箱:"+this["emai"l]+"<br>";
})
$("#divHTML").html(strHTML); //显示处理后的数据
与所有全局变量一样,getScript() 也有一个回调函数,该回调函数在文件加载后执行,
如代码“$.getScript("UserInfo.js”,function(){ alert{ " 加载成功 " }; }); 表示在文件加载成功后,弹出对话框“加载成功”