使用原生js创建ajax请求

最新推荐文章于 2024-09-19 16:13:24 发布

聪聪不匆匆

最新推荐文章于 2024-09-19 16:13:24 发布

阅读量3.2k

点赞数 1

分类专栏： javascript 文章标签： ajax javascript

本文链接：https://blog.csdn.net/chencong3139/article/details/77477483

版权

javascript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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">
    function checkUserExists(obj) {
        if (obj.value.trim() == "") {
            document.getElementById("msg").innerHTML = "用户名不能够为空";
        } else {
            ajax(obj.value);
        }
    }
    var xmlHttpReq = null; //声明一个空对象用来装入XMLHttpRequest
    function ajax(username) {
        if (window.ActiveXObject) {//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的
            xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
        } else if (window.XMLHttpRequest) {//除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象
            xmlHttpReq = new XMLHttpRequest();//实例化一个XMLHttpRequest
        }
        debugger;
        if (xmlHttpReq != null) { //如果对象实例化成功 
            xmlHttpReq.open("post", "CheckUsernameServlet", true); //调用open()方法并采用异步方式
            xmlHttpReq.onreadystatechange = RequestCallBack; //设置回调函数
            //如果以post方式请求，必须要添加
            xmlHttpReq.setRequestHeader("Content-type",
                    "application/x-www-form-urlencoded");
            xmlHttpReq.send("username=" + username); //因为使用get方式提交，所以可以使用null参调用
        }
    }
    function RequestCallBack() {//一旦readyState值改变，将会调用这个函数
        if (xmlHttpReq.readyState == 4) {
            if (xmlHttpReq.status == 200) {
                //将xmlHttpReq.responseText的值赋给ID为 resText 的元素
                alert(xmlHttpReq.responseText);
                document.getElementById("msg").innerHTML = xmlHttpReq.responseText;
            }
        }
    }
</script>
</head>
<body>

    <input type="text" name="username" id="username"
        onblur="checkUserExists(this)">
    <span id="msg" style="color: red; font-size: 12px"></span>
</body>
</html>

请求的servlet

package cc.ccoder.controler.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class CheckUsernameServlet
 */
@WebServlet("/CheckUsernameServlet")
public class CheckUsernameServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public CheckUsernameServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;Charset=UTF-8");
        PrintWriter out = response.getWriter();
        String username = request.getParameter("username");
        String result = null;
        if("chencong".equals(username)) {
            result = "用户名已被使用";
        }else {
            result = "用户可以使用";
        }
        out.print(result);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}