AJAX范例入门
日期：2014-05-16 浏览次数：20651 次
AJAX实例入门
一、开门见山
??? 这些时间，瞎子也看得见，AJAX正大踏步的朝我们走来。不管我们是拥护也好，反对也罢，还是视而不见，AJAX像一阵潮流，席转了我们所有的人。
??? 关于AJAX的定义也好，大话也好，早有人在网上发表了汗牛充栋的文字，在这里我也不想照本宣科。
??? 只想说说我感觉到的一些优点，对于不对，大家也可以和我讨论：
??? 首先是异步交互，用户感觉不到页面的提交，当然也不等待页面返回。这是使用了AJAX技术的页面给用户的第一感觉。
??? 其次是响应速度快，这也是用户强烈体验。
??? 然后是与我们开发者相关的，复杂UI的成功处理，一直以来，我们对B/S模式的UI不如C/S模式UI丰富而苦恼。现在由于AJAX大量使用JS，使得复杂的UI的设计变得更加成功。
??? 最后，AJAX请求的返回对象为XML文件，这也是一个潮流，就是WEB SERVICE潮流一样。易于和WEB SERVICE结合起来。
?? ?好了，闲话少说，让我们转入正题吧。
??? 我们的第一个例子是基于Servlet为后台的一个web应用。
?
?
二、基于Servlet的AJAX
??? 关于AJAX的定义也好，大话也好，早有人在网上发表了汗牛充栋的文字，在这里我也不想照本宣科。
??? 只想说说我感觉到的一些优点，对于不对，大家也可以和我讨论：
??? 首先是异步交互，用户感觉不到页面的提交，当然也不等待页面返回。这是使用了AJAX技术的页面给用户的第一感觉。
??? 其次是响应速度快，这也是用户强烈体验。
??? 然后是与我们开发者相关的，复杂UI的成功处理，一直以来，我们对B/S模式的UI不如C/S模式UI丰富而苦恼。现在由于AJAX大量使用JS，使得复杂的UI的设计变得更加成功。
??? 最后，AJAX请求的返回对象为XML文件，这也是一个潮流，就是WEB SERVICE潮流一样。易于和WEB SERVICE结合起来。
?? ?好了，闲话少说，让我们转入正题吧。
??? 我们的第一个例子是基于Servlet为后台的一个web应用。
?
?
二、基于Servlet的AJAX
?? ?第一个例子是关于关联选择框的问题，如图：
?
??? 这是一个很常见的UI，当用户在第一个选择框里选择ZHEJIANG时，第二个选择框要出现ZHEJIANG的城市；当用户在第一个选择框里选择JIANGSU时，第二个选择框里要出现JIANGSU的城市。
??? 首先，我们来看配置文件web.xml，在里面配置一个servlet，跟往常一样：
?<web-app version="2.4"
?xmlns="http://java.sun.com/xml/ns/j2ee"
?xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
?xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
?http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
?
?<servlet>
?<servlet-name>SelectCityServlet</servlet-name>
?<servlet-class>com.stephen.servlet.SelectCityServlet</servlet-class>
?</servlet>
?
?<servlet-mapping>
?<servlet-name>SelectCityServlet</servlet-name>
?<url-pattern>/servlet/SelectCityServlet</url-pattern>
?</servlet-mapping>
?
?</web-app>
?
??? 然后，来看我们的JSP文件：
?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
?<html>
?<head>
?<title>MyHtml.html</title>
?
?<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
?<meta http-equiv="description" content="this is my page">
?
?<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
?
?</head>
?<script type="text/javascript">
?function getResult(stateVal) {
???????? var url = "servlet/SelectCityServlet?state="+stateVal;
???????? if (window.XMLHttpRequest) {
???????????????? req = new XMLHttpRequest();
???????? }else if (window.ActiveXObject) {
???????????????? req = new ActiveXObject("Microsoft.XMLHTTP");
???????? }
???????? if(req){
???????????????? req.open("GET",url, true);
???????????????? req.onreadystatechange = complete;
???????????????? req.send(null);
???????? }
?}
?function complete(){
???????? if (req.readyState == 4) {
???????????????? if (req.status == 200) {
???????????????????????? var city = req.responseXML.getElementsByTagName("city");
???????????????????????? //alert(city.length);
???????????????????????? var str=new Array();
???????????????????????? for(var i=0;i<city.length;i++){
???????????????????????????????? str[i]=city[i].firstChild.data;
???????????????????????? }
???????????????????????? //alert(document.getElementById("city"));
???????????????????????? buildSelect(str,document.getElementById("city"));
???????????????? }
???????? }
?}
?function buildSelect(str,sel) {
???????? sel.options.length=0;
???????? for(var i=0;i<str.length;i++) {
???????????????? sel.options[sel.options.length]=new Option(str[i],str[i])
???????? }
?}
?</script>
?<body>
?<select name="state" onChange="getResult(this.value)">
???????? <option value="">Select</option>>
???????? <option value="zj">ZEHJIANG</option>>
???????? <option value="zs">JIANGSU</option>>
?</select>
?<select id="city">
?????<option value="">CITY</option>
?</select>
?</body>
?</html>
?
??? 第一眼看来，跟我们平常的JSP没有两样。仔细一看，不同在JS里头。
??? 我们首先来看第一个方法：getResult(stateVal)，在这个方法里，首先是取得XmlHttpRequest；然后设置该请求的url：req.open("GET",ur
?
??? 这是一个很常见的UI，当用户在第一个选择框里选择ZHEJIANG时，第二个选择框要出现ZHEJIANG的城市；当用户在第一个选择框里选择JIANGSU时，第二个选择框里要出现JIANGSU的城市。
??? 首先，我们来看配置文件web.xml，在里面配置一个servlet，跟往常一样：
?<web-app version="2.4"
?xmlns="http://java.sun.com/xml/ns/j2ee"
?xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
?xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
?http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
?
?<servlet>
?<servlet-name>SelectCityServlet</servlet-name>
?<servlet-class>com.stephen.servlet.SelectCityServlet</servlet-class>
?</servlet>
?
?<servlet-mapping>
?<servlet-name>SelectCityServlet</servlet-name>
?<url-pattern>/servlet/SelectCityServlet</url-pattern>
?</servlet-mapping>
?
?</web-app>
?
??? 然后，来看我们的JSP文件：
?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
?<html>
?<head>
?<title>MyHtml.html</title>
?
?<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
?<meta http-equiv="description" content="this is my page">
?
?<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
?
?</head>
?<script type="text/javascript">
?function getResult(stateVal) {
???????? var url = "servlet/SelectCityServlet?state="+stateVal;
???????? if (window.XMLHttpRequest) {
???????????????? req = new XMLHttpRequest();
???????? }else if (window.ActiveXObject) {
???????????????? req = new ActiveXObject("Microsoft.XMLHTTP");
???????? }
???????? if(req){
???????????????? req.open("GET",url, true);
???????????????? req.onreadystatechange = complete;
???????????????? req.send(null);
???????? }
?}
?function complete(){
???????? if (req.readyState == 4) {
???????????????? if (req.status == 200) {
???????????????????????? var city = req.responseXML.getElementsByTagName("city");
???????????????????????? //alert(city.length);
???????????????????????? var str=new Array();
???????????????????????? for(var i=0;i<city.length;i++){
???????????????????????????????? str[i]=city[i].firstChild.data;
???????????????????????? }
???????????????????????? //alert(document.getElementById("city"));
???????????????????????? buildSelect(str,document.getElementById("city"));
???????????????? }
???????? }
?}
?function buildSelect(str,sel) {
???????? sel.options.length=0;
???????? for(var i=0;i<str.length;i++) {
???????????????? sel.options[sel.options.length]=new Option(str[i],str[i])
???????? }
?}
?</script>
?<body>
?<select name="state" onChange="getResult(this.value)">
???????? <option value="">Select</option>>
???????? <option value="zj">ZEHJIANG</option>>
???????? <option value="zs">JIANGSU</option>>
?</select>
?<select id="city">
?????<option value="">CITY</option>
?</select>
?</body>
?</html>
?
??? 第一眼看来，跟我们平常的JSP没有两样。仔细一看，不同在JS里头。
??? 我们首先来看第一个方法：getResult(stateVal)，在这个方法里，首先是取得XmlHttpRequest；然后设置该请求的url：req.open("GET",ur
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
