原生js + ajax + Servlet传递参数

使用原生JS + Ajax + Servlet (实现从前端接收数据）

前端 Jsp 页面

index.jsp

<form action="" method="post">
    <div>
        <span>用 户 名 </span>
        <input type="text" id="username" nam
   e="username" value="请输入用户名">
    </div>
    <div id="info"></div>
    <script type="text/javascript">
        var input = document.getElementsByTagName('input')[0];
        var info = document.getElementById('info');
        var username = "";
        var str = "";
        input.onfocus = function() {
            if (this.value == "请输入用户名") {
                this.value = "";
                this.style.color = "#111111";
            }
        };
        input.onblur = function() {
            if (this.value == "") {
                this.value = "请输入用户名";
                this.style.color = "#999999";
            } else {
                this.style.color = "#424242";
            }

           //当文本框失去焦点时，保存文本框输入内容，

           //否则提交表单会清空文本框内容，Servlet接收不到数据

           username = input.value;
           str = "username=" + username;
        };
    </script>
    <input type="submit" name="Submit1" value="提交"
        onclick="doPost('servlet/NewServlet', str, info);">
</form>

JS Ajax

//封装兼容XMLHttpRequest

function XHRObj() {
    if (window.XMLHttpRequest) {
        // 除了IE6及以下
        return new XMLHttpRequest();
    } else {
        // 若为IE6及以下
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

// 封装callback函数

function loadReq(xmlObj, url, callback, str) {
    this.xmlObj = XHRObj();

 /**
   * 此处重点 你给的url是字符串！！！
   * 需要使用 encodeURI() 函数可把字符串作为 URI 进行编码才能解析。 
   * 否则返回值就是 null(这还是好的)！|| 其他奇怪的东西
   * URIstring 的副本，其中的某些字符将被十六进制的转义序列进行替换。
   * Servlet命名要规范，因为该方法不会对 ASCII 字母和数字进行编码，
   * 也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( )
   * 如果 URI 组件中含有分隔符，比如 ? 和 #，则使用 encodeURIComponent() 方法对各组件编码。
   */

    this.url =  encodeURI(url);
    xmlObj.onreadystatechange = callback;
    xmlObj.open("POST", url, true);
    // 若向html表单那样POST请求
    xmlObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded;");
    xmlObj.send(str);
 }

// 事件处理函数
function doPost(url, str, elem) {
    var reqObj = XHRObj();
    this.str = str;
    this.elem = elem;
    function ajaxCallback() {
        if (reqObj.readyState == 4) {
            if (reqObj.status == 200) {
                var content = reqObj.responseText;
                elem.innerHTML = content;
            }
        }
    }
    loadReq(reqObj, url, ajaxCallback, str);
}

Servlet

package com;

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 NewServlet extends HttpServlet {

/**
  * 
  */
private static final long serialVersionUID = 1L;


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


/**
  * Destruction of the servlet. <br>
  */
public void destroy() {
    super.destroy(); // Just puts "destroy" string in log
    // Put your code here
}



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


public void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        // 请求中文乱码处理
        request.setCharacterEncoding("UTF-8");

        // 响应中文乱码  字节流处理
        response.setHeader("Content-Type","text/html;application/json;charset=UTF-8");

        //响应中文乱码  字符流处理；设置response缓冲区编码
        response.setContentType("text/html;charset=UTF-8");
        response.setContentType("text/html");  
        response.setHeader("Cache-Control", "no-store");  
        response.setHeader("Pragma", "no-cache");  
        response.setDateHeader("Expires", 0);

        PrintWriter out = response.getWriter();

        //接收参数
        String username = request.getParameter("username");
        System.out.println("username = " + username);
        String info = "";
        System.out.println(info);

        out.println(username);
        out.println(info);

        out.close();
}

/**
  * Initialization of the servlet. <br>
  * 
  * @throws ServletException
  *             if an error occurs
  */
public void init() throws ServletException {
   // Put your code here
}

}

web.xml 配置

<servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>NewServlet</servlet-name>
    <servlet-class>com.NewServlet</servlet-class>
</servlet>
<!--Servlet 地址映射 -->
<servlet-mapping>
    <servlet-name>NewServlet</servlet-name>
    <url-pattern>/servlet/NewServlet</url-pattern>
</servlet-mapping>