我一定要发个博客,在这个毫无技术性的错误上纠结了好久好久,浪费了大量青春! 写给跟我一样的新手!希望你们不要像我一样走这么多的弯路!!!
新建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,而是和我的一样:
不懂的可以评论我