您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

01-AJAX-概述

发布时间：2024-12-10 11:27:38编辑：雪饮阅读（）

AJAX(Asynchronous JavaScript And XML):异步的JavaScript和XML
一个简单的ajax案例，我们同样在我们的zeroEightUserLoginCaseModule模块中建立新的servlet如
package com.web;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        try{
            //等待3秒（模拟请求较慢）
            Thread.sleep(3000);
        }
        catch (InterruptedException e){
            e.printStackTrace();
        }
       resp.getWriter().write("<h1>hello Ajax~~</h1>");
    }
}
然后register.jsp中增加一个异步请求按钮
<input value="注 册-异步" type="button" id="reg_btn2" onclick="ajaxSend()">
对应的异步请求方法如
function ajaxSend(){
    var xmlhttp;
    if(window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest();
    }
    else{
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
    }
    xmlhttp.open("GET","${pageContext.request.contextPath}/AjaxServlet");
    xmlhttp.send();
    xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState==4 && xmlhttp.status==200){
            console.log("xmlhttp",xmlhttp);
            document.getElementById("reg-form").innerHTML=xmlhttp.responseText;
        }
    }
}