所谓AJAX,其实就是在网页客户端通过JAVASCRIPT调用服务器端的方法,然后获得服务器返回的数据进行操作!服务器返回的数据有三种,文本(responseText)、XML(responseXML)、数据流(responseStream)!其中前两项是使用最多的两种,下面就这两种进行讲解!
首先必须在服务器写一个返回数据的页面、一般处理程序或者是Web Service都可以,这里我们在服务器端建立的一个一般处理程序**.ashx
1.responseText
<script type="text/javascript"> //创建XMLHttpRequest function createXMLHttpRequest() { if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); } else { return new XMLHttpRequest(); } } //定义一个XMLHttpRequest的全局变量 var xhr; function CheckUser(loginId) { //ExistsUser.ashx表示服务器端的一个一般处理程序 var path = "**.ashx?loginId=" + loginId; xhr = createXMLHttpRequest(); xhr.onreadystatechange = readyDo;//服务器处理完毕后执行readyDo方法 xhr.open("Get", path, true);//通过Get方式请求到path位置,true表示异步提交 xhr.send(null); } function readyDo() { if (xhr.readyState == 4 && xhr.status == 200) { document.getElementByIdx_x("userInfo").style.display = "none"; var result = xhr.responseText; if (result == "true") { document.getElementByIdx_x("userInfo").style.display = "inline"; } } } </script>
2.responseXML
<script type="text/javascript"> //创建XMLHttpRequest对象 function createXMLHttpRequest() { if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); } else { return new XMLHttpRequest(); } } var xhr; function getUser() { var path = "**.ashx?loginId=accp"; xhr = createXMLHttpRequest(); xhr.onreadystatechange = function showUser() { if (xhr.readyState == 4 && xhr.status == 200) { var result = xhr.responseXML; document.getElementByIdx_x("userInfo").innerHTML = "编号:" + result.getElementsByTagName_r("Id")[0].text + "<br/>姓名:" + result.getElementsByTagName_r("Name")[0].text + "<br/>地址:" + result.getElementsByTagName_r("Address")[0].text + "<br/>年龄:" + result.getElementsByTagName_r("Age")[0].text; } } xhr.open("Get", path, true); xhr.send(null); } </script>
提示:responseXML表示返回的是一个XML文件,客户端可以解析服务器传回的XML,其中的方法和属性如下:
getElementsByTagName_r()方法:用来获取指定节点名的节点对象集合,参数为节点名称字符串
selectSingleNode()方法:用来获得符合条件的单个节点对象,它的参数为XPath表达式,XPath是一门在XML文档中查找信息的语言
selectNodes()方法:用来获取符合条件的节点对象的集合,它的参数同样为XPath表达式
getAttribute()方法:通过它可以获取节点属性值,它的参数为节点属性名称
text属性:通过它可以获取节点内部的文本
childNodes属性:通过它可以获取当前节点子节点的集合
firstChild属性:通过它可以获取当前节点的第一个子节点对象
lastChild属性:通过它可以获取当前节点的最后一个子节点对象
parentNode属性:通过它可以获取当前节点对象的父节点对象