jQuery实现Ajax_jq写一个ajax-CSDN博客

本文链接：https://blog.csdn.net/y_Engineer/article/details/101080755

Ajax

一、简介

Ajax 即 “Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
Ajax 可通过后台与服务器进行少量的数据交换，使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。这极大的增强 B/S 的体验性。

二、jQucry实现Ajax

2.1、实现方式

$.ajax(options)：把远程数据加载到 XMLHttpRequest 对象中
$.get(url,data,callback,type)：使用 HTTP GET 来加载远程数据
$.post(url,data,callback,type)：使用 HTTP POST 来加载远程数据

2.2、常用参数

url：请求路径
type：请求方式，ajax()默认方式为get
data：请求参数
success：$.ajax() 响应成功后的回调函数
callback：$.get() 和 $.post() 响应成功后的回调函数

2.3、示例

账号密码Ajax异步请求校验：在输入框输入用户名或密码，当输入框失去焦点时，浏览器向服务器发送异步请求，让服务器校验账号或密码，然后给浏览器响应结果，浏览器再将结果展示到页面。
login.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>loginCheck</title>
    <script src="${pageContext.request.contextPath}/statics/js/jQuery.js"></script>
    <script>
        function f1() {
            //ajax() type默认请求方式为：get
            $.ajax({
                url:"${pageContext.request.contextPath}/check",
                data:{username:$("#username").val()},
                success:function (data) {
                    if(data==='ok'){
                        $('#userInfo').css("color","green");
                    }else {
                        $('#userInfo').css("color","red");
                    }
                    $('#userInfo').html(data);
                }
            });
        }
        function f2() {
            $.ajax({
                url:"${pageContext.request.contextPath}/check",
                data:{password:$("#password").val()},
                success:function (data) {
                    if(data==='ok'){
                        $('#pwdInfo').css("color","green");
                    }else {
                        $('#pwdInfo').css("color","red");
                    }
                    $('#pwdInfo').html(data);
                }
            });
        }
    </script>
</head>
<body>
<h2>
    用户名：<input type="text" id="username" onblur="f1()"/>
    <span id="userInfo"></span>
</h2>
<h2>
    密码：<input type="password" id="password" onblur="f2()"/>
    <span id="pwdInfo"></span>
</h2>
</body>
</html>

AjaxServlet.java

public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setCharacterEncoding("utf-8");
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        String msg = "";
        if (username != null) {
            if (username.equals("admin")) {
                msg = "ok";
            } else {
                msg = "用户名不存在！";
            }
        }

        if (password != null) {
            if (password.equals("123456")) {
                msg = "ok";
            } else {
                msg = "密码错误！";
            }
        }
        resp.getWriter().write(msg);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

web.xml

<servlet>
    <servlet-name>AjaxServlet</servlet-name>
    <servlet-class>com.study.ajax.AjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>AjaxServlet</servlet-name>
    <url-pattern>/check</url-pattern>
</servlet-mapping>