第40天(就业班) JavaScript之ajax增强

1. 前台技术与后台技术的关系

2. 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也包含更多情况，例如：存在表示true，不存在表示

//num为number类型

var num = 100;

//str为string类型，注意js中的string类型用''或""均可

var str = "哈哈";

//flag为boolean类型

var flag = true;

（2）特殊类型：null，undefined

null表示一个变量指向null

undefined表示一个变量指向的值不确定

var array = null;

var student;

alert(array);

alert(student);

（3）复合类型：函数，对象，数组

对象包含内置对象和自定义的对象

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）构造器方式：new Function("num1","num2","return num1+num2;")构造器方式，最后一个参数为函数体，每个参数都是字符串类型(后)var add = new Function("num1","num2","return num1+num2");window.alert("100+200=" + add(100,200));（3）直接量或匿名或无名方式(再)var add = function(num1,num2){return num1 + num2;}window.alert("1000+2000=" + add(1000,2000));4.js中有四种对象（1）内置对象 ：Date，Math，String，Array，。。。//Datevar nowStr = new Date().toLocaleString();window.document.write(nowStr + "<br/>");Mathfor(var i=1;i<=10;i++){1到9之间的随机整数//document.write(Math.floor(Math.random()*9)+1 + "<br/>");//}//stringvar str = "Hello你好";var size = str.length; alert(size);//7Arrayvar array = new Array("语文","数学","英语",true,123);for(var i=0;i<array.length;i++){document.write(array[i] + "   ");}   （2）自定义对象：Person，Card，。。。  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/>");（3）浏览器对象： window，document，status，location，history//window对象，打开新窗口var url = "04_images.html";window.open(url);//status对象，将当前时间设置到状态栏中var nowStr = new Date().toLocaleString();window.status = nowStr;//location对象，模拟用户在地址栏输入url访问其它页面的情况var url = "04_images.html";window.location.href = url;//history对象，演示刷新window.history.go(0);（4）ActiveX对象：ActiveXObject("Microsoft.XMLHTTP")，。。。5.通过button提交表单<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>6. 回顾传统Web应用请求和响应特点【显示当前时间】（1）请求：浏览器以HTTP协议的方式提交请求到服务器（2）响应：服务器以HTTP协议的方式响应内容到浏览器注意：HTTP是WEB大众化非安全协议HTTPS是WEB安全协议，是基于HTTP协议的，且加了一些加密等特殊功能，常用于在线支付，或者是需要安全性较高的网站中，例如：12306网站HTTP请求有三个部份组成：请求行，请求头，请求体HTTP响应有三个部份组成：响应行，响应头，响应体（3）状态栏：有明显的进度条刷新现象，如果服务器响应较慢的话，进度条刷新也会变慢，IE9等中高版本浏览器，有明显转圈圈图标（4）历史栏：会收集原来已访问过的web页面，进行缓存（5）缺点：不需变化的大量数据，也全部刷新，造成浏览器加载和处理负担（6）可改进的地方：让不需变化的大量数据，原封不动，不用缓存到历史栏中，无需全部刷新，只刷新某些需要变化的数据区域，例如：当前时间的区域当前时间:<span>${requestScope.str}</span><br/><input type="button" value="同步方式提交"/>        <script type="text/javascript">//定位button按钮，同时添加单击事件document.getElementsByTagName("input")[0].onclick = function(){var url = "${pageContext.request.contextPath}/TimeServlet?id="+new Date().getTime();window.location.href = url;}</script>        public class TimeServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {System.out.println("TimeServlet::doGet");SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");String str = sdf.format(new Date());request.setAttribute("str",str);request.getRequestDispatcher("/06_time.jsp").forward(request,response);}}7.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{ajax = new ActiveXObject("microsoft.xmlhttp");}catch(e1){ajax = new XMLHttpRequest();}return ajax;}   （5）AJAX工作原理        参见<<AJAX工作原理.JPG>>   （6）AJAX包含的技术        参见<<AJAX包含的技术.JPG>>   （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页面，因为这样会起浏览器全面刷新    即只能以流的方式响应给浏览器8.异步方式获取时间<%@ 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";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/>静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>  </body></html>package com.xp.javaee.js.time;import java.io.IOException;import java.io.PrintWriter;import java.text.SimpleDateFormat;import java.util.Date;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;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();}}9.基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在（text/html;charset=UTF-8）<%@ 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异步对象，即XMLHttpRequestfunction 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>  验证码检查        （text/html;charset=UTF-8）<form>验证码：<input type="text" maxlength="4" size="4"/><img src="image.jsp"/><input type="button" value="看不清" size="2"/><span></span></form>        <script type="text/javascript">//定位按钮，同时添加单击事件document.getElementsByTagName("input")[1].onclick = function(){//定位img标签，修改src属性document.images[0].src = "image.jsp?id="+new Date().getTime();//清空span标签中的内容var spanElement = document.getElementsByTagName("span")[0];spanElement.innerHTML = "";//清空文本框中的内容document.getElementsByTagName("input")[0].value = "";}</script><script type="text/javascript">//定位文本框，同时添加键盘弹起事件document.getElementsByTagName("input")[0].onkeyup = function(){//获取输入的验证码var checkcode = this.value;//去空格checkcode = trim(checkcode);//获取验证码的长度var size = checkcode.length;//如果长度为4if(size == 4){//NO1)var ajax = createAJAX();//NO2)var method = "POST";var url = "${pageContext.request.contextPath}/CheckcodeServlet?id="+new Date().getTime();ajax.open(method,url);ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");//NO3)var content = "checkcode=" + checkcode; ajax.send(content);//--------------------------------------------//NO4)ajax.onreadystatechange = function(){if(ajax.readyState == 4){if(ajax.status == 200){//NO5)var imagePath = ajax.responseText;//NO6)var imgElement = document.createElement("img");imgElement.src = imagePath;imgElement.style.width = "14px";imgElement.style.height = "14px";var spanElement = document.getElementsByTagName("span")[0];spanElement.innerHTML = "";spanElement.appendChild(imgElement);}}}}else{//清空span标签中的内容var spanElement = document.getElementsByTagName("span")[0];spanElement.innerHTML = "";}}</script>        public class CheckcodeServlet extends HttpServlet {public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("UTF-8");//获取客户端输入的验证码String checkcodeClient = request.getParameter("checkcode");//获取服务端产生的验证码 HttpSession httpSession = request.getSession();String checkcodeServer = (String) httpSession.getAttribute("CHECKNUM");//二个验证码进行比较String tip = "images/MsgError.gif";if(checkcodeClient!=null && checkcodeServer!=null && checkcodeClient.equals(checkcodeServer)){tip = "images/MsgSent.gif";}//以流的方式输出tip变量response.setContentType("text/html;charset=UTF-8");PrintWriter pw = response.getWriter();pw.write(tip);pw.flush();pw.close();}}10.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的编码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>import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/** * 基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在  * @author AdminTC */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();}}11.二级下拉框联动<%@ 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>import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/** * 基于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();}}12．复习XMLHttpRequest对象的事件_方法_属性（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来接收，这里只限于JavaEE学科参数三：默认值为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=admin13.数据载体（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）适合：大量具有层次数据载体