什么是Ajax?
异步的javascript和xml,要以实现网页的无刷新的更新。
Ajax特点
在Web上通过Javascript,使用XmlHttpRequest异步的请求,实现无刷新的Web界面
Ajax的请求流程
1.来自客户端的异步请求,通过ajax enginee发送请求到服务端
2.服务端接收到请求,并处理请求,在服务端处理请求的过程中,客户端可以继续用户的活动
3.服务端处理完之后,会将需要的数据以xml或其它格式的数据发送到客户端
4.客户端获取到服务端发回的数据后,可以进行客户端的数据渲染操作。
与传统Web开发的比较
使用原生态的js实现ajax
1.在客户端确定请求的时机(即监听客户端的事件)
2.创建xmlHttpRequest请求对象(ajax enginee中的核心对象,现在主流浏览器都内置了该对象)
3.通过xmlHttpRequest对象调用Open()方法设置参数,第一个参数是请求的方式,第二个请求的服务端URL,第三个参数表示是否是异步,true是异步,false是同步
4.通过xmlHttpRequest对象调用Send()方法发送请求
5.监听xmlHttpRequest对象的onreadychanged事件,在事件处理程序中判断xmlHttpRequest.readystate4,xmlHttpRequest.status200,通过xmlHttpRequest.responseText属性获得服务端发回的文本。
比如:
//创建xmlhttprequest异步请求对象
var xmlhttp;
try
{
xmlhttp=new XMLHttpRequest();//IE7+,firefox,Chrome,Safari,Opera
}
catch(Error)
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//IE7-
}
//组装请求的服务端路径
var path = "WebForm2.aspx?username=" + userName + "&pwd=" + pwd;
//4.参数设置
//第一个参数:请求的方式 ,可以是get或post
//第二个参数:请求的服务器端路径
//第三个参数:是否是异步请求,true:异步请求,false:同步请求
xmlhttp.open("get", path, true);
//通过xmlhttprequest向服务端发送请求
xmlhttp.send();
//服务端什么时候处理好,客户端并不知道,所以要去监听xmlhttprequest的onreadystatechange的事件
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status==200) {
var result=xmlhttp.responseText;//responseText:获得服务端返回给客户端的文本
if (result == "1")
window.location.href = "main.aspx";
else if (result == "0")
alert("用户名或密码错误,登录失败");
}
}
使用jquery中的ajax方法实现ajax
type:请求的类型
data:发送的数据,是以key/value发送
success:成功时的回调函数
error:失败时的回调函数
dataType:服务端发回的数据类型