Javascript 学习AJAX，html代码赢得'；我什么也不做_Javascript_Html_Ajax

Javascript 学习AJAX，html代码赢得'；我什么也不做

javascript html ajax

Javascript 学习AJAX，html代码赢得'；我什么也不做,javascript,html,ajax,Javascript,Html,Ajax,我已经为我编写的一个棋盘游戏设置了一个servlet，显示用户名、密码、赢和输。我想创建一个ajax程序来访问这个页面，并创建一个表，列出用户的胜负（就像一个简单的领导委员会）。然而，我的HTML代码将无法工作，我不明白为什么。我可以登录到作为变量url列出的页面，并从servlet中查看xml文件。非常感谢您的帮助 <html> <head> <script type="text/javascript"> function requestUpdate() {

我已经为我编写的一个棋盘游戏设置了一个servlet，显示用户名、密码、赢和输。我想创建一个ajax程序来访问这个页面，并创建一个表，列出用户的胜负（就像一个简单的领导委员会）。然而，我的HTML代码将无法工作，我不明白为什么。我可以登录到作为变量url列出的页面，并从servlet中查看xml文件。非常感谢您的帮助

<html>
<head>
<script type="text/javascript">
function requestUpdate()
{
    var req = newXMLHttpRequest();
    req.onreadystatechange = function()
    {   
        if(req.readyState == 4)
        {
            displayResult(req);
        }
    }
    var url = "http://localhost:8080/Checkers/CheckersServlet"; 
    req.open("GET",url,true);
    req.send(null);
}

function displayResult(req)
{
    var div = document.getElementById("Scoreboard");
    div.innerHTML = "<table border> <tr> <th> Username </th> <th> Wins </th> <th> Losses </th> </tr>" ;

    var doc = req.responseXML;
    var Users = doc.getElementsByTagName('Username');
    var Wins = doc.getElementsByTagName('Wins');
    var Losses = doc.getElementsByTagName('Losses');
    var U;
    var W;
    var L;
    for(var i = 0; i < Users.length; i++)
    {
        U = Users.item(i).textContent;
        W = Wins.item(i).textContent;
        L = Losses.item(i).textContent;

        div.innerHTML = div.innerHTML + "<tr> <td>" + U + "</td> <td>" + W + "</td> <td>" + L + "</td> </tr>";
    }

div.innerHTML = div.innerHTML + "</table>";
}
</script>
</head>
<body onload = "requestUpdate()">
    <button onclick = "requestUpdate()">Update</button>
    <div id = "Scoreboard"></div>
</body>


函数requestUpdate（）
{
var req=newXMLHttpRequest（）；
req.onreadystatechange=函数（）
{   
如果（req.readyState==4）
{
显示结果（req）；
}
}
变量url=”http://localhost:8080/Checkers/CheckersServlet"; 
请求打开（“获取”，url，true）；
请求发送（空）；
}
函数显示结果（req）
{
var div=document.getElementById（“记分板”）；
div.innerHTML=“用户名赢了输”；
var doc=req.responseXML；
var Users=doc.getElementsByTagName（'Username'）；
var Wins=doc.getElementsByTagName（'Wins'）；
var损失=文件getElementsByTagName（“损失”）；
var U；
var-W；
变种L；
对于（var i=0；i



下面是servlet代码
import java.io.IOException;
import java.io.FileReader;
import java.io.BufferedReader;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class CheckersServlet
 */
@WebServlet("/CheckersServlet")
public class CheckersServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;


/**
 * @see HttpServlet#HttpServlet()
 */
public CheckersServlet() {
    super();
    // TODO Auto-generated constructor stub
}

/**
 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
 */
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
{
    // TODO Auto-generated method stub
    response.setContentType("text/xml");
    PrintWriter out = response.getWriter();
    out.println("<?xml version='1.0'?>" );

    BufferedReader fReader = new BufferedReader(new FileReader("/Users/adamsturge991/desktop/checkersdatabase.txt"));
    String data = fReader.readLine();
    out.println("<CheckersData>");
    while(data != null)
    {
        out.println("<User>");
        out.println("<Username>");
        out.println(data); 
        out.println("</Username>");
        data = fReader.readLine();
        out.println("<Password>");
        out.println(data);
        out.println("</Password>");
        data = fReader.readLine();
        out.println("<Wins>");
        out.println(data);
        out.println("</Wins>");
        data = fReader.readLine();
        out.println("<Losses>");
        out.println(data);
        out.println("</Losses>");
        out.println("</User>");
        data = fReader.readLine(); //get next username or null if end of database
    }
    out.println("</CheckersData>");
}

/**
 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
 */
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
}

