js+ajax+jquery(1)(js回顾，xmlHttpRequest对象，ajax的get/set请求方式，http/xml数据响应方式）
回顾js:
一）什么是JavaScript【以下简称JS】
JS是 （1）基于对象 JS本身就有一些现成的对象可供程序员使用，例如：Array，Math，String。。。 JS并不排除你可以自已按一定的规则创建对象 （2）事件驱动 JS代码写好后，需要外界触发后，方可运行，例如：单击事件，定时执行，。。。 （3）解释性 每次运行JS代码时，得需要将原代码一行一行的解释执行 相对编译型语言（例如：Java、C++）执行速度相对较慢 （4）基于浏览器的动态交互网页技术 如果JS嵌入到HTML中，可以不需要服务器支持，直接由浏览器解释执行 如果JS嵌入到JSP或Servlet中，必需要服务器支持，直接由浏览器解释执行 （5）嵌入在HTML标签中 JS必须嵌入到一个名叫<script src="引入外部js文件"></script>的标签中，方可运行 的脚本语言
补充：（脚本语言区别于编译语言：是解释型相对简单作为一种嵌入辅助语言，不需要特别复杂的专门运行平台支持（主要基于浏览器））
二）JS中的三种类型
（1）基本类型：number，string，boolean
number包含正数，负数，小数
string由''或""定界
boolean由true或false,但js中的boolean也包含更多情况
var num = 100; var str = "哈哈"; var flag = false;
（2）特殊类型：null，undefined
null表示一个变量指向null
undefined表示一个变量指向的值不确定(未指定值）
var array = null; var student;
实例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>js类型</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <script type="text/javascript"> //num为number类型 var num = 100; //str为string类型，注意js中的string类型用''或""均可 var str = "哈哈"; //flag为boolean类型 var flag = true; </script> <script type="text/javascript"> //多个script块中的内容，可以相互访问 //alert(flag); var person = null; var card; //alert(card); //undefined不是字符串，它是一种类型，如果你想判断某个变量是否为undefined， //通过如下代码判断： if(card == undefined){ alert("card变量暂没值"); }else{ alert(card); } </script> </body> </html>
（3）复合类型：函数，对象，数组
对象包含内置对象和自定义的对象
三）JS中有三种定义函数的方式
（1）正常方式：function mysum(num1,num2){return num1+num2;}
function mysum(num1,num2){ return num1 + num2; } var myresult = mysum(100,200); alert("myresult="+myresult);
（2）构造器方式(Function,F必须大写）：new Function("num1","num2","return num1+num2;")
构造器方式，最后一个参数为函数体（除了最后一个才是真正的函数的参数），每个参数都是字符串类型
var youresult = new Function("num1","num2","return num1+num2"); alert( youresult(1000,2000) );
（3）直接量或匿名或无名方式：var mysum = function(num1,num2){return num1+num2;}
var theyresult = function(num1,num2){ return num1 + num2; } alert( theyresult(10000,20000) );
四）JS中有四种对象
（1）内置对象 ：Date，Math，String，Array。。。
var str = new Date().toLocaleString(); window.document.write("<font size='44' color='red'>"+str+"</font>");
<script type="text/javascript">
//Date
//var nowStr = new Date().toLocaleString();
//window.document.write(nowStr + "<br/>");
//Math
//for(var i=1;i<=10;i++){
// //1到9之间的随机整数
// document.write(Math.floor(Math.random()*9)+1 + "<br/>");
//}
//string
//var str = "Hello你好";
//var size = str.length;
//alert(size);//7
//Array
//var array = new Array("语文","数学","英语",true,123);
//for(var i=0;i<array.length;i++){
// document.write(array[i] + " ");
//}
</script>
补充：
floor 返回不大于的最大整数（小于等于）
round 正数才是4舍5入的计算（并不是真正四舍五入，实际是加0.5，取小于等于的正数）
ceil 则是不小于他的最小整数（大于等于）
便于口算，round可以看成对于负数，5也是舍（具体算法见上）
（2）自定义对象：Person，Card，。。。
<script type="text/javascript">
/*自定义对象
function Person(id,name,sal){
this.id = id;
this.name = name;
this.sal = sal;
}
var p = new Person(1,"波波",7000);
document.write("编号:" + p.id + "<br/>");
document.write("姓名:" + p.name + "<br/>");
document.write("薪水:" + p.sal + "<br/>");
*/
</script>
（3）浏览器对象： window，document，status，location，history。。。
<script type="text/javascript">
//window对象，打开新窗口（360浏览器无效果）
//var url = "04_images.html";
//window.open(url);
</script>
<script type="text/javascript">//浏览器最下面状态栏显示
//status对象，将当前时间设置到状态栏中
//var nowStr = new Date().toLocaleString();
//window.status = nowStr;
</script>
<script type="text/javascript">//相当地址栏输入
//location对象，模拟用户在地址栏输入url访问其它页面的情况
//var url = "04_images.html";
//window.location.href = url;
</script>
<script type="text/javascript">//相当后退前进
//history对象，演示刷新
window.history.go(0);
</script>
（4）ActiveX对象：ActiveXObject("Microsoft.XMLHTTP")，。。。
五）演示JS对象的属性，方法和事件的使用
（1）window.location.href
var url = "04_array.html"; window.location.href = url;
（2）form.submit()（利用事件按钮提交表单）
<body>
<form action="04_images.html" method="POST">
<input type="button" value="提交"/>
</form>
<!-- 演示用JS提交表单，重要 -->
<script type="text/javascript">
//定位提交按钮
var inputElement = document.getElementsByTagName("input")[0];
//为提交按钮添加单击事件
inputElement.onclick = function(){
//定位<form>标签，forms表示document对象中所有表单的集合，通过下标引用不同的表单，从0开始
var formElement = document.forms[0];
//提交表单，提交到action属性指定的地方
formElement.submit();
}
</script>
</body>
（3）inputElement.onblur = 函数
（4）document.createElement(“img”)
（5）imgElement.style.width/height
六）回顾传统Web应用请求和响应特点【显示当前时间】
（1）请求：浏览器以HTTP协议的方式提交请求到服务器 （2）响应：服务器以HTTP协议的方式响应内容到浏览器 注意：HTTP是WEB大众化非安全协议 HTTPS是WEB安全协议，是基于HTTP协议的，且加了一些加密等特殊功能，常用于在线支付，或者是需要安全性较高的网站中，例如：12306网站 HTTP请求有三个部份组成：请求行，请求头，请求体 HTTP响应有三个部份组成：响应行，响应头，响应体 （3）状态栏：有明显的进度条刷新现象，如果服务器响应较慢的话，进度条刷新也会变慢，IE9等中高版本浏览器，有明显转圈圈图标 （4）历史栏：会收集原来已访问过的web页面，进行缓存 （5）缺点：不需变化的大量数据，请求也全部刷新，造成浏览器加载和处理负担 （6）可改进的地方：让不需变化的大量数据，原封不动，不用缓存到历史栏中，无需全部刷新（不要从服务端获取），只刷新某些需要变化的数据区域，例如：当前时间的区域
实例：
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>回顾传统Web应用请求和响应特点【显示当前时间】</title> </head> <body> 当前时间：${requestScope.nowStr}<br/> <input id="buttonID" type="button" value="获取当前时间"/><p/> <script type="text/javascript"> //定位按钮，同时添加单击事件 document.getElementById("buttonID").onclick = function(){ //发送请求到服务器 var url = "${pageContext.request.contextPath}/TimeServlet"; window.location.href = url; } </script> 静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/> </body> </html>
TimeServlet.java
/** * 回顾传统Web应用请求和响应特点【显示当前时间】 * @author AdminTC */ public class TimeServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { //测试 System.out.println("GET"); //构造SimpleDateFormat对象 SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); //将当前日期按照指定格式输出成字符串 String nowStr = sdf.format(new Date()); //将结果绑定到request域对象中 request.setAttribute("nowStr",nowStr); //转发到06_time.jsp页面 request.getRequestDispatcher("/06_time.jsp").forward(request,response); } }
七）什么是AJAX【Asynchronous异步的JS和XML】，工作原理与特点
（1）什么是同步：
请求1->响应1->请求2->响应2->
Web1.0时代
（2）什么是异步：
请求1->请求2->请求3->响应1->响应2->响应3->
请求1->响应1->请求2->请求3->响应2->响应3->
Web2.0时代
项目中：Web1.0为主（整个浏览器刷新），Web2.0为辅（浏览器局部刷新）
（3）什么是AJAX
客户端（特指PC浏览器）与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术
即，AJAX是一个【局部刷新】的【异步】通讯技术
AJAX不是全新的语言，是2005年Google公司推出的一种全新【编程模式】，不是新的编程语言
（4）不用刷新整个页面便可与服务器通讯的办法有：
（A）Flash/ActionScript
（B）框架Frameset
（C）iFrame（内嵌入框架)
（D）XMLHttpRequest(非IE浏览器)和ActiveXObject(IE浏览器)
背景：早期IE5时，微软就开发出了第一个异步通讯对象，叫ActiveXObject对象，
Firefox等其它浏览器厂商也慢慢引入异步通讯对象，叫XMLHttpRequest对象，
IE的高版本，也将这个异步对象取名叫XMLHttpRequest对象，但IE有向下兼容问题，也可以使用ActiveXObject对象。
无需第三方jar包，现代中高版本浏览器中内置了这个异步通讯对象，只需通过JavaScript就可以创建
注意：所有浏览器中都内置了异步对象，在默认情况下，该异步对象并没有创建出来
function createAJAX(){ var ajax = null; try{ //如果IE5=IE12的话 ajax = new ActiveXObject("microsoft.xmlhttp"); }catch(e1){ try{ //如果是非IE的话 ajax = new XMLHttpRequest(); }catch(e2){ alert("你的浏览器中不支持异步对象，请换浏览器"); } } return ajax; }
（5）AJAX工作原理
（6）AJAX包含的技术（前端异步提交，后端采用流响应）
（7）AJAX开发步骤
步一：创建AJAX异步对象，例如：createAJAX()
步二：准备发送异步请求，例如：ajax.open(method,url)
步三：如果是POST请求的话，一定要设置AJAX请求头，例如：ajax.setRequestHeader()
如果是GET请求的话，无需设置设置AJAX请求头
步四：真正发送请求体中的数据到服务器，例如：ajax.send()
步五：AJAX不断的监听服务端响应的状态变化，例如：ajax.onreadystatechange，后面写一个无名处理函数
步六：在无名处理函数中，获取AJAX的数据后，按照DOM规则，用JS语言来操作Web页面
（8）AJAX适合用在什么地方
AJAX【适合】不用来传递大量数据，而只用来【传递少量数据】，在用户的【体验】上，【更加人性化】
AJAX是一个和服务器无关的技术，即服务器可使用：JavaEE，.NET，PHP，。。。这些技术都可
AJAX只管向服务器发送请求，同时只管接收服务器的HTML或XML或JSON载体响应
服务端不能使用转发或重定向到web页面，因为这样会起浏览器全面刷新
即只能以流的方式响应给浏览器
九）XMLHttpRequest(即：AJAX)对象常用事件，方法和属性
（1）事件：
ajax.onreadystatechange：表示AJAX异步对象不断监听服务端的响应，
是由服务器程序触发，不是程序员触发
（2）属性：
ajax.readyState==0：表示AJAX异步对象已创建好，但还没有调用open()方法
ajax.readyState==1：表示AJAX异步对象已调用open()方法，但还没有调用send()方法
ajax.readyState==2：表示AJAX异步对象已调用send()方法，但请求还没有到达服务器端
ajax.readyState==3：表示服务端已接收到AJAX异步对象的请求，正在处理响应中。。。
ajax.readyState==4：表示AJAX异步对象已经完全接收到了服务器的响应信息，但接收到的数据不一定都正确
上述5种状态不是所有浏览器都相同，但状态4每种浏览器都相同
ajax.status==200：表示AJAX异步对象接收到响应码，如果是200的话，表示一切正常
ajax.responseText：表示从AJAX异步对象中获取HTML载体中的数据
ajax.responseXML：表示从AJAX异步对象中获取XML载体中的数据
（3）方法：
ajax.open(method,url,可选的boolean值):AJAX异步对象准备发送异步请求
参数一：以什么方式发送，常用的用GET或POST，大小写不敏感
参数二：发送到什么地方去，常用Servlet或Struts2或SpringMVC来接收，
参数三：默认值为true，表示AJAX对象以【异步】的方式提交到服务端
如果设置为false，表示AJAX对象以【同步】的方式提交到服务端
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")
表示将请求体中的内容，按照UTF-8的方式进行编码，只针对POST请求有效
ajax.send(content):AJAX异步对象真正发送异步请求
参数：表示HTTP【请求体】中的内容 如果是GET方式：content = null，如果强行传值到服务器，服务端收不到，返回NULL 如果是POST方式：content != null，例如：username=jack&password=123&role=admin
八）AJAX应用实例:
补充：IE请求的一个问题，当多次请求相同的地址，浏览器不会请求服务端（可以通过追加随机数后缀的方式解决）
（1）无需刷新整个Web页面显示服务器响应的当前时间
07_ajaxtime.jsp
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>无需刷新整个Web页面显示服务器响应的当前时间</title> </head> <body> 当前时间：<span id="time"></span><br/> <input id="buttonID" type="button" value="获取当前时间"/><p/> <script type="text/javascript"> //创建AJAX异步对象 function createAJAX(){ var ajax = null; try{ //如果IE5=IE12的话 ajax = new ActiveXObject("microsoft.xmlhttp"); }catch(e1){ try{ //如果是非IE的话 ajax = new XMLHttpRequest(); }catch(e2){ alert("你的浏览器中不支持异步对象，请换浏览器"); } } return ajax; } </script> <script type="text/javascript"> document.getElementById("buttonID").onclick = function(){ //NO1)创建AJAX异步对象 var ajax = createAJAX(); //NO2)准备发送请求 var method = "GET";
//对于IE多次请求的地址必须不同，否则不会请求服务端 var url = "${pageContext.request.contextPath}/AjaxTimeServlet?time=" + new Date().getTime(); ajax.open(method,url); //NO3)真正发送请求体的数据到服务器，如果请求体中无数据的话，就用null表示 ajax.send(null); //-------------------------------------------------------------等待 //NO4)AJAX异步对象不断监听服务器响应的状态0-1-2-3-【4】 //一定要状态变化后，才可触发function(){}函数 //如果状态永远是4-4-4-4-4，是不会触发function(){}函数的 ajax.onreadystatechange = function(){ //如果状态码为4的话 if(ajax.readyState == 4){ //如果响应码为200的话 if(ajax.status == 200){ //NO5)从AJAX异步对象中获取服务器响应的HTML数据 var nowStr = ajax.responseText; //NO6)将结果按照DOM规则，动态添加到web页面指定的标签中 var spanElement = document.getElementById("time"); spanElement.innerHTML = nowStr; }}}} </script> 静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/> </body> </html>
AjaxTimeServlet.java
/** * 无需刷新整个Web页面显示服务器响应的当前时间 * @author AdminTC */ public class AjaxTimeServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String nowStr = sdf.format(new Date()); //以流的方式将结果响应到AJAX异步对象中 response.setContentType("text/html;charset=UTF-8"); PrintWriter pw = response.getWriter(); pw.write(nowStr); pw.flush(); pw.close(); }}
（2）基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在（需要设置服务端响应类型为：text/html;charset=UTF-8）
08_register.jsp
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在</title> </head> <body> <form> 用户名[GET]：<input id="usernameID" type="text" name="username" maxlength="4"/> 光标移出后，立即检查结果 </form> <hr/> <span id="resID"></span> <script type="text/javascript"> //创建AJAX异步对象，即XMLHttpRequest function createAJAX(){ var ajax = null; try{ ajax = new ActiveXObject("microsoft.xmlhttp"); }catch(e1){ try{ ajax = new XMLHttpRequest(); }catch(e2){ alert("你的浏览器不支持ajax，请更换浏览器"); } } return ajax; } </script> <script type="text/javascript"> //定位文本框，同时提供焦点失去事件 document.getElementById("usernameID").onblur = function(){ //获取文本框中输入的值 var username = this.value; //如果用户没有填内容 if(username.length == 0){ //提示 document.getElementById("resID").innerHTML = "用户名必填"; }else{ //对汉字进行UTF-8(U8)的编码 username = encodeURI(username); //NO1) var ajax = createAJAX(); //NO2) var method = "GET"; var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime()+"&username=" + username; ajax.open(method,url); //NO3) ajax.send(null); //--------------------------------------------------------等待 //NO4) ajax.onreadystatechange = function(){ if(ajax.readyState == 4){ if(ajax.status == 200){ //NO5) var tip = ajax.responseText; //NO6) document.getElementById("resID").innerHTML = tip; }}}}} </script> </body> </html>
UserServlet.java（post/get获取数据的解决乱码采用不同方式的原因是，一个是从请求行获取数据，一个是从请求体中获取数据)
/** * 基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在 */ public class UserServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { String username = request.getParameter("username"); byte[] buf = username.getBytes("ISO8859-1"); username = new String(buf,"UTF-8"); System.out.println("username=" + username); String tip = "<font color='green'>可以注册</font>"; if("杰克".equals(username)){ tip = "<font color='red'>该用户已存在</font>"; } response.setContentType("text/html;charset=UTF-8");//不同数据类型，客户端接收的方法也不同 PrintWriter pw = response.getWriter(); pw.write(tip); pw.flush(); pw.close(); } public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); String username = request.getParameter("username"); System.out.println("username=" + username); String tip = "images/MsgSent.gif"; if("杰克".equals(username)){ tip = "images/MsgError.gif"; } response.setContentType("text/html;charset=UTF-8"); PrintWriter pw = response.getWriter(); pw.write(tip); pw.flush(); pw.close(); }
09_register.jsp（post方式）
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在</title> <!-- 引入外部js文本 --> <script type="text/javascript" src="js/ajax.js"></script> </head> <body> 用户名[POST]：<input id="usernameID" type="text" maxlength="4"/> <span id="resID"> <!-- <img src="tip变量" width="12px" height="12px"/> --> </span> <hr/> <script type="text/javascript"> document.getElementById("usernameID").onblur = function(){ var username = this.value;//杰克 //NO1) var ajax = createAJAX(); //NO2) var method = "POST"; var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime(); ajax.open(method,url); //设置AJAX请求头为POST，他会将请求体中的汉字自动进行UTF-8的编码 //以键值的方式传递给服务端（Http请求中Content-Type）
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); //NO3) var content = "username=" + username; ajax.send(content); //===========================================等待 //NO4) ajax.onreadystatechange = function(){ if(ajax.readyState == 4){ if(ajax.status == 200){ //NO5)不同数据类型，接收数据的方法也不同 var tip = ajax.responseText; //NO6) //创建img标签 var imgElement = document.createElement("img"); //设置img标签的src/width/height的属性值 imgElement.src = tip; imgElement.style.width = "12px"; imgElement.style.height = "12px"; //定位span标签 var spanElement = document.getElementById("resID"); //清空span标签中的内容 spanElement.innerHTML = ""; //将img标签加入到span标签中 spanElement.appendChild(imgElement); }}}} </script> <!-- <form action="" method="" enctype="application/x-www-form-urlencoded"></form> --> </body> </html>
（3）基于XML，以POST方式，完成省份-城市二级下拉联动（需要设置服务端响应类型为：text/xml;charset=UTF-8）
10_provincecity.jsp（以xml方式返回数据给客户端）
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>基于XML，以POST方式，完成省份-城市二级下拉联动</title> <script type="text/javascript" src="js/ajax.js"></script> </head> <body> <select id="provinceID" style="width:111px"> <option>选择省份</option> <option>湖南</option> <option>广东</option> </select> <select id="cityID" style="width:111px"> <option>选择城市</option> </select> <script type="text/javascript"> //定位省份下拉框，同时添加内容改变事件 document.getElementById("provinceID").onchange = function(){ //清空城市下拉框中的内容，除第一项外 var cityElement = document.getElementById("cityID"); cityElement.options.length = 1; //获取选中option标签的索引号，从0开始 var index = this.selectedIndex; //定位选中的option标签 var optionElement = this[index]; //获取选中的option标签中的内容，即省份 var province = optionElement.innerHTML; //如果选中的内容不是"选择省份" if("选择省份" != province){ //NO1) var ajax = createAJAX(); //NO2) var method = "POST"; var url = "${pageContext.request.contextPath}/ProvinceCityServlet?time="+new Date().getTime(); ajax.open(method,url); //设置AJAX请求头 ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); //NO3) var content = "province=" + province; ajax.send(content); //---------------------------------等待 //NO4) ajax.onreadystatechange = function(){ if(ajax.readyState == 4){ if(ajax.status == 200){ //NO5)从AJAX异步对象中获取服务器响应的xml文档 var xmlDocument = ajax.responseXML; //NO6)按照DOM规则，解析XML文档 var cityElementArray = xmlDocument.getElementsByTagName("city"); var size = cityElementArray.length; for(var i=0;i<size;i++){ //innerHTML只能用在html/jsp中，不能用在xml中,需要使用下面这种从标签中获取值的通用方式 var city = cityElementArray[i].firstChild.nodeValue; //<option></option> var optionElement = document.createElement("option"); //<option>广州</option> optionElement.innerHTML = city; //<select><option>广州</option></select> cityElement.appendChild(optionElement); }}}}}} </script> </body> </html>
ProvinceCityServlet.java
/** * 基于XML，以POST方式，完成省份-城市二级下拉联动 * @author AdminTC */ public class ProvinceCityServlet extends HttpServlet { public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); String province = request.getParameter("province"); //通知AJAX异步对象，服务器响应的数据为xml格式的 response.setContentType("text/xml;charset=UTF-8"); //获取字符输出流 PrintWriter pw = response.getWriter(); pw.write("<?xml version='1.0' encoding='UTF-8'?>"); pw.write("<root>"); if("广东".equals(province)){ pw.write("<city>广州</city>"); pw.write("<city>深圳</city>"); pw.write("<city>中山</city>"); }else if("湖南".equals(province)){ pw.write("<city>长沙</city>"); pw.write("<city>株洲</city>"); pw.write("<city>湘潭</city>"); pw.write("<city>岳阳</city>"); } pw.write("</root>"); pw.flush(); pw.close(); } }
十）数据载体
（1）HTML
（A）优点：服务端响应的是普通html字符串，无需JS解析，配合innerHTML属性效率高
（B）缺点：如果需要更新WEB页面中的很多处地方，HTML不太方便，同时innerHTML属性不是DOM的标准，不能操作XML
注意：innerHTML在xml中不能使用，用firstChild.nodeValue替代
（C）适合：小量数据载体，且只更新在web页面中的一个地方
（2）XML
（A）优点：是种通用的普通字符串格式，任何技术都能解析，标签名可以任意，使用DOM标准规则能够解析XML的任何部分
（B）缺点：XML文件格式相当严格，出错后，responseXML属性返回NULL，如果XML文件过长，导致解析效率低下
（C）适合：大量具有层次数据载体
（3）JSON （下次课讲）+ struts2框架
兼备HTML和XML的特点
总结：
浙公网安备 33010602011771号