AJAX在线基础(待续一) -

why7282

浏览: 28920 次
性别:
来自: 北京

最近访客更多访客>>

zhpower

Mr.shen

lsj626472785

terryang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

AJAX在线基础(待续一)

Ajax json XML 电子商务浏览器

1、对与处理服务器的相应信息，xmlhttpRequest提供了两个方法.如下：
   Xml.responseText:作为字符串进行返回，使用alert()会发现处理的是返回信息的String
   Xml.responseXML:做为XML返回，使用alert()会发现是一个Object对象。
2、用reponseText接收的字符串大部门的时候来和innerHTML方法结合使用，得到比较动态的页面内容，比如在页面产生事件，然后响应请求，服务器组织HTML返回，在调用HTML的innserHTML设置DIV等的HTML值。
3、当使用responseXML的时候，使用它，响应信息必须设置为response.setContentType(“text/xml”)需要使用DOM的方式结合JS来处理服务器响应的结果
DOM是一种标准，浏览器都会对它进行支持，通过结合JS很好的处理
一些DOM的方法和属性：
childNodes 返回当前元素的所有子元素数组
firstChild 返回当前元素的第一个下级子元素
lastChild 返回当前元素的最后一个下级子元素
nextsibling 返回当前元素的后一个元素
nodevalue 当前元素的读写属性
parentnode 父元素
previousSibling 前一个元素
下面是一些方法
getElementById(“id”) 获取指定ID元素
getElementsByTagName(“name”) 获取指定名称数组
hasChildNodes() 是否还有子元素
getAttribute(“name”); 返回元素的属性值
一个例子：
如下客户端发送请求服务器端的school.xml并且alert出所有的班级信息
如下：
<%@ page language="java" pageEncoding="utf-8"%>
<html>
<head>
<script type="text/javascript">
         function getWEBXML() {
            var xmlhttp = createXML();
            xmlhttp.onreadystatechange = function(){
            if (xmlhttp.readyState == 4) {//readystate 为4即数据传输结束
    if(xmlhttp.status == 200){
showAllClass(xmlhttp.responseXML);
}
   }
            }
            xmlhttp.open("GET", "school.xml", true);
            xmlhttp.send(null);
         }

        function createXML() {
            var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
        return xmlhttp;
         }

         function showAllClass(xmldoc) {
           var school = xmldoc.getElementsByTagName("school")[0];
           var childs = school.childNodes;
           for(var i=0; i<childs.length;i++) {
              var garde = childs[i];
              for(var j=0; j<garde.childNodes.length;j++) {
                 var cla = garde.childNodes[j];
                 alert(cla.childNodes[0].nodeValue);
              }
           }
         }
     </script>
</head>
<body>
<input type="button" id="id" onclick="getWEBXML()" />
</body>
</html>
School.xml：
<?xml version="1.0" encoding="UTF-8"?>
<school>
   <computer>
      <class>计算机网络班</class>
      <class>软件工程班</class>
      <class>计算机科学与技术班</class>
   </computer>
   <electrice>
      <class>电子商务班</class>
      <class>硬电工程班</class>
   </electrice>
   <english>
      <class>商务英语</class>
      <class>贸易英武</class>
   </english>
</school>
注释：DOM把每个节点都当作为一个数组，需要访问最低节点的时候都要使用childNodes[0]来访问使用。在类似HTML的标签中，是吧内容都当成是当前节点的第一个节点
如：node.childNodes[0].firstChild.nodeValue;
4、使用DOM能动态的添加文档内容和删除内容
它的实现部分方法如下：
document.createElement(“tagname”) 创建指定名称的节点
Document.createTextNode(text) 创建包含静态文本的节点,即时文本节点
<element>.appendChild(childNode) 给指定节点添加子节点
<element>.setAttribute(“name”,”value”)/getAttribute(“name)” 设置和获取指定节点的name属性的值
如<div class=”test” />就是获取test
<element>.insertBefore(newNode,targetNode) 在targetNode节点前插入newNode
<element>.removeAttribute(name) 删除节点指定名称属性
<element>.removeChild(nodw) 删除指定的子节点
<element>.replaceChile(newNode,oldNode) 用新的子节点替换新的子节点
<element>.hasChildNodes() 是否还有子元素

