第八、AJAX基础

 

第八章 AJAX基础

 

关于JavaScript基础文章暂告段落，最近忙于RIA的学习。。。

 

一、同步、异步：

在网上找了个比喻，诠释这两个词：

有一个男的 看上了两个漂亮MM 想通过写信的方式跟他们交流感情 这两个MM分别是  A女,B女 

同步：他先给A女写了封信 然后发了出去。等了好几天 A女给他回了信，之后他才给B女写信。就是说等到一个任务返回或者结束 他才继续往下做他想做的任务。 

异步：他先给A女写了封信，然后发了出去，马上又给B女写了封信 也发了出去。  就是说不用等到一个任务结束就去做下一个任务。 

但是如果第一个任务需要第二个任务的返回值 那就得用同步让第一个任务等待第二个任务结束后，获取第二个任务的返回值 在继续往下做

 

二、AJAX：Asynchronous JavaScript And XML

异构系统间传递信息的工具：XML或者是JSON；

 

三、AJAX交互原理（步骤）：

（一）客户端事件发生，调用监听器

（二）在监听函数中创建AJAX引擎（XMLHttpRequest对象）

（三）配置对象：XMLHttpRequest对象状态监听、指定HTTP方法、URL等

（四）发送异步HTTP请求到服务器

（五）服务器从数据库获取资源，返回响应。内容类型：text/xml,text/json,text/plain,text/javascript.

（六）XMLHttpRequest对象状态改变调用监听函数处理结果

（七）更新HTML DOM

 

四、XMLHttpRequest对象（AJAX引擎）

（一）方法：

open("HTTP方法","url",异步/同步)

send(content) 请求内容

setRequestHeader("content-type","application/x-www-form-urlencoded")

abort() 中断请求

（二）属性：

onreadystatechange:事件处理 当状态改变时调用监听函数

readyState:状态

0 未初始化

1 正在装载

2 装载完毕

3 正在交互

4 完成

status:状态码 如200（响应状态码2XX表示完成,4xx为客服端请求错误，5XX为服务端错误）

responseText 返回的字符串数据

responseXML 返回XML数据

 

五、小实例应用：

要求：页面上一个简单的input文本框，输入name触发change事件，异步向服务器请求该name是否在数据库中存在相同的名字，返回信息。

 

1.HTML代码

 

<input id="uName" name="uName" onchange="nameCheck();" />
<span id="correct">正确</span>
<span id="error">存在相同用户名</span>

 

 

2.JS(事件触发，异步请求服务器)

 

var request = null;
	function nameCheck(){
		var name = document.getElementById("uName").value;
		if(window.XMLHttpRequest){
			request = new XMLHttpRequest();
		}else if(window.ActiveXObject){
			request = new ActiveXObject("MICROSOFT.XMLHTTP");
		}
		
		var url = "checkName.do";
		request.onreadystatechange = showResult;
		request.open("post",url,true); //POST请求必须有下面这一行,表示一个表单请求
		request.setRequestHeader("content-type","application/x-www-form-urlencoded");
		request.send("name="+name);
	}
	
	function showResult(){
		if(request.readyState==4){
			if(request.status==200){ //状态和状态码都OK的情况下
				var correct = document.getElementById("correct");
				var error = document.getElementById("error");
				correct.style.display = "none";
				error.style.display = "none";
				//注释掉的代码为XML类型响应处理
				/*var xmlDoc = request.responseXML;
				var msg = xmlDoc.getElementsByTagName("result")[0].firstChild.nodeValue;
				
				if(msg == "true"){
					error.style.display = "inline";
				}else{
					correct.style.display = "inline";
				}*/
				//下面是json类型处理（字符串）
				var msg = request.responseText;
				eval("var obj="+msg);//如此强大的eval
				
				if(obj.result)
					error.style.display = "inline";
				else
					correct.style.display = "inline";
			}
		}

 

3.VO类（略，简单JavaBean）、dao层（略）。。如下是servlet，响应客户端的异步请求，发送XML或者JSON到客户端

String name = request.getParameter("name");
		UserDao dao = new UserDao();
		response.setContentType("text/json");
		PrintWriter pw = response.getWriter();
		//pw.println("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");//发送XML必须要这段XML头
		try {
			if(dao.nameCheck(name)){
				pw.println("{result:true}");//XML:pw.println("<result>true</result>");
			}else{
				pw.println("{result:false}");
			}
		} catch (Exception e) {
			e.printStackTrace();
		}

相比之下，JSON传递及JavaScript处理更加方便，代码更少。

JSON适合传递展示型数据，{name:"abc",age:18,sex:"male"}

XML适合传递层次性数据