Ajax-CSDN博客

本文链接：https://blog.csdn.net/weixin_41133386/article/details/92850664

Ajax

Asynchronous JavaScript And XML : 异步JavaScript 和XML，不是一门编程语言，指的是一种前后端的交互方式。是指客户端与服务器交换数据并更新在局部页面的技术，不需要重新加载整个页面。
核心就是异步加载（局部刷新）

关于同步异步

：假如说需要做三件事情，
同步：第一件执行完毕之后才能执行第二件，
异步：三件事可以同时做

传统web数据交互和Ajax数据交互的区别

客户端请求方式不同：
传统：浏览器发送同步请求
Ajax：异步引擎对象发送异步请求

服务端响应方式不同
传统：响应完整的页面（jsp）
Ajax ：只响应需要的数据

客户端处理方式不同
传统：需要等待服务端响应完成并重新加载整个页面，用户才可以进行后续的操作
Ajax：动态更新页面中的局部内容，并不会影响到用户在当前的其他操作

Ajax原理：Ajax的工作原理相当于在客户端和服务器之间加了一中间层，使用户操作与服务端响应异步化。并不是所有的请求都提交给服务器，类似一些数据验证和数据处理等都交给Ajax引擎自己完成，只有确认需要从服务器端读取新数据时再由Ajax引擎代为向服务器请求提交请求

Ajax 技术的核心 ： XMLHttpRequest
常用方法：
1.open() 创建一个新的HTTP请求。
2.send()将请求发送到服务端。
常用事件：
onreadystatechange : 指定回调函数。
常用属性：
readyState ： XMLHttpRequest的状态信息。
状态码表示的意义：
0 ： XMLHttpRequest 对象未完成初始化。
1 ： XMLHttpRequest 对象开始发送请求。
2 ： XMLHttpRequest 对象的请求发送完成。
3 ： XMLHttpRequest 对象开始读取响应。
4 ： XMLHttpRequest 对象读取响应结束。

入门案例

需求：
1.点击提交按钮，向服务器端发送请求，等待响应。
2.同时在input框中输入信息。
3.服务端返回“helllo”字符串，在页面进行展示。

1.建立页面
在这里插入图片描述
2.配置好servlet

3.在web.xml建立映射

4.验证javascript 没有问题

5.详细设置（Jquery封装的）

将servlet设置为等待三秒，为了实现异步输入

Ajax 实现原理

在这里插入图片描述
浏览器将数据通过js发送给引擎，然后引擎发送给服务器

传输过程：当焦点离开input，立刻取到输入进去的lisi，发送到服务器上，映射到对应的servlet上的doPost， result变成false ，然后通过在这里插入图片描述返回到Ajax引擎中，然后判断服务器成功处理请求，进入回调函数，显示（else）

public class UserServlet extends HttpServlet {
    private final String USERNAME = "zhangsan";
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String name = req.getParameter("name");
        String res = "false";
        if(name.equals(USERNAME))
            res = "true";
        resp.getWriter().print(res);
    }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript">
        function validation() {
            var name = document.getElementById("name").value;
            //创建XMLHttpRequest对象
            xmlHttpRequest = creatXMLHttpRequest();
            //设置回调函数
            xmlHttpRequest.onreadystatechange = callback;
            //初始化XMLHttpRequest组件
            var url = "user.do?name="+name;
            xmlHttpRequest.open("POST",url);
            xmlHttpRequest.send(null);
        }

    //    创建XMLHttpRequest对象
        function creatXMLHttpRequest() {
            if(window.XMLHttpRequest){
                return new XMLHttpRequest();
            }else{
                return new ActiveXObject("Microsoft.XMLHTTP");
            }
        }

        //定义回调函数
        function callback() {
            if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                var data = xmlHttpRequest.responseText;
                if(data == "true"){
                    document.getElementById("info").innerHTML = "用户名已存在！";
                }else{
                    document.getElementById("info").innerHTML = "用户名可以使用";
                }
            }
        }
    </script>
</head>
<body>
<%--onblur 失去焦点事件--%>
    用户名：<input type="text" onblur="validation()" id="name">
    <div id="info"></div>
</body>
</html>

用原生js
在这里插入图片描述

js传统方式调用Ajax有很多不足，步骤不易施展，JQuery对Ajax进行了封装，屏蔽了很多底层代码
语法
$.ajax[(settings)];
常用属性参数：

url ：要请求的服务端资源
type ：请求类型，默认是GET
data ：发送到服务端的参数。
dataType ：服务端返回的数据类型（text,json,html,xml）
常用函数参数：
success ：请求成功的回调函数
error ：请求失败的回调函数
complete ：请求完成的回调函数（无论成功或失败）

<script type="text/javascript" src="js/jquery-3.4.0.min.js"></script>
    <script type="text/javascript">
        function validation() {
            var name = $("#name").val();
            $.ajax({
               url:"user.do",
               type:"POST",
               data:"name="+name,
               success:function (data) {
                   if(data == "true"){
                       $("#info").html("用户已存在");
                   }else{
                       $("#info").html("用户可以使用");
                   }
               }
            });
        }
    </script>