AJAX开发学习笔记1

 AJAX开发框架：

A:初始化对象并发出XMLHttpRequest请求

为了让JavaScript可以向服务器发送Http请求，必须使用XMLHttpRequest对象。使用之前，要先将XMLHttpRequest对象实例化。由于浏览器的不同，实例化的过程不同，IE以ActiveX控件形式提供，Mozilla等浏览器则直接以XMLHttpRequest类的形式提供。为了让编写的程序能够跨浏览器运行，要这样写。

if(window.XMLHttpRequest)

{//Mozilla

http_request = new XMLHttpRequest();

}

else if(window.ActiveXObject)

{//IE

http_request = new ActiveXObject("Microsoft.XMLHTTP");

}

有些Mozilla浏览器处理服务器返回的未包含XML mime-type头部信息的内容时会出错。因此要确保返回的内容包含text/xml信息。

http_request = new XMLHttpRequest();

http_request.overrideMimeType("text/xml");

 

B:指定相应处理函数

指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名赋给XMLHttpRequest对象的onreadystatechange属性就可以了。比如：

http_request.onreadystatechange=processRequest;

其中processRequest这个函数名不加括号，不指定参数。也可以用Javascript即时定义函数的方式相应函数。

比如：

http_request.onreadystatechange=function(){};

 

C:发出Http请求

指定响应处理函数后就可以向服务器发出Http请求了。这一步调用XMLHttpRequest对象的open和send方法。

比如：

http_request.open('GET','http://www.example.org/some.file',true);

http_request.send(null);

open函数的第一个参数是Http请求的方法：Get,Post,Head

open函数的第二个参数是目标url。基于安全的考虑，这个URL只能是同网域的，否则会提示没有权限的错误。目标URL处理XMLHttpRequest的请求和普通Http请求一样，

open函数的第三个参数是指示是否在等待服务器返回信息的时间内执行下面的代码。如果为true则不会执行，直到服务器返回信息。默认为true。

在调用send函数之前，如果要传送文件，或以Post内容给服务器，必须先调用setRequestHeader方法，修改MIME类别。

比如：

http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

这时信息以查询字符串的形式给出，作为send的参数。

如：name=value&anothername=othervalue&so=on

 

D:处理服务器返回信息

B中已经指定了处理返回信息的指定的函数：processRequest

首先，检查XMLHttpRequest对象的readyState的值，判断请求目前的状态。参照前文的属性表可以知道，readyState的值为4的时候，代表服务器已经传回所有信息，可以处理信息并更新页面内容了。

比如：

if(http_request.readyState==4)

 

{

//信息已经返回，可以处理

}

else

{

//信息还没返回，等待

}

服务器返回信息后还要判断返回的Http状态码，确定返回的页面没有错误。其中200代表页面正常。

比如：

if(http_request.status==200)

{

//页面正常，可以开始处理信息

}

else

{

//页面有问题

}

XMLHttpRequset对成功返回的信息有两种处理方式。

1、responseText:将传回的信息当成字符串使用。

2、responseXML:将传回的信息当成XML文档使用，可以用DOM处理。

E:一个初步的开发框架

总结上面的步骤，我们整理出一个初步的可用的开发框架，供以后调用。这里，将服务器返回的信息用window.alert以字符串的形式显示出来

代码如下：

<script language="javascript">

<!--

var http_request=false;

function send_request(url)

{

//初始化，指定处理函数，发送请求的函数

http_request=false;

//开始初始化XMLHttpRequest对象

if(window.XMLHttpRequset)

{

//Mozilla浏览器

http_request = new XMLHttpRequest();

if(http_request.overrideMimeType)

{

//设置Mime类别

http_request.overrideMimeType("text/xml");

}

}

else if(window.ActiveXObject)

{

//IE浏览器

try

{

http_request = new ActiveXObject("Msxml2.XMLHTTP");

}

catch(e)

{

try

{

http_request = new ActiveXObject("Microsoft.XMLHTTP");

}

catch(e){}

}

}

if(!http_request)

{

//异常，创建对象实例失败

window.alert("不能创建XMLHttpRequest对象实例");

return false;

}

http_request.onreadystatechanage=processRequest;

//确定发送请求的方式和URL以及是否同时执行下段代码

http_request.open('GET',url,true);

http_send(null);

}

//处理返回信息的函数

function processRequest()

{

if(http_request.readyState==4)

{

//判断对象状态

if(http_request.status==200)

{

//信息已经成功返回，开始处理信息

alert(http_request.responseText);

}

else

{

//页面不正常

alert("您所请求的页面有异常");

}

}

}

-->

</script>

接下来利用上面的框架做一个简单的应用。

在用户注册表单的时候，经常要检测用户名是否唯一，传统的做法都是将数据一起传到服务器端再开始验证，这样传输的数据量大，服务器端负载高，客户相应缓慢，如果用户名已存在的话，用户信息又要重填，很费力。使用AJAX后，可以将用户名异步单独发送到服务器端验证，客户端无需刷新页面。

代码如下：

<form name="form1" action="" method="post">

用户名：<input type="text" name="username" value=""/><br>

<input type="button" name="check" value="唯一性检验" onClick="userCheck()"/>

<input type="submit" name="submit" value="提交"/>

</form>

在以上的框架中添加一个调用函数：

function userCheck()

{

var f = document.form1;

var username=f.username.value;

if(username=="")

{

alert("用户名不能为空");

f.username.focus();

return false;

}

else

{

send_request("sample1_2.jsp?username="+username);

}

}

再看看sampel1_2.jsp中做了些什么。

<%@ page contentType="text/html;charset=gb2312"%>

<%

String username=request.getParameter("username");

if("hellouser".equals(username))

out.print("用户名已经存在，请更换一个");

else

out.print("改用户名尚未注册，您可以继续");

%>

运行解果没有刷新页面。