ajax入门级实例

Posted 2020-08-22

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax入门级实例相关的知识，希望对你有一定的参考价值。

AJAX = Asynchronous javascript And XML（异步 JavaScript 及 XML）。

Ajax 由 html、JavaScript? 技术、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。

今天记下ajax入门级例子，希望和我一样刚入门的可以看懂。

在AJAX实际运行当中，对于访问XMLHttpRequest（XHR）时并不是一次完成的，而是分别经历了多种状态后取得的结果，对于这种状态在AJAX中共有5种，分别是。
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法，正在发送请求
2 - (载入完成)send()方法执行完成，
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成，可以在客户端调用了
对于上面的状态，其中“0”状态是在定义后自动具有的状态值，而对于成功访问的状态（得到信息）我们大多数采用“4”进行判断。

index.jsp代码如下

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
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>
    <base href="<%=basePath%>">   
    <title>My JSP ‘index.jsp‘ starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    
    <script>
        function test(){
            //创建XMLHttpRequest对象
            var req;
            //IE7以下是第二种方式，7以上和其他浏览器，如火狐是第一种方式创建XMLHttpRequest
            if(window.XMLHttpRequest){
                req = new XMLHttpRequest();
            }else{
                req = new ActiveXObject("Msxml2.XMLHTTP");
            }
             //处理响应
             req.onreadystatechange = function(){
                 if(4==req.readyState){
                     var result = req.responseText;
                     document.getElementById("div1").innerHTML = result;                     
                 }
             }            
            //发送请求
           req.open("get", "servlet/TestAjaxServlet", true);
           req.send(null);
           alert("heihei");//因为是异步，所以heihei先出现，三秒钟之后出现ajax text
        }
    
    </script>
  </head>
  
  <body>
    <div id=div1></div>
    <input type = "button" value="测试ajax" onclick="test()"/>
  </body>
</html>

然后创建一个servlet，TestAjaxServlet.jsp

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 TestAjaxServlet extends HttpServlet {
    /**
     * The doGet method of the servlet. <br>
     *
     * This method is called when a form has its tag value method equals to get.
     * 
     * @param request the request send by the client to the server
     * @param response the response send by the server to the client
     * @throws ServletException if an error occurred
     * @throws IOException if an error occurred
     */
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        System.out.println("hello ajax");
        try {
            Thread.sleep(3000);//三秒钟之后出现ajax text字样
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        response.getWriter().println("<h1>ajax test </h1>");
    }

    /**
     * The doPost method of the servlet. <br>
     *
     * This method is called when a form has its tag value method equals to post.
     * 
     * @param request the request send by the client to the server
     * @param response the response send by the server to the client
     * @throws ServletException if an error occurred
     * @throws IOException if an error occurred
     */
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request,response);
    }

}