新浪微博 Github

AJAX入门学习总结


一、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)能够在没有提交前就知道用户名是否有效,现在使用的很多。





posted @ 2011-11-27 12:32  xiazdong  阅读(229)  评论(0编辑  收藏  举报