AJAX在线基础(待续1)
日期：2014-05-16 浏览次数：20584 次
AJAX在线基础(待续一)
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>
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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
