ajax

ajax(全称:Asynchronous JavaScript and XML--非同步JavaScript与XML) ??? 一:页面ajax代码流程(String传输): .创建引擎 ??????????? IE6浏览器创建ajax引擎方式: ??????????????? if(window.XMLHttpRequest){ ????????????????????? xmlreq = new XMLHttpRequest(); ????????????????? } else if(window.ActiveXObject){ ????????????????????? xmlreq = new ActiveXObject("Microsoft.XMLHttp"); ????????????????? } ????????????? IE8+,FF8+浏览器穿件ajax引擎方式: ????????????????? var xmlhttp = new XMLHttpRequest(); .设置请求参数:1,设置传送方式(get,post).2,设置url.3,设置是否异步传送 ????????????? get: ????????????????? xmlhttp.open("get","${pageContext.request.contextPath }/login.do?userName="+document.getElementById("userName").value,true); ????????????? post: ????????????????? xmlhttp.open("post","${pageContext.request.contextPath }/login.do",true); ????????????????? xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); .设置服务器的回应处理: .onreadystatechange:可以监听到服务器的响应状态,以便于客户端浏览器实时监听到交互 .xmlhttp.readyState:交互状态? 1,准备交互.2,开始交互.3,服务器运算中.4,处理结束 .xmlhttp.status:200,成功.404,资源未找到 .关羽XMLRequest引擎对象返回值问题:xmlhttp.responseText:普通文本.xmlhttp.responseXML:接收XML ????????????? xmlhttp.onreadystatechange = function () { ????????????????? if(xmlhttp.readyState == 4){ ????????????????????? if(xmlhttp.status == 200){ ????????????????????????? document.getElementById("userNameSpan").innerText = xmlhttp.responseText; ????????????????????????? } ????????????????????? }else{ ????????????????????????? alert("服务器出错..."); ????????????????????? } ????????????????? } ????????????????? else{ ????????????????????? alert("数据处理中"); ????????????????? } ????????????? }; .传送数据: ????????????? get: ????????????????? xmlhttp.send(null); ????????????? post: ????????????????? xmlhttp.send("userName="+document.getElementById("userName").value); ????? ????? 例子: ??????? function aMethod(){ ????????????? //1.创建Ajax引擎 ????????????? var xmlhttp = new XMLHttpRequest(); ????????????? //2.设置请求参数 ????????????? xmlhttp.open("post",true); ????????????? xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); ????????????? //3.设置服务器的回应处理 ????????????? xmlhttp.onreadystatechange = function () { ????????????????? if(xmlhttp.readyState == 4){ ????????????????????? if(xmlhttp.status == 200){ ????????????????????????? var msg = xmlhttp.responseText; ????????????????????????? document.getElementById("userNameSpan").innerText = msg; ????????????????????? }else{ ????????????????????????? alert("服务器出错..."); ????????????????????? } ????????????????? } ????????????? }; ????????????? //4.发送数据 ????????????? xmlhttp.send("userName="+document.getElementById("userName").value); ????????? } ????????? 页面中文本域挂失焦点事件:<input type="text" name="userName" onblur="aMethod()" id="userName"/> ????????? 后台Action类中传送数据逻辑: ????????????? boolean isOk = false; ??????????? if("scott".equalsIgnoreCase(userName)){ ??????????????? isOk = true; ??????????? } ??????????? response.getWriter().print(isOk); ??????????? ??? 二:xml传送数据: ??????? 页面代码:(解析xml格式数据) ???????????? <script type="text/javascript"> ????????????????? function aMethod(){ ????????????????????? var xmlhttp = new XMLHttpRequest(); ????????????????????? xmlhttp.open("post","${pageContext.request.contextPath }/xml.do",true); ????????????????????? xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); ????????????????????? xmlhttp.onreadystatechange = function(){ ????????????????????????? if(xmlhttp.readyState == 4){ ????????????????????????????? if(xmlhttp.status == 200){ ????????????????????????????????? //如果传回的是xml格式的数据,要使用responseXML进行接收,此时接到的数据为xml对象 ????????????????????????????????? var msg = xmlhttp.responseXML; ????????????????????????????????? //取得根元素 ??????????????????????????????? var rootElement = msg.documentElement; ??????????????????????????????? //取得子元素方式:元素对象.getElementsByTagName("tagName"); ??????????????????????????????? var childElements = rootElement.getElementsByTagName("test"); ??????????????????????????????? //取得tbody ??????????????????????????????? var tbody = document.getElementById("tbodyId"); ??????????????????????????????? //循环,取得每个元素--元素.getAttribute(""); ??????????????????????????????? for(var i=0;i<childElements.length;i++){ ??????????????????????????????????? var childElement = childElements[i]; ??????????????????????????????????? var id = childElement.getAttribute("id"); ??????????????????????????????????? var name = childElement.getAttribute("name"); ??????????????????????????????????? var age = childElement.getAttribute("age"); ??????????????????????????????????? var sex = childElement.getAttribute("sex"); ??????????????????????????????????? var birthday = childElement.getAttribute("birthday"); ??????????????????????????????????? ??????????????????????????????????? var tr = document.createElement("tr"); ??????????????????????????????????? tr.align = "center"; ??????????????????????????????????? var td1 = document.createElement("td"); ??????????????????????????????????? var td2 = document.createElement("td"); ??????????????????????????????????? var td3 = document.createElement("td"); ??????????????????????????????????? var td4 = document.createElement("td"); ??????????????????????????????????? var td5 = document.createElement("td"); ??????????????????????????????????? ??????????????????????????????????? td1.innerHTML = id; ??????????????????????????????????? td2.innerHTML = name; ??????????????????????????????????? td3.innerHTML = age; ??????????????????????????????????? td4.innerHTML = sex; ??????????????????????????????????? td5.innerHTML = birthday; ??????????????????????????????????? ??????????????????????????????????? tr.appendChild(td1); ??????????????????????????????????? tr.appendChild(td2); ??????????????????????????????????? tr.appendChild(td3); ??????????????????????????????????? tr.appendChild(td4); ??????????????????????????????????? tr.appendChild(td5); ??????????????????????????????????? ??????????????????????????????????? tbody.appendChild(tr); ??????????????????????????????? } ????????????????????????????? } ????????????????????????? } ????????????????????? }; ????????????????????? xmlhttp.send("1=1"); ????????????????? } ???????????? </script> ???????????? <body onload="aMethod()"> ????????????????? <table border="2" cellspacing="0" bgcolor="blue" width="60%" align="center"> ????????????????????? <thead> ????????????????????????? <tr align="center"> ????????????????????????????? <td>编号</td> ????????????????????????????? <td>姓名</td> ????????????????????????????? <td>年龄</td> ????????????????????????????? <td>性别</td> ????????????????????????????? <td>生日</td> ????????????????????????? </tr> ????????????????????? </thead> ????????????????????? <tbody id="tbodyId"> ????????????????????? </tbody> ????????????????? </table> ???????????? </body> ??????? 后台Action类中: ??????????? String xmlHeader = "<?xml version="1.0" encoding="UTF-8"?>"; ??????????? xmlHeader +="<tests>"; ??????????? for(Test l : list){ ??????????????? String test = "<test id='"+l.getId()+"' name='"+l.getName()+"' age='"+l.getAge()+"' sex='"+l.getSex()+"' birthday='"+l.getBirthday()+"' ></test>"; ??????????????? xmlHeader += test; ??????????? } ??????????? xmlHeader +="</tests>"; ??????????? //发送数据:response.setContentType("application/xml;charset=utf-8");--以xml形式发送,设置编码utf-8 ??????????? response.setContentType("application/xml;charset=utf-8"); ??????????? response.getWriter().print(xmlHeader); ??????????? response.getWriter().flush();