Ajax

最新推荐文章于 2024-02-17 13:45:00 发布

donggandi

最新推荐文章于 2024-02-17 13:45:00 发布

阅读量366

点赞数

CC 4.0 BY-SA版权

文章标签： xmlhttprequest function servlet output ajax javascript

本文链接：https://blog.youkuaiyun.com/donggandi/article/details/7888035

ajax示例：

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<html>
<head>
    <title>Say Hello--Ajax请求响应方式</title>
     <script language="javascript">
       //创建XMLHttpReques对象
       function createXMLHttpRequest() {
          if (window.XMLHttpRequest) {
               //Mozilla 浏览器
               XMLHttpReq = new XMLHttpRequest();
            } else{
                // IE浏览器
                if (window.ActiveXObject) {
                  try {
                         XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
                      }catch (e) {
                         try {
                                XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
                             }catch (e) {}
                      }
                 }
            }
        }
       //处理服务器响应结果
       function handleResponse() {
        // 判断对象状态
        if (XMLHttpReq.readyState == 4) {
            // 信息已经成功返回，开始处理信息
           if (XMLHttpReq.status == 200) {
                var out = "";
                var res = XMLHttpReq.responseXML;
                var response= res.getElementsByTagName("response")[0].firstChild.nodeValue;
                document.getElementById("hello").innerHTML = response;
               }
         }
       }
      //发送客户端的请求
      function sendRequest(url) {
            createXMLHttpRequest();
            XMLHttpReq.open("GET", url, true);
            //指定响应函数
            XMLHttpReq.onreadystatechange = handleResponse;
            // 发送请求
            XMLHttpReq.send(null);
       }
       
       //开始调用Ajax的功能       
      function sayHello()
      {
         var name = document.getElementById("name").value;
         //发送请求
         //alert("hello");
         sendRequest("SayHello?name="+name);
      }
     </script>
</head>
<body>
<font size="1">
姓名：<input type="text" id="name" value="hello world"/>
<input type="button" value="提交" onclick="sayHello();"/>
</font>
<div id="hello"></div>
</body>
</html>

SayHello.java(servlet)

package servlets;
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 SayHello extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
   //设置生成文件的类型和编码格式
   response.setContentType("text/xml; charset=UTF-8");
   response.setHeader("Cache-Control", "no-cache");
   PrintWriter out = response.getWriter();
   String output = "";
   //处理接收到的参数，生成响应的XML文档
   if(request.getParameter("name")!=null&&request.getParameter("name").length()>0)
    output ="<response>Hello! "+request.getParameter("name")+"</response>";
   out.println(output);
   out.close();
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
   doPost(request, response);
}
}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" 
	xmlns="http://java.sun.com/xml/ns/j2ee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
	http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
    <servlet>
        <servlet-name>hello</servlet-name>
        <servlet-class>servlets.SayHello</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>hello</servlet-name>
        <url-pattern>/SayHello</url-pattern>
    </servlet-mapping>
  
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>