Ajax----创建XMLHttpRequest对象和发送请求封装为两个js函数放在ajax.js中

r囧r小猫 2024-03-22 16:50 9阅读 0赞

ajax.js

form.html

servlet

改造一下：

servlet

效果：

--------------------

## Ajax----创建XMLHttpRequest对象和发送请求封装为两个js函数放在ajax.js中 ##

### ajax.js ###

//声明XMLHttpRequest对象
    var httpRequest=null;
    //创建XMLHttpRequest对象实例的方法
    function createXHR(){
        if(window.XMLHttpRequest){
            httpRequest=new XMLHttpRequest();
        }else if(window.ActiveXObject){
            try{
                httpRequest=new ActiveXObject("Maxml2.XMLHTTP");//IE较新版
            }catch (e){
                try{
                    httpRequest=new ActiveXObject("Microsoft.XMLHTTP");//IE较老版
                }catch (e) {
                    httpRequest=null;
                }
            }
        }
        if (!httpRequest){
            alert("fail to create httpRequest!");
        }
    }
    function sendRequest(url,params,method,handler){
        createXHR();
        if (!httpRequest){
            return false;
        }
        httpRequest.onreadystatechange=handler;
        if(method=="GET"){
            httpRequest.open(method,url+'?'+params,true);
            httpRequest.send(null);
        }
        if (method=="POST"){
            httpRequest.open(method,url,true);
            httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            httpRequest.send(params);
        }
    }

--------------------

### form.html ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单验证</title>
        <script type="text/javascript" src="js\ajax.js"></script>
        <script type="text/javascript">
            function form_check() {
                let url = "fc_servlet";
                let userid = document.getElementById("userid").value;
                let userPassword = document.getElementById("userPassword").value;
                let params = "userid=" + userid + "&userPassword=" + userPassword;
                sendRequest(url, params, "POST", show_result);
            }
    
            function show_result() {
                if (httpRequest.readyState == 4 ) {
                    if (httpRequest.status == 200){
                        let info=httpRequest.responseText;
                        document.getElementById("result").innerHTML=info;
                    }
                }
            }
        </script>
    </head>
    <body>
    
                    用户名  ：<input type="text" name="userid" id="userid" onblur="form_check()">
                    用户密码：<input type="password" name="userPassword" id="userPassword">
    
                    <input type="button" value="登陆" onclick="form_check()">
    
                    <div id="result"></div>
    </body>
    </html>

### servlet ###

package com.li;
    
    import javax.servlet.*;
    import javax.servlet.http.*;
    import javax.servlet.annotation.*;
    import java.io.IOException;
    import java.io.PrintWriter;
    
    @WebServlet( "/fc_servlet")
    public class FormCheck01 extends HttpServlet {
        @Override
        public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            response.setContentType("text/html;charset=UTF-8");
            PrintWriter out = response.getWriter();
            request.setCharacterEncoding("UTF-8");
            String userid = request.getParameter("userid");
            if (!"张三".equals(userid)) {
                out.println("用户名不存在");
            } else {
                String userPassword = request.getParameter("userPassword");
                if (!"".equals(userPassword)) {
                    if ("123".equals(userPassword)) {
                        out.println("欢迎你！");
                    } else {
                        out.println("密码错误！");
                    }
                }
            }
        }
    
        public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            this.doPost(request, response);
        }
    }

--------------------

## 改造一下： ##

### servlet ###

>     if (!"张三".equals(userid)&&!"zhangsan".equals(userid)) {
>         out.println("用户名不存在");
>     }
> 
> 这里我用了&&才行，用||则条件为永真式 ：true---------用户名不存在【无论输入啥都是这个结果】

package com.li;
    
    import javax.servlet.*;
    import javax.servlet.http.*;
    import javax.servlet.annotation.*;
    import java.io.IOException;
    import java.io.PrintWriter;
    
    @WebServlet( "/fc_servlet")
    public class FormCheck01 extends HttpServlet {
        @Override
        public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            response.setContentType("text/html;charset=UTF-8");
            PrintWriter out = response.getWriter();
            request.setCharacterEncoding("UTF-8");
            String userid = request.getParameter("userid");
            if (!"张三".equals(userid)&&!"zhangsan".equals(userid)) {
                out.println("用户名不存在");
            } else {
                String userPassword = request.getParameter("userPassword");
                if (!"".equals(userPassword)) {
                    if ("123".equals(userPassword)) {
                        out.println("欢迎你！");
                    } else {
                        out.println("密码错误！");
                    }
                }
            }
        }
    
        public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            this.doPost(request, response);
        }
    }

#### 效果： ####

![66c6bf04a2144b71878db24f0388ba9f.png][]

[66c6bf04a2144b71878db24f0388ba9f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/5ffd4c4df2804df99b716d0e95c9c008.png