Ajax技术

最新推荐文章于 2024-04-07 14:55:57 发布

原创最新推荐文章于 2024-04-07 14:55:57 发布 · 239 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #javascript #前端 #servlet

javaWeb 专栏收录该内容

33 篇文章

订阅专栏

本文详细介绍了Ajax的原生实现和使用JQuery库进行Ajax操作的方法。通过示例展示了在注册页面中，如何利用Ajax实时检查用户名是否可用，包括创建XMLHttpRequest对象、设置回调函数、发送请求及处理响应。同时对比了原生Ajax与JQuery的$.ajax方法的使用方式。

Ajax是异步刷新技术，利用javascript操作浏览器的AJax引擎完成客户端向服务器发送请求，处理服务器发回的响应。

原生Ajax的实现

实例：注册页面用户名是否可用的ajax操作，用户名的输入框失去焦点后，向服务器发送一个ajax请求，包含要注册用户名，服务器判断用户名是否可以注册，向客户端发送响应，ajax引擎接收响应，在输入框的后面显示出可注册或不可注册。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.js"></script>
    <script>
        $(function (){
            //原生Ajax书写步骤：
            //1.捕获浏览器事件
            $("#username").blur(function(){
                //2.初始化XMLHttpRequest对象
                createXMLHttpRequest();
                //4.关联回调函数，当xmlHttp.readyState状态发生改变时，就会自动调用回调函数
                xmlHttp.onreadystatechange=usernameCallBank;//注意，不写括号
                //5.发送Ajax请求,请求方式一定要大写     将请求发给servlet
                xmlHttp.open("POST","${pageContext.request.contextPath}/register.do");
                //发送请求,null代表请求体中没有数据
                //xmlHttp.send(null);
                var param="username="+$("#username").val();
                //设置内容类型，通用
                xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xmlHttp.send(param);
            });
        });
        //3.定义一个回调函数
        function usernameCallBank(){
            //6.接收响应，改变html内容
            //判断状态是否相应完成

            if(xmlHttp.readyState==4&&xmlHttp.status==200){//状态响应完成，并且响应状态码为200，相应成功
                //alert(xmlHttp.responseText);
                if(xmlHttp.responseText=="0"){
                    $("#sp").css("color","red");
                    $("#sp").text("用户名已被占用");
                }else if(xmlHttp.responseText=="1"){
                    $("#sp").css("color","green");
                    $("#sp").text(" √");
                }
            }
        }

        var xmlHttp;
        //创建一个XMLHttpRequest对象
        function createXMLHttpRequest(){
            xmlHttp= false;
            //开始初始化XMLHttpRequest对象
            if(window.XMLHttpRequest) { //除IE外 所有浏览器
                xmlHttp= new XMLHttpRequest();
            }else if(window.ActiveXObject){ // IE浏览器
                try{
                    xmlHttp= new ActiveXObject("Msxml2.XMLHTTP");//通用http协议创建
                }catch(e){
                    try{
                        xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");//MS方式创建
                    }catch(e){

                    }
                }
            }
            if (! xmlHttp) { // 异常，创建对象实例失败
                window.alert("不能创建XMLHttpRequest对象实例.");
                return false;
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username"><span id="sp"></span><br>
    密 码：<input type="password"><br>
    重复密码：<input type="password"><br>
    <input type="button" value="注册"><br>
</body>
</html>

RegisterController


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;
import java.io.PrintWriter;
//处理请求，相应
@WebServlet("/register.do")
public class RegisterController extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        PrintWriter pw = resp.getWriter();
        //如果是admin，则不能注册
        if ("admin".equals(username)) {
            //不能注册
            pw.print("0");//直接发送数据，不发送html
        } else {
            //可以注册
            pw.print("1");
        }
    }
}

用JQuery实现Ajax技术

jQuery.ajax方法，调用这个方法时可以直接写成: $.ajax(); $.ajax方法的参数是一个Object对象

书写格式：

$.ajax({

        url: "",

        type:"",

        data:"",

        dataType:"",

        success:function(result){

        }

});

其中：

url : ajax请求发给哪个Web程序处理（请求地址）；

type: 请求方式，可以忽略大小写（post）

data：发给服务器的请求参数数据，格式可以是请求参数串的格式，也可以是对象的格式，但最终在请求体中都会变为请求参数串的格式（application/x-www-form-urlencoded）

dataType : 服务器响应回数据的类型，可以是 text/json/xml等；如果是text那么响应回的数据直接就是字符串类型了

success : 回调函数，当响应完成且成功时，自动执行success的funcation

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.js"></script>
    <script>
        $(function(){
            $("#username").blur(function(){
                $.ajax({
                    url:"${pageContext.request.contextPath}/register.do",
                    type:"post",
                    data:{username:$("#username").val()},
                    dataType:"text",
                    success:function(result){
                        if(result=="0"){
                            $("#sp").css("color","red");
                            $("#sp").text("用户名已被占用");
                        }else if(result=="1"){
                            $("#sp").css("color","green");
                            $("#sp").text("√");
                        }
                    }
                });
            });
        });
    </script>
</head>
<body>
    用户名：<input type="text" id="username"><span id="sp"></span><br>
    密  码：<input type="password"><br>
    重复密码：<input type="password"><br>
    <input type="button" value="注册"><br>
</body>
</html>

测试效果：

用户名未被占用