eclipse web开发 AJAX实例以及URL和Tomcat细节

我一定要发个博客，在这个毫无技术性的错误上纠结了好久好久，浪费了大量青春！ 写给跟我一样的新手！希望你们不要像我一样走这么多的弯路！！！

新建web项目我不说了，百度起来很简单，下面先说AJAX实例：

项目的目录：

这里helo要 直接 放在WebContent下，

 

服务器的servlet.java：不知道怎么新建servlet的小白请百度，非常简单，跟新建java类差不多，只不过选择servlet。

package sj;

import java.io.IOException;
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 servlet
 */
@WebServlet("/servlet")
public class servlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public servlet() {
        super();
        // TODO Auto-generated constructor stub
        System.out.println("启动");
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
        this.doPost(request, response);  
    } 

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
        response.setCharacterEncoding("utf-8");  
        System.out.println("ajax后台交互成功");  
        PrintWriter write=response.getWriter();  
        write.println("我是输出的文字<br>");  
        write.println("姓名:花2不谢<br/>年龄:20");  
        write.flush();  
    }  

}

 

其中的HTML文件：

 

<!DOCTYPE html >  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<script type="text/javascript" src="JS/util.js"></script>  
<title>ajax学习</title>  
<script>  
window.onload=function(){  

	
    document.getElementById("btn1").onclick=function(){  
        //发出已补请求  
        //1/得到xhr对象  
        var xhr=getXHR();  
        //2.注册状态变化监听器  
        xhr.onreadystatechange=function(){  
            if(xhr.readyState==4)  
                {  alert(xhr.status); 
                if(xhr.status==200)  
                    {  
                    alert("服务器响应了");  
                    document.getElementById("mytext").innerHTML=xhr.responseText;  
                    }         
                }
            
        }  
        //3.建立与服务器的连接  
        xhr.open("GET","servlet"+"?time="+new Date().getTime());  
        //4.向服务器发出请求  
        xhr.send();  
    }  
}  
</script>  
</head>  
<body>  
<button id="btn1">点我呀</button>  
<div id="mytext"></div>  
</body>  
</html>  

这里要给你们说的是：

xhr.open("GET","servlet"+"?time="+new Date().getTime()); 

这个中间的URL：servlet，我当初实在是不知道路径怎么写，很白痴是吧。以为是写本地目录的路径，就是/java Resources/src/.....等，但是人家是Tomcat上的相对路径，怎么看呢？ 我们没有用web.xml配置，因为我觉得太麻烦了，用了很方便的@注释来配置：

@WebServlet("/servlet")

不懂得也可以去百度。 这里的注释是我们新建servlet的时候它自己默认的。在open()里面，要写“servlet”而不是“/servlet”，后者会报错404； 这就是我的问题，浪费了好久的白痴问题。

这里只是入门的，让你快速做好一个小demo，具体的原理篇幅很多，就不赘述。

然后是util.js：（很简单，其实可以直接嵌在HTML中）

/**
 * 
 */
function getXHR(){  
    var xmlHttp;  
    try {  
        xmlHttp=new XMLHttpRequest();  
    }catch(e)  
    {  
        try{  
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");  
    }  
        catch(e)  
        {  
            try{  
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  
            }  
            catch(e)  
            {  
                alert("你的浏览器不支持ajax");  
                return false;  
            }   
        }   
    }  
    return xmlHttp;  
}  

 

至此，这个项目如果你的环境没有错误的话就是可以运行，运行的结果是：

 

然后两个alert，之后就是：

 

还有关于Tomcat的问题，你的电脑上肯定下载了Tomcat然后再在eclipse里面配置，电脑上启动之后在浏览器http://localhost:8080/ 看到小豹子就是成功了，但是你可能在eclipse里面配置好之后，发现这个地址是404，这是需要配置的。

你的和我的不一样，在1,2的位置。 需要改成和我的一样才行，但是你的是灰色的，要先右键3的位置，remove掉lieshu下面的东西，然后再右键liushu,clean。 就可以修改了，改完之后就不会404，而是和我的一样：

不懂的可以评论我