12_基于ajax的程序开发

12.1 ajax的历史由来

ajax（asynchronous javascript and xml），异步的javascript和xml

12.2 b/s结构的用户体验问题

示例12-1：模拟传统的用户注册流程

源文件：register.html

<!DOCTYPE html>
<html>
  <body>
	<h1>Demo 邮件系统  - 用户注册</h1>
	<form name="regForm" id="regForm" action="doRegister.jsp" method="post">
		注册用户名：<input type="text" name="userName" id="userName" /><br />
		注册密码：<input type="password" name="password" id="password" /><br />
		确认密码：<input type="password" name="password2" id="password2" /><br />
		<input type="submit" value="提交" />
	</form>
  </body>
</html>

源文件：doRegister.jsp

<%@ page language="java" import="java.util.*" %>
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>

<%
String userName = request.getParameter("userName");

if("scott".equals(userName)){
	out.println("用户名" + userName + "已经被占用了，请重新选择用户名！");
}else{
	out.println("恭喜您，" + userName + "注册成功了！");
}
%>

示例12-2：对传统的用户注册流程进行改进

源文件：register.html

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function checkName(){
	var cun = document.getElementById("checkUserName");
	var un = document.getElementById("userName");
	
	cun.value = un.value;
	document.getElementById("checkForm").submit();
}
</script>
</head>
<body>
	<h1>Demo 邮件系统  - 用户注册</h1>
	<form name="regForm" id="regForm" action="D02_doRegister.jsp" method="post">
		注册用户名：
		<input type="text" name="userName" id="userName" />
		<input type="button" value="检测用户名" onclick="checkName();"/>
		<br />
		注册密码：<input type="password" name="password" id="password" /><br />
		确认密码：<input type="password" name="password2" id="password2" /><br />
		<input type="submit" value="提交" />
	</form>
	<form id="checkForm" name="checkForm" action="D04_checkUserName.jsp" method="post" target="_blank">
		<input type="hidden" id="checkUserName" name="checkUserName" />
	</form>
</body>
</html>

源文件：doRegister.jsp

<%@ page language="java" import="java.util.*" %>
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>

<%
String userName = request.getParameter("checkUserName");

if("scott".equals(userName)){
	out.println("用户名" + userName + "已经被占用了，请重新选择用户名！");
}else{
	out.println("恭喜您，" + userName + "注册成功了！");
}
%>

12.3 采用ajax技术提升用户体验

示例12-3：采用ajax技术完成用户注册

源文件：register.html

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var req;

function checkUser(){
	var checkResult = document.getElementById("checkResult");
	checkResult.innerHTML = "正在检测用户名。。。";
	
	var userName = document.getElementById("userName").value;
	req = new ActiveXObject("Microsoft.XMLHttp");
	req.open("get","http://localhost:8080/08_ajax/D04_checkUserName.jsp?checkUserName=" + userName);
	req.onreadystatechange = handleRequest;
	req.send(null);
}

function handleRequest(){
	var checkResult = document.getElementById("checkResult");
	if(req.readyState == 4){
		if(req.status == 200){
			checkResult.innerHTML = req.responseText;
		}else{
			alert("An error occurred:" + req.statusText);
		}
	}
}
</script>
</head>

<body>
	<h1>Demo 邮件系统  - 用户注册</h1>
	<form name="regForm" id="regForm" action="doRegister.jsp" method="post">
		注册用户名：
		<input type="text" name="userName" id="userName" onblur="checkUser();" />
		<label id="checkResult"></label>
		<br />
		注册密码：<input type="password" name="password" id="password" /><br />
		确认密码：<input type="password" name="password2" id="password2" /><br />
		<input type="submit" value="提交" />
	</form>
</body>
</html>

12.4 ajax原理解析

1.JavaScript

javascript is the soul of internet，推荐学习书籍《JavaScript权威指南》

2.DOM

DOM，也就是文档对象模型（Document Object Model），推荐书籍同上

3.XML和CSS

4.XMLHttpRequest对象

兼容浏览器的创建方法：

function createXHR(){
	var xhr;
	
	try{
		xhr = new ActiveXObject("Msxml2.XMLHTTP");
	}catch(e){
		try{
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}catch(E){
			xhr = false;
		}
	}
	
	if(!xhr && typeof XMLHttpRequest != 'undefined'){
		xhr = new XMLHttpRequest();
	}
	
	return xhr;
}

12.5 使用XMLHttpRequest对象与服务器端通信

12.5.1 使用open方法创建一个请求

12.5.2 使用send方法发送一个请求