import java.io.IOException；
导入java.io.FileReader；
导入java.io.BufferedReader；
导入java.io.PrintWriter；
导入javax.servlet.ServletException；
导入javax.servlet.annotation.WebServlet；
导入javax.servlet.http.HttpServlet；
导入javax.servlet.http.HttpServletRequest；
导入javax.servlet.http.HttpServletResponse；
/**
*Servlet实现类checkerservlet
*/
@WebServlet（“/checkerservlet”）
公共类checkerservlet扩展了HttpServlet{
私有静态最终长serialVersionUID=1L；
/**
*@参见HttpServlet#HttpServlet（）
*/
公共checkerservlet（）{
超级（）；
//TODO自动生成的构造函数存根
}
/**
*@参见HttpServlet#doGet（HttpServletRequest请求，HttpServletResponse响应）
*/
受保护的void doGet（HttpServletRequest请求，HttpServletResponse响应）抛出ServletException，IOException
{
//TODO自动生成的方法存根
setContentType（“text/xml”）；
PrintWriter out=response.getWriter（）；
out.println（“”）；
BufferedReader-fReader=new BufferedReader（new FileReader（“/Users/adamsturge991/desktop/checkersdatabase.txt”）；
字符串数据=fReader.readLine（）；
out.println（“”）；
while（数据！=null）
{
out.println（“”）；
out.println（“”）；
out.println（数据）；
out.println（“”）；
data=fReader.readLine（）；
out.println（“”）；
out.println（数据）；
out.println（“”）；
data=fReader.readLine（）；
out.println（“”）；
out.println（数据）；
out.println（“”）；
data=fReader.readLine（）；
out.println（“”）；
out.println（数据）；
out.println（“”）；
out.println（“”）；
data=fReader.readLine（）；//获取下一个用户名，如果数据库结束，则获取null
}
out.println（“”）；
}
/**
*@请参阅HttpServlet#doPost（HttpServletRequest请求，HttpServletResponse响应）
*/
受保护的void doPost（HttpServletRequest请求、HttpServletResponse响应）引发ServletException、IOException{
//TODO自动生成的方法存根
}

}这一行：
var req = newXMLHttpRequest();

新建后需要一个空格，因此：
var req = new XMLHttpRequest();

（还请注意，在displayResult（）
函数中不断更新div.innerHTML
不会提供良好的性能。最好在字符串变量中建立所需的html，然后在末尾将div.innerHTML
设置为该变量。）
此行：
var req = newXMLHttpRequest();

新建后需要一个空格，因此：
var req = new XMLHttpRequest();

（还请注意，在displayResult（）
函数中不断更新div.innerHTML
不会提供良好的性能。最好在字符串变量中建立所需的html，然后在末尾将div.innerHTML
设置为该变量。）
此行：
var req = newXMLHttpRequest(); 

var doc = req.responseXML;

应该是：
var req = new XMLHttpRequest();

 var doc = req.responseText;

这一行：
var req = newXMLHttpRequest(); 

var doc = req.responseXML;

应该是：
var req = new XMLHttpRequest();

 var doc = req.responseText;

更新：
var doc = req.responseText;

/*This is for making XML doc, otherwise `getElementsByTagName` wont work*/
if (window.DOMParser)
{
   parser=new DOMParser();
   xmlDoc=parser.parseFromString(doc,"text/xml");
}
else // Internet Explorer
{
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async=false;
  xmlDoc.loadXML(doc);
} 

/*XML DOC is ready, now parse it with `getElementsByTagName1`*/ 
var Users = xmlDoc.getElementsByTagName('Username');
var Wins = xmlDoc.getElementsByTagName('Wins');
var Losses = xmlDoc.getElementsByTagName('Losses');

这一行：
var req = newXMLHttpRequest(); 

var doc = req.responseXML;

应该是：
var req = new XMLHttpRequest();

 var doc = req.responseText;

这一行：
var req = newXMLHttpRequest(); 

var doc = req.responseXML;

应该是：
var req = new XMLHttpRequest();

 var doc = req.responseText;

更新：
var doc = req.responseText;

/*This is for making XML doc, otherwise `getElementsByTagName` wont work*/
if (window.DOMParser)
{
   parser=new DOMParser();
   xmlDoc=parser.parseFromString(doc,"text/xml");
}
else // Internet Explorer
{
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async=false;
  xmlDoc.loadXML(doc);
} 

/*XML DOC is ready, now parse it with `getElementsByTagName1`*/ 
var Users = xmlDoc.getElementsByTagName('Username');
var Wins = xmlDoc.getElementsByTagName('Wins');
var Losses = xmlDoc.getElementsByTagName('Losses');

你应该调查一下。对你来说，这会简化大部分工作。你应该调查一下。这将为您简化大部分操作。谢谢！虽然现在我的代码似乎停留在var Users=doc.getElementsByTagName（'Username'）；。我已经检查过了，url上有一些行，比如Adam。知道发生了什么吗？看起来var doc=req.responseXML是空的，我尝试了document.write（doc）来看看会发生什么，它只写了null这个词。我知道document.write（）是用来获取字符串的，但是这可能并不意味着任何事情。来自servlet的响应是否具有MIME类型“text/xml”？（另外，不要尝试使用document.write（）
调试console.log（）
并打开浏览器控制台查看结果，例如使用Chrome内置的开发工具ctrl-shift-J。）谢谢！虽然现在我的代码似乎停留在var Users=doc.getElementsByTagName（'Username'）；。我已经检查过了，url上有一些行，比如Adam。知道发生了什么吗？看起来var doc=req.responseXML是空的，我尝试了document.write（doc）来看看会发生什么，它只写了null这个词。我知道document.write（）是用来获取字符串的，但是这可能并不意味着任何事情。来自servlet的响应是否具有MIME类型“text/xml”？（另外，不要尝试使用document.write（）
调试console.log（）
并打开浏览器的控制台查看结果，例如，ctrl-shift-J使用Chrome内置的开发工具。）servlet编写的文件是xml文件。是吗