1. 第一步(得到XMLHttpRequest)
*Ajax其实只需要学习一个对象:XMLHttpRequest,如果掌握了 它,就掌握了Ajax。
*得到XMLHttpRequest
===>大多数浏览器支持:var xmlHttp = new XMLHttpRequest();
===>IE6.0:var xmlHttp = new ActiveXObject(“Msxm12.XMLHTTP”);
===>IE5.5:var xmlHttp =new ActiveXObject(“Microsoft.XMLHTTP”);
*编写创建XmlHttpRequest(异步对象)对象的函数
function createXMLHttpRequest()
{
try{
return new XMLHttpRequest();
}
catch(e){
try{
return new ActiveXObject("Msxm12.XMLHTTP");
}
catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){throw e;}
}
}
}
2.第二步(打开与服务器的连接)
*xmlHttp.open():用来打开与服务器的连接,它需要三个参数:
===>请求方式:可以是GET或POST
===>请求的URL:指定服务端资源:例如/Demo/AServlet
===>请求是否为异步:如果为true代表发送异步请求,否则同步请求。
eg:
xmlHttp.open("GET","/Demo/AServlet",true);
xmlHttp.open("POST","/Demo/AServlet",true);
3.第三步(发送请求)
*xmlHttp.send(null):如果不给null可能会造成部分浏览器无法发送!
===>参数:就是请求体内容!如果是GET请求,必须给出null。
如果发送时带有参数一般使用post请求
===>如果是POST请求
1.设置Content-Type请求头:
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
2.send:
xmlHttp("username=zhangSan&password=123")
4.第四步(得到响应)
*在xmlHttp对象的一个事件上注册监听器:onreadystatechange
*xmlHttp对象一共有5个状态:
===>0状态:刚创建xmHttp对象,还没有调用open()方法;
===>1状态:请求开始,还没有调用send()方法;
===>2状态:调用完了send()方法;
===>3状态:服务器开始响应,但不表示响应结束;
===>4状态:服务器响应结束;(通常我们只关心这个状态!)
*得到xmlHttp对象的状态:
==>
//state可能是0,1,2,3,4
var stata = xmlHttp.readyState;
*得到服务器响应的状态码:
==>
//例如为200,404,500
var stata = xmlHttp.status;
*得到服务器响应的内容:
==>
//得到服务器响应的文本格式的内容
var content = xmlHttp.responseText;
//得到服务器响应的xml响应的内容,它是Document对象
var content = xmlHttp.responseXML;
示例:
//当状态改变时会调用该方法
xmlHttp.onreadystatchange = function()
{
//双重判断:判断是否为4状态,而且还要判断是否为200
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
//获取服务器的响应内容
var text = xmlHttp.responseText;
}
}
DEMO
//对于不同的浏览器 创建不同的XMLHttpRequest对象
function createHttpRequest()
{
try{
return new XMLHttpRequest();
}
catch(e)
{
try{
return new ActiveXObject("Msxm12.XMLHTTP");
}
catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
alert("上古浏览器吧你!");
throw e;}
}
}
}
/*
*
* object的参数
* method-->可选
* url
* async-->可选
* params-->可选
* type-->可选
* callback
* Object是一个json
*/
//调用该方法时需要创建一个json对象来进行调用
function ajax(object)
{
var xmlHttp=createHttpRequest();
if(object.method==undefined)
{
object.method="GET";
}
if(object.async==undefined)
{
object.async=true;
}
xmlHttp.open(object.method, object.url, object.async);
if(object.method=="POST")
{
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
}
xmlHttp.send(object.params);
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4&&xmlHttp.status==200)
{
var data;
if(object.type==undefined)
{
data=xmlHttp.responseText;
}
else if(object.type=="text")
{
data=xmlHttp.responseText;
}
else if(object.type=="json")
{
data=eval("("+xmlHttp.responseText+")");
}
else if(object.type=="xml")
{
data=xmlHttp.responseXML;
}
object.callback(data);
}
};
}