前言：
当前姐妹们对“js判断ajax无响应”都比较注重，兄弟们都需要学习一些“js判断ajax无响应”的相关知识。那么小编也在网上汇集了一些对于“js判断ajax无响应””的相关内容，希望小伙伴们能喜欢，姐妹们快快来了解一下吧！软件项目实训及课程设计指导——如何应用XML +XSLT +AJAX组合技术实现无刷新的数据查询的应用实例
1、在Web应用系统项目中添加一个实现查询的请求页面searchBook.jsp
（1）创建searchBook.jsp页面文件的过程示图
在MyEclipse开发工具中选择文件中的新建菜单项目，然后创建出一个JSP页面文件，文件名称为searchBook.jsp，创建searchBook.jsp页面文件的过程示图参看如下的示例图所示。
（2）searchBook.jsp页面最终的代码示例如下，在页面中包含有一个简单的查询表单
<%@ page contentType="text/html; charset=gb2312" %><script language="javascript" src="searchBook.js"></script><form name="search" method="post" action=""> 请输入书名：<input id="bookkey" type="text" size="20" > <input type="button" name="search" value="搜索" onclick=getBooks('bookkey')> <div id="showBookInfo"></div></form>2、在Web应用系统项目中添加一个searchBook.js程序文件
（1）searchBook.js程序文件创建的过程示图
在MyEclipse开发工具中选择文件中的新建菜单项目，然后创建出一个JavaScript脚本类型的*.js文件，文件名称为searchBook.js，创建searchBook.js脚本文件的过程示图参看如下的示例图所示。
（2）输入文件名称searchBook.js，并点击"完成"按钮, 创建的过程示图参看如下的示例图所示。
（3）searchBook.js程序的代码示例
var httpRequest;function getHTTPRequestObject(){ var httpRequestObject; if (window.XMLHttpRequest){ // 适用于Mozilla, Safari 等浏览器, ... httpRequestObject = new XMLHttpRequest(); } else if (window.ActiveXObject){ //适用于 IE等浏览器, ... try{ httpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ try{ httpRequestObject= new ActiveXObject("Msxml2.XMLHTTP"); } catch (e2){ alert("您的浏览器有问题！"); } } } return httpRequestObject;}function getBooks(bookkey){ //向searchbookservlet发送请求 httpRequest=getHTTPRequestObject(); var url="searchbookservlet?bookkey="+document.getElementById(bookkey).value; httpRequest.onreadystatechange = showRetrunBooks; httpRequest.open("GET",url,true); httpRequest.send(null);}function showRetrunBooks() { //将返回的数据显示在指定的节点下 if (httpRequest.readyState == 4) { if (httpRequest.status == 200){ var allBooksDomDocument =httpRequest.responseXML; var bookXSLDocument = new ActiveXObject('Microsoft.XMLDOM'); bookXSLDocument.async=false; //直接加载bookDetail.xsl bookXSLDocument.load("bookDetail.xsl"); document.getElementById('showBookInfo').innerHTML= allBooksDomDocument.transformNode(bookXSLDocument); } else if(httpRequest.status == 404){ document.getElementById('showBookInfo').innerHTML = "没有找到与所请求的文件相匹配的资源！"; } else{ document.getElementById('showBookInfo').innerHTML = "你所请求的页面发生异常，错误代码为："+httpRequest.status; } } else{ document.getElementById('showBookInfo').innerHTML = "查找中，请稍等..."; }}3、在Web应用系统项目中添加一个bookDetail.xsl文件
（1）bookDetail.xsl文件创建的过程示图
在MyEclipse开发工具中选择文件中的新建菜单项目，然后创建出一个XSLT转换文件，文件名称为bookDetail.xsl，创建bookDetail.xsl文件的过程示图参看如下的示例图所示。
（2）bookDetail.xsl文件的代码示例
<?xml version="1.0" encoding="gb2312" ?><xsl:stylesheet xmlns:xsl=";> <xsl:template match="/"> <h2>您搜索的书籍如下：</h2> <xsl:apply-templates select="Books"/> </xsl:template> <xsl:template match="Books"> <Table border="1" width="80%"> <TR><TD>书名</TD><TD>作者</TD><TD>出版社</TD><TD>价格</TD><TD>出版时间</TD><TD>内容简介</TD></TR> <xsl:apply-templates select="Book"/> </Table> </xsl:template> <xsl:template match="Book"> <TR> <TD><xsl:value-of select="BookName"/></TD> <TD><xsl:value-of select="Writer"/></TD> <TD><xsl:value-of select="Publisher"/></TD> <TD><xsl:value-of select="Price"/></TD> <TD><xsl:value-of select="PublishTime"/></TD> <TD><xsl:value-of select="Content"/></TD> </TR> </xsl:template></xsl:stylesheet>
4、在Web应用系统项目中添加后台Java Servlet程序
（1）程序类名称为SearchBookServlet，程序包名称为com.px1987.webajax.servlet
在MyEclipse开发工具中选择文件中的新建菜单项目，然后创建出一个Servlet类型的文件，程序类名称为SearchBookServlet，程序包名称为com.px1987.webajax.servlet，创建SearchBookServlet程序的过程示图参看如下的示例图所示。
（2）该Servlet的名称为searchbookservlet，参看如下的示例图所示。
（3）编程该Servlet中的doGet方法
package com.px1987.webajax.servlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.jdom.*;import org.jdom.output.*;public class SearchBookServlet extends HttpServlet { Document xmlDoc=null; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String bookName=request.getParameter("bookkey"); //然后根据bookName查询数据库表以获得具体的结果数据，在此加以省略 buildBooksXMLTree(); response.setContentType("text/xml; charset=gb2312"); response.setHeader("Cache-Control", "no-cache"); PrintWriter out = response.getWriter(); responseXMLDataToBrowser(out); out.close(); } public void buildBooksXMLTree() { //利用JDom动态地创建XML的节点树 treeRoot=new Element("Books"); xmlDoc=new Document(treeRoot); tagName=new Element("Book"); treeRoot.addContent(tagName); /**下面的数据在实际系统中应该来自于数据库表，为了简化示例在程序中动态创建出对应的XML标签 */ childTagName=new Element("BookName"); childTagName.setText("AJAX技术与应用"); tagName.addContent(childTagName); childTagName=new Element("Writer"); childTagName.setText("张三"); tagName.addContent(childTagName); childTagName=new Element("Publisher"); childTagName.setText("电子工业出版社"); tagName.addContent(childTagName); childTagName=new Element("Price"); childTagName.setText("45.5"); tagName.addContent(childTagName); childTagName=new Element("PublishTime"); childTagName.setText("2007年12月"); tagName.addContent(childTagName); childTagName=new Element("Content"); childTagName.setText("本书是介绍AJAX技术与应用方面的图书"); tagName.addContent(childTagName); } public void responseXMLDataToBrowser(PrintWriter out) throws IOException{ Format format=Format.getCompactFormat(); format.setEncoding("gb2312"); format.setIndent(" "); XMLOutputter XMLOut=new XMLOutputter(format); XMLOut.output(xmlDoc,out); }}5、在Web应用系统项目中导入JDom的系统包文件，实现对XML文档的动态解析
在Web应用系统项目中导入JDom的系统包文件jdom.jar，利用JDom实现对XML文档的动态解析，参看如下的示例图所示。
6、部署Web应用系统项目和启动服务器
（1）部署Web应用系统项目
（2）启动Tomcat服务器
7、测试本示例的应用功能的正确性
（1）启动测试页面，并在查询表单中输入查询的数据（本示例为某书名）
（2）点击测试页面中的Web表单内的"搜索"按钮后将出现如下的查询结果
查询的结果是来自于服务器端处理的结果，并且直接在Web表单的下面显示，页面没有产生传统的Web页面的提交后页面更换的效果。
课程设计指导——应用AJAX技术提高Web应用的整体响应性能
如何在J2EE平台开发基于Velocity模板的Web应用
如何在Web应用系统表示层开发中应用Velocity模板技术
应用XML+XSLT技术分离Web应用表示层数据和样式的实例
如何应用“XML+XSLT”技术分离Web表示层数据和样式
标签： #js判断ajax无响应
