Ajax技术PPT(3)_H5之家 - 中国HTML5教程资源分享第一站

Wu = http_request.responseText; // http_request.responseText – 以文本字符串的方式返回服务器的响应 // http_request.responseXML – // 以XMLDocument对象方式返回响应.处理XMLDocument对象可以用JavaScript DOM函数 // JS对带回来的数据进行加工 // alert( http_request.responseText ); // document.getElementById("jbgx").innerHTML=http_request.responseText; alert("var shuJu = " + http_request.responseText); } else { alert('请求有问题'); } }

?

}

配合操作页面的动作
? ? ? ? ? ? ? ?

eval("var shuJu = " + http_request.responseText); for ( var i = 0; i < shuJu.length; i++) { // 1.建立 option var op = document.createElement("option"); // 2.改（css html属性，内容） op.value = shuJu[i]; op.innerHTML = shuJu[i]; // 3.挂

?
?

document.getElementById("xueLi").appendChild(op);
}

innerHTML
? <?xml version="1.0" encoding="UTF8"?>
? <table>

? <tr><td id=“tdTest”>name</td></tr>
? </table>

处理xml文档的dom元素属性
属性名 childNodes 描述返回当前元素所有子元素的数组

firstChild
lastChild

返回当前元素的第一个下级子元素
返回当前元素的最后一个子元素

nextSibling
nodeValue parentNode previousSibling

返回紧跟在当前元素的下一个元素
指定元素属性值的读取返回元素的父结点返回紧邻当前元素的前一个元素

用于遍历xml文档的dom元素方法
方法名
getElementById(id) (document) getElementsByTag Name(name) hasChildNodes() getAttribute(name)

描述
获取指定唯一ID属性值文档中的元素返回当前元素中有指定标记名字的元素数组返回一个布尔值，指示元素是否有子元素返回元素的属性值，属性由name指定

操作xml数据格式.Part1
? ?

var xmlHttp; function test() {

?
? ? ? ? ?

xmlHttp=GetXmlHttpObject();
//访问jsp 或 action或servlet路径 var url="<%=request.getContextPath()%>/TestXMLServlet"; var v = document.getElementById("txt").value; //指定回调方法 xmlHttp.onreadystatechange = function() {

?
? ? ? ? ?

//请求完了
if (xmlHttp.readyState == 4) { //status 200:好了 if (xmlHttp.status == 200) { //写代码 var xmlDoc = xmlHttp.responseXML;

?
? ? ? ? ?

var id = xmlDoc.getElementsByTagName("id")[0].text;
var name = xmlDoc.getElementsByTagName("name")[0].text; alert(id + "---" + name); } else { alert("请求有异常"); }

?
? ?

}
}; //打开传输通道

操作xml数据格式
? ?

//XMLHttpRequest初始化 function GetXmlHttpObject() {

?
? ? ? ? ?

var xmlHttp = null;
try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { // Internet Explorer

?
? ? ? ? ?

try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } }

?
? ? ? ?

return xmlHttp;
} --------------------------------------------------------HTML代码 <b

ody> <input type="text" id="txt" ><span id="sp"></span><br><button onclick="test()">发送</button> </body>

操作xml数据格式
? ?

----------------------------------------Servlet代码

?

public class TestXMLServlet extends HttpServlet {
@Override protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub request.setCharacterEncoding("UTF-8"); String name=request.getParameter("name"); System.out.println("ajaxtest"+"--"+name); // 给页面回传 response.setContentType("text/xml;charset=utf-8"); PrintWriter out=response.getWriter(); out.print("<xml>"); out.print("<id>007</id>"); out.print("<name>"+name+"</name>"); out.print("</xml>"); out.close(); }

}

使用w3c来编辑动态网页
? 上例我们见到了使用xml来进行交互是多么的简

单。
? 但是不是有的服务器应答都是要弹出警告框而

是做一些更加有意思的事情。这就要求我们可
以动态改变浏览器的dom对象。

w3cDom的属性和方法
属性方法
document.createElement(tagname) document.createTextNode(text) <element>.appendChild(childNode) <element>.getAttribute(name) <element>.setAttribute(name,value)

描述
文档对象上的createElement方法可以创建由 tagname指定的元素。如果以串div作为参数，就会生成一个div元素文档对象的createTextNode方法会创建一个包含静态文本的结点将指定结点增加到当前元素的子结点列表（作为一个新的子结点）

这些方法分别是设置和获得元素的属性将新结点插入到tagetnode的前面
删除子元素

<element>.insertBefore(newNode,targetNod e)
<element>.removeChild(childnode) <element>.replaceChild(newNode,oldNode) <element>.removeAttribute(node);

用新结点覆盖旧结点
在元素中删除属性name

<element>.hasChildeNode();

返回布尔值判断是否包含子元素

简单的ajax框架
? 就是说在服务器端和浏览器端定义一种2者都可

以接受的数据格式。
? 在服务器端定义一种通俗易懂的xml生成形式

。
? 在浏览器端定义一种易于处理的js格式。

? 处理get和post请求

Get请求
?

如果要发送get请求那么可以不做任何处理直接在open方法中添加连接和参数，同时send方法的参数赋为空。 ? xhr.open(“Get","<%=request.getContextPath()%>/ajax? name=你好啊&date="+new Date().getTime(),true); ? xhr.send(null); 如果是post请求那么应该将请求写成如下形式： ? xhr.open("post","<%=request.getContextPath()%>/ajax?d ate="+new Date().getTime(),true); ? xhr.setRequestHeader("Content-Type","application/xwww-form-urlencoded;"); ? xhr.send(“name=你好啊");

?

总结：注红的地方是要记住的地方

小结

基本练习
? 第一节课回顾课堂讲解的内容,并练习示例

熟练掌握AJAX的用法,体会AJAX的好处 ? 第二三节课继续完善订单管理模块.