ajax小实例

来源：互联网发布：原油api数据编辑：程序博客网时间：2024/06/14 14:18

AJAX 在javascript中经典三步：

1）createXMLHttpRequest()函数，根据不同的浏览器，创建XMLHttpRequest对象。

2）向服务器发送url,并等待服务器返回响应。

3）判断服务器是否返回响应，正确响应则对取得的结果处理。完成客户端的界面显示。

index.jsp: //tomcat默认的登录页面名称

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

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

  //设一个变量

  var XMLHttpReq=false;
   //创建一个XMLHttpRequest对象
   function createXMLHttpRequest(){
     if(window.XMLHttpRequest){                                  //Mozilla
      XMLHttpReq=new XMLHttpRequest();
      }
      else if(window.ActiveXObject){
       try{
        XMLHttpReq=new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
         try{
          XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
          }catch(e){}
          }
         }
        }
                 //发送请求函数
   function send(url){
    createXMLHttpRequest();
    XMLHttpReq.open("GET",url,true);
    XMLHttpReq.onreadystatechange=proce;   //指定响应的函数
    XMLHttpReq.send(null); //发送请求
    }
   function proce(){
    if(XMLHttpReq.readyState==4){                 //对象状态
     if(XMLHttpReq.status==200){                     //信息已成功返回，开始处理信息
     var res=XMLHttpReq.responseXML.getElementsByTagName("content")[0].firstChild.data;
     window.alert(res);
     }else{
      window.alert("所请求的页面有异常");
      }
      }
      }
   //身份验证
   function check(){
    var name=document.getElementById("name").value;

     if(name==""){
      alert("请输入姓名");
      return false;
      }
      else{
       send('login?name='+name);
       }
      }

   </script>

</head>

<body>
   <table>
     <form action="login" method="post">
       <tr><td>姓名: <input id="name" type="text" name="name"/><p>
          <input type="button" value="检测!" onClick="check()"/>
       </td>
     </tr>
     </form>
     </table>
</body>
</html>

ajax.java:

package aa;
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 ajax extends HttpServlet {

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

  //设置接收的信息的字符集
  request.setCharacterEncoding("UTF-8");

  String name=request.getParameter("name");

  //设置输出的信息的格式及字符集
  response.setContentType("text/xml; charset=UTF-8");
  response.setHeader("Cache-Control","no-cache");

  //创建输出流
  PrintWriter out=response.getWriter();

  out.println("<ront>");

  if(name.equals("sunxf")){
   out.println("<content>"+"对不起，此网名已注册!"+"</content>");

  }else{
   out.println("<script>alert('hehe')</script>");
   out.println("<content>"+"此网名可以注册!"+"</content>");
  }
  out.println("</ront>");
  out.close();

}

}

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>login</servlet-name>
  <servlet-class>aa.ajax</servlet-class>
</servlet>

<servlet-mapping>
  <servlet-name>login</servlet-name>
  <url-pattern>/login</url-pattern>
</servlet-mapping>
</web-app>