使用上面的方法能灵活的生成各种动态的内容，例子如下：
主要是使用AJAX请求服务器的User.xml，然后解析结果放到页面上，代码如下：
<%@ page language="java" pageEncoding="utf-8"%>
<html>
<head>
<script type="text/javascript">
         function getWEBXML() {
            var xmlhttp = createXML();
            xmlhttp.onreadystatechange = function(){
            if (xmlhttp.readyState == 4) {//readystate 为4即数据传输结束
    if(xmlhttp.status == 200){
clearTable();
parseUsers(xmlhttp.responseXML); //解析结果
}
   }
            }
            xmlhttp.open("GET", "User.xml", true);
            xmlhttp.send(null);
         }

        function createXML() {
            var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
        return xmlhttp;
         }

        function clearTable() {
            //解析之前清除原有的内容
        var ubody = document.getElementById("ubody");
        while(ubody.childNodes.length >0) {
            ubody.removeChild(ubody.childNodes[0]);
        }
        }

        function parseUsers(uxml) {
           var uresult = uxml;
           var users = uresult.getElementsByTagName("User");
           var username = "";
           var email = "";
           var address = "";
           //循环获取每个USER的内容，然后调用addOneRow函数创建行
           for(var i=0; i<users.length; i++) {
               user = users[i];
               username = user.getElementsByTagName("username")[0].firstChild.nodeValue;
               email = user.getElementsByTagName("email")[0].firstChild.nodeValue;
               address = user.getElementsByTagName("address")[0].firstChild.nodeValue;
               addOneRow(username,email,address);
           }

           document.getElementById("utable").setAttribute("border","1");
        }
        //先创建<tr>节点，之后在依次创建三个td设置为<tr>的子节点
        function addOneRow(username,email,address) {
        var row = document.createElement("<tr>");
        var td = createTd(username);
        row.appendChild(td);
        td = createTd(email);
        row.appendChild(td);
        td = createTd(address);
        row.appendChild(td);
        document.getElementById("ubody").appendChild(row);
        }
        //创建td元素，在给td创建一个文本子元素，返回td元素
        function createTd(content) {
           var td = document.createElement("<td>");
           var text = document.createTextNode(content);
           td.appendChild(text);
           return td;
        }


     </script>
</head>
<body>
<input type="button" id="id" onclick="getWEBXML()" value="生成表格"/>
<table align="left" id="utable" border="0">
   <tbody id="ubody">

   </tbody>
</table>
</body>
</html>

User.xml内容如下
<?xml version="1.0" encoding="UTF-8"?>
<school>
   <User>
      <username>王建</username>
      <email>4490843@qq.com</email>
      <address>江西南昌</address>
   </User>
   <User>
      <username>程招</username>
      <email>chengzhoa@126.com</email>
      <address>上海浦东</address>
   </User>
   <User>
      <username>刘振</username>
      <email>liuzheng@sina.com</email>
      <address>深圳福田</address>
   </User>
</school>
运行效果：点击生成表格按钮结果显示如下：

5、很多时候可能会使用发送xml作为请求，这时候发送的时候同样利用JS和document组织成xml各式的数据，然后网服务器端发送，服务器端可以使用各种解析xml的工具去解析发送过来的xml文件数据。如dom4j,jdom,jaxp等技术都能响应的解析，实际的实现和document解析xml文件的方式类似。
6、json:使用xml来发送复杂的数据有些冗余等，所以很多时候更简易使用json的方式发送数据，然后服务器同时使用json的方式解析数据，json对客户端把数据对象转换成json字符串的方式做了封装，在服务器端同时也对解析做了封装，只需要得到它的类库就可以方便的使用这个技术来实现需求
一个客户端的JSON把USER对象解析成字符串，进行发送到服务器，JSON对象是键值对的数组方式一般
Function User(username,password,email,address) {
This.username = username;
This.password = password;
This.email. = email;
This.address = address;
}

Function userJSON() {
   Var user = new User(“a”,”b”,”c”,”d’);
   Userstring = JSON.stringify(user);//使用JSON把对象解析
}
服务器端的解析
BufferedReader br = request.getReader();
StringBuffer sb = new StringBuffer();
String s = null;
While((s = br.readLine())!=null) {
Sb.append(s)；
}

JSONObject jsobject = new JSONObject(sb.tostring);
String username = jsobject.getString(“username”);
String password = jsobject.getString(“password”);
………..方式

分享到：