• (转)用AJAX的Get和Post调用Servlet的简单示例。


    ***************************************AJAX网页代码****************

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script language="javascript">
    var xmlHttp;
    function createXMLHttpRequest()
    {
     if(window.ActiveXObject)
     {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
     else if(window.XMLHttpRequest)
     {
      xmlHttp=new XMLHttpRequest();
     }
    }
    function createQueryString()
    {
     var firstName=document.getElementById("firstname").value;
     var middleName=document.getElementById("middleName").value;
     var birthday=document.getElementById("birthday").value;
     var queryString="firstName=" + firstName + "&middleName=" + middleName + "&birthday=" + birthday;
     return queryString;
    }
    function doRequestUsingGET()
    {
     createXMLHttpRequest();
     var queryString="../GetAndPost?";
     queryString=queryString+createQueryString() + "&timeStamp=" + new Date().getTime();
     xmlHttp.onreadystatechange=handleStateChange;
     xmlHttp.open("GET",queryString,true);
     xmlHttp.send(null);
    }
    function doRequestUsingPost()
    {
     createXMLHttpRequest();
     var url="../GetAndPost?timeStamp=" + new Date().getTime();
     var queryString=createQueryString();
     xmlHttp.open("POST",url,true);
     xmlHttp.onreadystatechange=handleStateChange;
     xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
     xmlHttp.send(queryString);
    }
    function handleStateChange()
    {
     if(xmlHttp.readyState==4)
     {
      if(xmlHttp.status==200)
      {
       parseResults();
      }
     }
    }
    function parseResults()
    {
     var responseDiv=document.getElementById("serverResponse");
     if(responseDiv.hasChildNodes())
     {
      responseDiv.removeChild(responseDiv.childNodes[0]);
     }
     var responseText=document.createTextNode(xmlHttp.responseText);
     responseDiv.appendChild(responseText);
    }
    </script>
    </head>

    <body>
    <form id="form1" name="form1" method="post" action="#">
      <p><br />
        <br />
        <input name="firstName" type="text" id="firstName" />
    </p>
      <p>
        <label>
        <input type="text" name="middleName" id="middleName"  />
        </label>
    </p>
      <p>
        <input name="birthday" type="text" id="birthday" />
      </p>
      <p>&nbsp;</p>
      <p>
        <input type="button" name="Submit" value="GET"  onclick="doRequestUsingGET();"/>
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <input type="button" name="Submit2" value="POST"  onclick="doRequestUsingPost();"/>
      </p>

      <div id="serverResponse"></div>
    </form>

    </body>
    </html>

    ***********************************Servlet代码*****************

    package temp;

    import java.io.*;
    import java.net.*;
    import javax.servlet.*;
    import javax.servlet.http.*;

    public class GetAndPostExample extends HttpServlet{
      protected void processRequest(HttpServletRequest request,HttpServletResponse response,String method) throws ServletException,IOException
      {
        response.setContentType("text/xml");

        String firstName=request.getParameter("firstName");
        String middleName=request.getParameter("middleName");
        String birthday=request.getParameter("birthday");

        String responseText="hello:" + firstName + "-" + middleName + "。your birthday is " + birthday + "。" + "[method:" + method + "]";

        PrintWriter out=response.getWriter();
        out.println(responseText);

        out.close();
      }

      protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException
      {
        processRequest(request,response,"GET");
      }

      protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException
      {
        processRequest(request,response,"POST");
      }

    }
    **************************

    加上设置字符编码的方法:
    response.setHeader("charset","gb2312");

    ********************************************
    看到的说明原文如下:

    用AJAX来GET回一个页面时,RESPONSETEXT里面的中文多半会出现乱码,这是因为xmlhttp在处理返回的 responseText的时候,是把resposeBody按UTF-8编码进解码考形成的,如果服务器送出的确实是UTF-8的数据流的时候汉字会正确显示,而送出了GBK编码流的时候就乱了。解决的办法就是在送出的流里面加一个HEADER,指明送出的是什么编码流,这样XMLHTTP就不会乱搞了。

    PHP:header('Content-Type:text/html;charset=GB2312');
    ASP:Response.Charset("GB2312")
    JSP:response.setHeader("Charset","GB2312");

    *********************

  • 相关阅读:
    <!--[if IE 9]>....<!end if-->
    背景颜色设置
    UIImageView 响应UIButton的点击事件
    响应键盘return事件
    iOS 封装数据请求,解析数据(异步)
    UIImageView 圆角
    JS 控制文本框必须输入值才能查询
    MVC4 @Html.Raw()
    JS加成显示
    随机生成人物名称
  • 原文地址:https://www.cnblogs.com/jiangchongwei/p/1401982.html
Copyright © 2020-2023  润新知