新AJAX.docx
《新AJAX.docx》由会员分享，可在线阅读，更多相关《新AJAX.docx（18页珍藏版）》请在冰豆网上搜索。
新AJAX
学习使用AJAX之前，有几样的东西是必须的：
1、HTML
2、DHTML，就是动态HTML，这里可能会常用到document.getElementById（[id]）方法，或者是使用window.id.value=[value]等等，如果不熟悉，不及，看看下面的例子，如果还不能够理解，再把网上搜搜，这方面的解释多得不能够再多了。
3、Javascript。
这个就是非常的重要的，因为好多东西都需要通过这个去操作。
4、DOM。
这个不是必须的，就算我们不知道这个东西，照样可以用JAVASCRIT做很多的东西了。
5、数据库操作及SQL知识。
现在应用程序好多都是与数据库打交道，常见的用户名信息等等，都是放在数据库中的。
下面进行正题吧，这个实例非常的简单，采用JSP实现用户输入的用户是否存在于数据库中，并且给以相应的提示，所谓“麻雀虽小，五脏俱全”，其它的发挥就是在这个方向上发挥开发。
总共有三个文件，有两个JSP面，一个用于前台显示，一个用于确定用户是否存在;另外一个JAVA页面，用于做数据库连接。
注：
请注意其中注释，那是非常的有助于你理解
前台显示：
index.jsp
varhttpRequest;
/**
下面这个函数可以返回一个适合任何浏览器的httpRequest，步子如下：
1.试着创建一个XMLHttpRequest（）示例，该示例可适合于除了微软以外的所有浏览器
2.增加错误判断，如果当前浏览器是微软的，那么就创建适用于微软的浏览器
3.但微软的浏览器又有两个版本之分，不过据说微软已经在7.0中增加对XMLHttpRequest（）的支持
4.但这样也需要对原来的浏览器支持，否则你写出来的程序那些用老版本浏览器的用户就是看不
到效果的。
*/
functioncreateRequest（）
{
try{
request=newXMLHttpRequest（）;
}catch（trymicrosoft）
{
try{
request=newActiveXObject（"Msxml2.XMLHTTP"）;
}catch（othermicrosoft）
{
try{
request=newActiveXObject（"Microsoft.XMLHTTP"）;
}
catch（failed）
{
request=false;
}
}
}
if（!
request）
{
alert（"errHappend!
"）;
returnnull;
}
returnrequest;
}
/**
这个函数就是用户的动作所有触发的函数，如下面的onblur（）时，就会调用该函数
经过的步骤如下：
1.从HTML页面得到你需要的数据，可以采有document.getElementById（""）方法。
2.建立需要的URL，该URL就和在FORM里面的method为get时并采用submit提交在地址栏
里面到的一样
3.打开与服务器的连接，这里面有三个必要的参数，虽然文档规定只有两个，但是我个
人觉得最好用三个，
第一个可以是GET,POST或者是POST，但常用的就是前面的两个，并且最好都用大写，因
为有些浏览器如FireFox可能会报错，
第二个就是打报的URL，这肯定你是必须的。
第三个就是下面的看到的true，这里可以是false。
true表示同步处理，你提交后可以做
其它的事情，这就是AJAX里面的A，即asynchronous;如是false，那就得等到服务器的返
回才能够做其它的事情。
4.等到服务器完成，并且确定返回执行了正确执行的提示，我们就可以做下面我们想做的
事情。
这些后面的事情就必须通过Javascript去完成了，因为XMLHttpRequest的唯一用途
就是发送请求及接收服务器的响应结果。
5.上面都完成了后，就可以采用send（）方法向服务器发送你需要发送的信息了，它的参数
可以是任何类型，发送的数据格式必须为这样的格式：
name=value&anothername=othervalue&so=on，如果你想传送数据，你必须更改MIME类型：
httpRequest.setRequestHeader（'Content-type','application/x-www-form-urnlencoded'）;
否则服务器将会丢弃发送的数据。
*/
functiongetBackInfo（）
{
varusername=document.getElementById（"username"）.value;
varurl='checkUser.jsp?
username='+username;
request.open（"GET",url,"true"）;
//下面相当于是一个隐性的循环，在函数中规定只有都接收完毕数据后才做处理
//onreadystatechange有5个值：
//0:
未初始化
//1:
初始化
//2:
发送数据
//3:
接收数据中
//4:
数据接收完毕
//另外还要注意就是在注册回调函数onreadystatechange时，后面的函数不能够带参数
//如下disResult是一个函数，不能够带参。
reqeust.onreadystatechange=disResult;//隐性的循环
request.send（null）;
}
functiondisResult（）
{
/**
1.一定要确定readystate==4的完成状态才做下面的事，否则会在建立连接即readystate==1的
时候就开始，然后会在readystate==2，readystate==3，readystate==4的时候都会执行，不信
你可以alert（""）一个提示信息试试。
2.服务器通知完成了，并且还要保证是正确完成的，得到的是我们需要的结果才能够继续，这里
常用响应码有：
200:
成功执行
401:
未授权
403:
禁止
404:
没有找到文件
*/
if（request.readystate==4）
{
if（request.status==200）
{
//一切都OK了，那就该用Javascript去执行你想要的动作了。
document.getElementById（"disCheckResult"）.value=request.responseText;
alert（'done'）;
}
else
{
alert（'SomethingWronghasHappend!
'）;
}
}
}
AJAX应用之草稿自动保存
-- 用户名默认为NONAME -->
用户名：
-- 在自动保存选项的onclick事件中调用自动保存状态设置函数 -->
自动保存？
内容：
-- AutoSaveMsg显示返回信息 -->
升级会员 