AJAX
1. Ajax概述 1-1
1.1. Ajax是什么 1-1
1.2. Ajax解决了什么问题 1-1
1.3. Ajax应用模型 1-2
2. Ajax编程实现 2-2
2.1. Ajax编程步骤 2-2
2.2. Ajax编程实现 2-3
2.2.1. 创建Ajax请求对象 2-3
2.2.2. 初始化Ajax请求 2-3
2.2.3. Ajax响应处理 2-4
2.3. Ajax编程增强 2-4
2.3.1. Ajax异步GET请求 2-4
2.3.2. Ajaxpost请求 2-5
3. JQuery中的Ajax应用 3-6
3.1. load函数应用 3-6
3.2. ajax函数应用 3-6
3.3. getJson函数应用 3-7
3.4. post函数应用 3-7
4. 总结 4-8
4.1. 重点和难点分析 4-8
4.2. 常见FAQ 4-8
Ajax概述
Ajax是什么
Ajax即AsynchronousJavascriptAndXML，是WEB应用程序开发的一种方法它使用客户端脚本与web整个页面还是刷新局部页面?)
用户体验问题加载速度快
Ajax异步Web应用模型：
Ajax编程实现
Ajax编程步骤
获取Ajax请求对象(由浏览器端的Ajax引擎提供到服务端监听:4,200)
局部刷新页面(通过服务端返回的数据
Ajax编程实现
创建Ajax请求对象
functiongetRequestObject(){
if(window.XMLHttpRequest){
//Opera,Safari,Mozilla,Chrome,InternetExplorer7,andIE8.
return(newXMLHttpRequest());
}elseif(window.ActiveXObject){
//VersionforInternetExplorer5.5and6
return(newActiveXObject("Microsoft.XMLHTTP"));
}else{
//Failsonolderandnonstandardbrowsers.
return(null);
}
}
初始化Ajax请求
functionsendRequest(){
varrequest=getRequestObject();
//Codetocallwhenserverresponds
request.onreadystatechange=
function(){handleResponse(request)};
//URLofserver-sideresource,trueissendrequestasynchronously
request.open("GET","message-data.html",true);
//alwaysnullforgetrequest
request.send(null);
}
Ajax响应处理
functionhandleResponse(request){
//4meansresponsefromserveriscomplete
if(request.readyState==4&&request.status==200){
//alert(request.responseText);
htmlInsert(resultRegion,request.responseText);
}
}
functionhtmlInsert(id,htmlData){
document.getElementById(id).innerHTML=htmlData;
}
Ajax编程增强
Ajax异步GET请求
functionshowTimeInCity(inputField,resultRegion){
varbaseAddress="show-time-in-city";
vardata="city="+getValue(inputField);
varaddress=baseAddress+"?"+data;
ajaxResult(address,resultRegion);
}
functionajaxResult(address,resultRegion){
varrequest=getRequestObject();
request.onreadystatechange=
function(){showResponseText(request,
resultRegion);};
request.open("GET",address,true);
request.send(null);
}
functiongetValue(id){
return(escape(document.getElementById(id).value));
}
functionshowResponseText(request,resultRegion){
if((request.readyState==4)&&
(request.status==200)){
htmlInsert(resultRegion,request.responseText);
}
}
Ajaxpost请求
functionshowTimeInCityPost(inputField,resultRegion){
varaddress="show-time-in-city";
vardata="city="+getValue(inputField);
ajaxResultPost(address,data,resultRegion);
}
functionajaxResultPost(address,data,resultRegion){
varrequest=getRequestObject();
request.onreadystatechange=
function(){showResponseText(request,
resultRegion);};
request.open("POST",address,true);
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send(data);
}
functionshowResponseText(request,resultRegion){
if((request.readyState==4)&&(request.status==200)){
htmlInsert(resultRegion,request.responseText);
}
}
JQuery中的Ajax应用
load函数应用
jquery中的load函数一般用于某个位置异步加载某个
页面
语法:load(url,[data],[callback])
其中:
url表示远程一个地址
data要传递数据key/value)
callback表示一个回调函数
例如$("#time-result-1").load("listUI.do");
例如:案例2
$("body").load("listUI.do",{color:red},function(){
…..
});
ajax函数应用
juqery中的ajax函数用于向服务端发起一个异步的ajax请求.
$.ajax({url:"address",
type:”GET”,
data:{param1:"foobar",param2:"baz“},
dataType:"json",
success:successHandlerFunction,
error:errorHandlerFunction,
cache:false,
})
Ajax函数应用案例
$(function(){
$("#data-button-2").click(processAjaxRequest);
});
functionprocessAjaxRequest(){
varparams={param1:$("#field3").val(),param2:$("#field4").val()};
$.ajax({url:"doFindPageObjects.do",
data:params,
success:function(result){
……..
});
}
getJson函数应用
Jquery中的getJSON函数用于向服务端发起GET请求
获取json格式的数据
$.getJSON("url",[data],[callback])
例如:
$.getJSON(“doFindPageObjects.do”,{pageCurrent:1},function(result){
//处理返回结果})
post函数应用
POST方法为中的发送Ajaxpost请求的一种方法
语法:post(url,[data],[callback])
例如:
$.post("doFindPageObjects.do",{pageCurrent:1},function(result){
…..
})
总结
重点和难点分析
常见FAQ
1-2
|
|
