Ajax与服务器交互步骤

最新推荐文章于 2024-01-23 08:00:00 发布

传奇_Legend

最新推荐文章于 2024-01-23 08:00:00 发布

阅读量748

点赞数

文章标签： java ajax

Ajax与服务器交互步骤

第一步：创建XMLHttpRequest对象

第二步：注册回调函数

第三步：设置连接信息

第四步：向服务器发送数据

第五步：接收服务器返回数据

实例演示

前台页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Ajax测试</title>
    <script type="text/javascript">
    <!--
      var xmlHttp;
      function createXmlHttp(){
        if(window.XMLHttpRequest) {
          //针对 Firefox, Chrome, Opera, Safari,IE7,IE8
          xmlHttp = new XMLHttpRequest();
        } else if(window.ActiveXObject) {
          //针对IE6,IE5
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
      }
      function verify() {
        var username = document.getElementById("username").value;
        
        //第一步：创建XMLHttpRequest对象
        createXmlHttp();
        
        //第二步：注册回调函数
        xmlHttp.onreadystatechange = callBack;
        
        //第三步：设置连接信息
        xmlHttp.open("GET","servlet/AjaxServlet?username="+username,true);
  
        //第四步：向服务器发送数据
        xmlHttp.send(null);
      }
      
      function callBack() {
        //第五步：接收服务器返回数据
        //判断对象的是否交互完成
        if(xmlHttp.readyState == 4) {
          //判断Http的交互是否成功
          if(xmlHttp.status == 200) {
            //获取服务器返回数据
            //获取服务器输出的纯文本格式
            var responseText = xmlHttp.responseText;
            //将数据显示在页面
            var usernameMsg = document.getElementById("usernameMsg");
            usernameMsg.innerHTML = responseText;
          }
        }
      }
    -->
    </script>
    </head>
    <body>
    	<form method="post" action="servlet/AjaxServlet">
    		用户名：<input type="text" name="username" id="username" /><span id="usernameMsg"></span><br/>
      <input type="button" value="测试" onclick="verify();"  />
    </form>
    </body>
</html>

代码解析

xmlHttp.open()方法参数：

                参数一：表示Http的请求方式，get或post方式,按照HTTP规范，该参数要大写；否则，某些浏览器（如Firefox）可能无法处理请求。
                参数二：请求URL的地址，get方式的参数在url中（本例采用get方式，以后会讲解post方式）
                参数三：采用同步还是异步交互方式，true为异步方式

GET 还是 POST方式？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

xmlHttp.readyState的状态参数：

                    0: 请求未初始化
                    1: 服务器连接已建立
                    2: 请求已接收
                    3: 请求处理中
                  4: 请求已完成，且响应已就绪

服务器端代码：

package com.zyh.first;

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

  private static final long serialVersionUID = -4985183154715703715L;

  public AjaxServlet() {
    super();
  }

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

  public void doPost(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    
    //1.取参数
    //2.检查参数是否有问题
    //3.校验操作
    //4.ajax返回相应数据

    response.setContentType("text/html;charset=utf-8");
    PrintWriter out = response.getWriter();
    
    String old = request.getParameter("username").trim();
    if(null==old || "".equals(old)) {
      out.println("<strong>用户名不能为空！</strong>");
    } else {
      if("zyh".equals(old)) {
        out.println("<strong>用户名[" + old + "],已存在！</strong>");
      } else {
        out.println("<strong>用户名[" + old + "],不存在！</strong>");
      }
    }
    
    out.flush();
    out.close();
  }

}