AJAX读取XML内容并按排列显示
2017-06-05 10:24
375 查看
实现功能:点击按扭,显示出JSP页面中通过out.println传过来的xml信息
一、含XML的JSP页面
二、AJAX处理并显示返回页面
一、含XML的JSP页面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% response.setContentType("text/xml"); String txt = request.getParameter("username"); out.println("<student><name>张三</name><age>21</age><sex>男</sex></student>"); %>
二、AJAX处理并显示返回页面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>ajax02</title> <script type="text/javascript"> /* ajax 的几个步骤: 1、建立XmlHttpRequest对象 2、设置回调函数 3、使用Open方法建立与服务器的连接 4、向服务器发送数据 5、在回调函数中针对不同响应状态进行处理 */ var xmlHttp; function createXMLHttpRequest(){ //1建立XmlHttpRequest对象 if(window.ActiveXObject){ try{ alert("Msxml2.XmlHttp.5.0"); xmlHttp = new ActiveXObject("Msxml2.XmlHttp.5.0"); }catch(e){ try{ xmlHttp = new ActiveXObject("Microsoft.XMLHttp"); }catch(e){ alert("Microsoft.XMLHttp"); } } }else{ xmlHttp = new XMLHttpRequest(); } } function showMes(){ //2设置回调函数 if(xmlHttp.readyState==4){ //数据接收完成并可以使用 if(xmlHttp.status==200){ //http状态OK //5、在回调函数中针对不同响应状态进行处理 // document.getElementById("sp").innerHTML = xmlHttp.responseText; //服务器的响应内容 var name = xmlHttp.responseXML.getElementsByTagName("name")[0].firstChild.nodeValue; var age = xmlHttp.responseXML.getElementsByTagName("age")[0].firstChild.nodeValue; var sex = xmlHttp.responseXML.getElementsByTagName("sex")[0].firstChild.nodeValue; document.getElementById("spanname").innerHTML = name; document.getElementById("spanage").innerHTML = age; document.getElementById("spansex").innerHTML = sex; }else{ alert("出错:"+xmlHttp.statusText); //HTTP状态码对应的文本 } } } /** //这是GET方法传送 function getMes(){ createXMLHttpRequest(); var txt = document.getElementById("txt").value; var url="servlet/AjaxServlet?txt="+txt; url = encodeURI(url); //转换码后再传输 xmlHttp.open("GET",url,true); //3使用Open方法建立与服务器的连接 xmlHttp.onreadystatechange=showMes; xmlHttp.send(null); //4向服务器发送数据 } */ /** *这是post方法 */ function postMes(){ createXMLHttpRequest(); var txt = document.getElementById("txt").value; // var url = "servlet/AjaxServlet"; var url = "work02forxml-2.jsp" var params = "username="+txt; xmlHttp.open("POST",url,true); xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8"); xmlHttp.send(params); xmlHttp.onreadystatechange = showMes; } </script> </head> <body> <input type="text" id="txt"/> <input type="button" value="query" onclick="postMes()" /><br> <span id="sp"></span> 姓名:<span id="spanname"></span><br> 年龄:<span id="spanage"></span><br> 性别:<span id="spansex"></span> </body> </html>
相关文章推荐
- AJAX+JSP实现读取XML内容并按排列显示输出的方法示例
- 根据ajax发送数据,从servelt中读取xml数据并显示,实现查询、删除和分页
- JS通过ajax动态读取xml文件内容的方法
- JAVA操作XML(3)--读取XML文档的内容,并将内容显示在浏览器上
- ajax设定时间间隔内自动随机读取xml内容
- Ajax学习笔记,原生Ajax,使用XMLHttpRequest读取xml内容
- C#显示(读取)XML元素内容的简单例子
- JS通过ajax动态读取xml文件内容
- jquery-ajax请求action读取oracle数据库clob字段xml数据格式化显示(struts2)
- ajax异步调用,当鼠标点在图片上时,显示一个新层读取数据内容
- XML 读取xml文件的内容显示到控制台
- Ajax读取txt并对txt内容进行分页显示功能
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
- ajax中用responseXML读取不到中文数据的问题
- 如何读取XML文件内容!
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
- XmlReader读取、显示.xml
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
- Ajax读取XML实现动态下拉导航
- 如何读取XML文件内容!