ajax
ajax(全称:Asynchronous JavaScript and XML--非同步JavaScript与XML) 一:页面ajax代码流程(String传输): 1.创建引擎 IE6浏览器创建ajax引擎方式: if(window.XMLHttpRequest){ xmlreq = new XMLHttpRequest(); } else if(window.ActiveXObject){ xmlreq = new ActiveXObject("Microsoft.XMLHttp"); } IE8+,FF8+浏览器穿件ajax引擎方式: var xmlhttp = new XMLHttpRequest(); 2.设置请求参数: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"); 3.设置服务器的回应处理: 1.onreadystatechange:可以监听到服务器的响应状态,以便于客户端浏览器实时监听到交互 2.xmlhttp.readyState:交互状态 1,准备交互.2,开始交互.3,服务器运算中.4,处理结束 3.xmlhttp.status:200,成功.404,资源未找到 4.关羽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("数据处理中"); } }; 4.传送数据: get: xmlhttp.send(null); post: xmlhttp.send("userName="+document.getElementById("userName").value); 例子: function aMethod(){ //1.创建Ajax引擎 var xmlhttp = new XMLHttpRequest(); //2.设置请求参数 xmlhttp.open("post","${pageContext.request.contextPath }/login.do",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();
哗众取宠,只会迷失自我 ...