jquery ajax 入门:AJAX入门学习总结_H5之家 - 中国HTML5教程资源分享第一站

一、AJAX简介
AJAX的全称是异步的JavaScript和XML；主要用途是对于整个页面进行局部更新；
AJAX出现的目的是因为一般网页如果稍作改动，就会重新生成整个页面代码，消耗大。而AJAX能够只更新局部页面；
AJAX是在JavaScript代码中编写的；
二、XMLHttpRequest
XMLHttpRequest是整个AJAX的核心，我们通过XMLHttpRequest进行发送和接受数据；
为了取得此对象，我们需要通过以下代码：
<script language="Javascript">
var xmlHttp;
function create(){
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
else{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
</script>浏览器有两种内核，IE内核和firefox内核；因此需要根据当前用户浏览器进行判断；
XMLHttpRequest有一些常用属性：
(1)readyState :请求的状态；（4 表示已经响应完毕）
(2)onreadystatechange ：readyState改变时调用，通常用于回调函数的返回值；
(3)responseText ：返回纯文本对象；
(4)responseXML ：返回XML数据的对象；
(5)status ：返回当前HTTP的状态（200为正常）
XMLHttpRequest的常用函数：
(1)open("GET/POST","url"); : 创建请求，指定是post还是get，并且指定发送的目的地URL；
(2)send(param); :发送请求，通常param=null;
知识回顾：
在JavaScript中
(1)document.getElementById("name").innerHTML可以设定此控件的值；
(2)onblur事件表示失去焦点时调用；
登录异步验证代码：
这里使用DAO进行连接数据库，因此这段代码忽略；
<html>
<head>
<title>Title</title>
<script language="Javascript">
var xmlHttp;
var flag = false;
function create(){
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
else{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function checkId(id){
create();
xmlHttp.open("GET","CheckServlet?id="+id);
xmlHttp.send(null);
flag = true;
xmlHttp.onreadystatechange = callback;
document.getElementById("msg").innerHTML = "正在验证";
}
function callback(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
var text = xmlHttp.responseText;
if(text=="true"){
document.getElementById("msg").innerHTML = "id正确";
}
else{
document.getElementById("msg").innerHTML = "id重复";
}
}
}
}
function ischecked(){
return flag;
}
</script>
</head>
<body>
<form action="" method="post" onSubmit="return ischecked()">
用户ID：<input type="text" name="id" onBlur="checkId(this.value)"/><br />
姓名：<input type="text" name="name"/><br />
密码：<input type="text" name="password"/><br />
<input type="submit" value="注册"/>
<span id="msg"></span>
</form>
</body>
</html>
注意：
(1)调用回调函数不需要加括号。
(2)readyState的拼写；
CheckServlet.java
package org.servlet;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import org.dao.factory.*;
public class CheckServlet extends HttpServlet{
public void doGet(HttpServletRequest req,HttpServletResponse resp)throws ServletException,IOException{
String id = req.getParameter("id");
PrintWriter out = resp.getWriter();
boolean flag=false;
try{
flag = DAOFactory.getInstance().findById(id);
}
catch(Exception e){}
if(flag){
out.print("true");
}
else{
out.print("false");
}
}
}
异步验证注册的优点：
(1)能够在没有提交前就知道用户名是否有效，现在使用的很多。
本文链接