servlet与javascript一起完成无刷新

最新推荐文章于 2024-05-31 10:26:40 发布

xingyunpi

最新推荐文章于 2024-05-31 10:26:40 发布

阅读量1.9k

点赞数

文章标签： servlet javascript xmlhttprequest myeclipse constructor string

本文链接：https://blog.csdn.net/xingyunpi/article/details/6511890

版权

今天，写了代码，主要就是测试servlet与javascript链接后完成无刷新的功能。

其中主要的代码都很清楚，用到的核心是XMLHttpRequest对象。首先，XMLHttpRequest对象使用过程用到五个步骤：在下面的代码中，我将标注出来。

这次程序过程中遇到的问题需要注意的有：

1.新建工程后要记得重新部署。

2.新建servlet的时候，别忘了还有web.xml。

3.不用form提交，直接用onclick事件就可以了。

4.传值的时候open（）中的url，可以传递参数的。例如：url="servlet/UserName?name="+username;

其中，其实思考的最多的是路径问题，这里，访问UserName这个servlet的时候，为什么前面放了servlet，这里的“servlet”是UserName的包。而本html页面是在myeclipse建立的工程的WebRoot下面。

下面，是我的代码：

ajax.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>ajax.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
    var xmlhttp;
   function submit(){
   //alert("nihao");
   //第一步，创建XMLHttpRequest对象
   if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
      if (xmlhttp.overrideMimeType){
      xmlhttp.overrideMimeType("text/xml");
   }
   else if (window.ActiveXobject)
   {
    var MSXML = ['MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0',
               'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
   for (var i=0;i<MSXML.length;i++){
   try{
      xmlhttp=new ActiveXObject(MSXML[i]);
      break;
   }
   catch(e){}
   }
   }
   }
   if (xmlhttp==null || xmlhttp ==undefined){
   alert("没有创建成功");
   }

//第二步，设置回调函数（注意，这个函数的名字后面没有括号！）

var username=document.getElementById("UserName").value;
alert(username);
xmlhttp.onreadystatechange=callback;
url="servlet/UserName?username="+username;
alert(url);

//第三步，打开连接
xmlhttp.open("GET",url,true);

//第四步，发送数据
   xmlhttp.send(null);
   //第五步，编写回调函数，接收服务器返回的数据
   function callback(){
    if (xmlhttp.readyState==4){
     alert(xmlhttp.readyState);
     if (xmlhttp.status==200){
      var message=xmlhttp.responseText;
      var div=document.getElementById("message");

      div.innerHTML=message;
     }
    }
   }
   }
   </script>

</head>

<body>

servlet:UserName.java代码：

package 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;

public class UserName extends HttpServlet {

/**
* Constructor of the object.
*/
public UserName() {
super();
}

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

  response.setContentType("text/html");
  PrintWriter out = response.getWriter();
  String name=new String(request.getParameter("username"));
  out.println(name);
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

this.doGet(request, response);
}

public String getServletInfo() {
return "This is my default servlet created by Eclipse";
}

public void init() throws ServletException {
// Put your code here
}

}
以上是ajax的开始，加油！

xingyunpi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
20
评论
servlet与javascript一起完成无刷新

今天，写了代码，主要就是测试servlet与javascript链接后完成无刷新的功能。其中主要的代码都很清楚，用到的核心是XMLHttpRequest对象。首先，XMLHttpRequest对象使用过程用到五个步骤：在下面的代码中，我将标注出来。这次程序过程中遇到的问题需要注意的有：1.新建工程后要记得重新部署。2.新建servlet的时候，别忘了还有web.xml。3.不用
复制链接

扫一扫