12.5.3 使用onreadystatechange时间捕获请求状态变化

12.5.4 使用readyState属性判断请求状态变化

12.5.5 使用status属性判断请求的结果

12.5.6 使用responseText获得返回的文本

示例12-4：改进ajax技术

源文件：register.html

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function createXHR(){
	var xhr;
	
	try{
		xhr = new ActiveXObject("Msxml2.XMLHTTP");
	}catch(e){
		try{
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}catch(E){
			xhr = false;
		}
	}
	
	if(!xhr && typeof XMLHttpRequest != 'undefined'){
		xhr = new XMLHttpRequest();
	}
	
	return xhr;
}

var req;

function checkUser(){
	var checkResult = document.getElementById("checkResult");
	checkResult.innerHTML = "正在检测用户名。。。";
	
	var userName = document.getElementById("userName").value;
	req = createXHR();
	req.open("get","http://localhost:8080/08_ajax/D04_checkUserName.jsp?checkUserName=" + userName);
	req.onreadystatechange = handleRequest;
	req.send(null);
}

function handleRequest(){
	var checkResult = document.getElementById("checkResult");
	if(req.readyState == 4){
		if(req.status == 200){
			checkResult.innerHTML = req.responseText;
		}else{
			alert("An error occurred:" + req.statusText);
		}
	}
}
</script>
</head>

<body>
	<h1>Demo 邮件系统  - 用户注册</h1>
	<form name="regForm" id="regForm" action="doRegister.jsp" method="post">
		注册用户名：
		<input type="text" name="userName" id="userName" onblur="checkUser();" />
		<label id="checkResult"></label>
		<br />
		注册密码：<input type="password" name="password" id="password" /><br />
		确认密码：<input type="password" name="password2" id="password2" /><br />
		<input type="submit" value="提交" />
	</form>
</body>
</html>

12.6 JavaScript开源框架Prototype简介

12.6.1 prototype常用方法

示例12-5：prototype常用方法$()和$F()

源文件：prototypeSimpleDemo.html

<!DOCTYPE html>
<html>
  <head>
    <title>prototype</title>
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript">
    	function antiSelect(){
    		var fm = $('f1');
    		alert(fm.innerHTML);
    		
    		var cbs = $('c1','c2','c3');
    		for(var i=0; i<cbs.length; i++){
    			var flag = cbs[i].checked;
    			if(flag)
    				cbs[i].checked = false;
    			else
    				cbs[i].checked = true;
    		}
    	} 
    	
    	function getTestValue(){
    		alert($F('t1'));
    	}
    </script>
  </head>
  
  <body>
	<form id="f1" name="f1" action="" method="post">
		first:<input type="checkBox" id="c1" value="c1" />
		second:<input type="checkBox" id="c2" value="c2" />
		thiird:<input type="checkBox" id="c3" value="c3" />
		<input type="button" value="反选" onclick="antiSelect();" />
		<hr />
		<input type="text" value="hello world" id="t1" /> 
		<input type="button" value="test" onclick="getTestValue();" />
	</form>
  </body>
</html>

12.6.2 ajax对象

示例12-6：用prototype实现ajax

源文件：prototypeAjax.html

<!DOCTYPE html>
<html>
  <head>
    <title>用prototype实现Ajax</title>
    <Meta http-eqiuv="content-type" content="text/html; charset=utf-8">

	<script type="text/javascript" src="js/prototype.js"></script>    
	<script type="text/javascript">
		function checkUser(){
			var checkResult = $('checkResult');
			checkResult.innerHTML = "正在检测用户名。。。";
			var userName = $F('userName');
			var url = "http://localhost:8080/08_ajax/D04_checkUserName.jsp?checkUserName=" + userName;
			var pars = "";
			var req = new Ajax.Request(url,{
				method: 'get',parameters: pars,onComplete: handleRequest
			});
		}
		
		function handleRequest(info){
			$('checkResult').innerHTML = info.responseText;
		}
	</script>
  </head>
  	<h1>Ajax的Prototype实现</h1>
  	<form id="regForm" name="regForm" action="D02_doRegister.jsp" method="post">
  		注册用户名：
  		<input type="text" id="userName" name="userName" onblur="checkUser();" />
  		<label id="checkResult"></label><br />
  		注册密码：<input type="password" id="password" name="password" /><br />
  		确认密码：<input type="password" id="password2" name="password2" /><br />
  		<input type="submit" value="提交" />
  	</form>
  <body>	
  </body>
</html>

12_基于ajax的程序开发

猜你在找的Ajax相关文章