1．概念：
Asynchronous JavaScript And XML 异步的JavaScript和XML
1.异步和同步：客户端和服务端相互通信的基础上

     同步:  *客户端必须等待服务端的响应。在等待的期间客户端不能做其他操作。
     异步:  *客户端不需要等待服务端的响应。在服务器处理请求的过程中，客户端可以做其他操作。

      Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

      通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以不重新加载整个网页的情况下，
      对网页的某部分进行更新。传统的网页（不使用Ajax）如果需要更新内容，必须需重新整个网页页面。

提升用户的体验


2、实现方式：
1.原生的js实现方式
//定义方法

function fun() {
                //发送异步请求
                //1.创建核心对象
                var xmlhttp;
                //为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。
                //如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject
                if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                        xmlhttp = new XMLHttpRequest();
                } else {// code for IE6, IE5
                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                //2.建立连接
                /*
                  参数： 1.请求方法：GET、POST
                 * get方式，请求参数在URL后边拼接。send方式为空参
                 * post方式，请求参数在send方法中定义
                       2.请求的URL:
                       3.同步或异步请求:true(异步)或false(同步)
                        
               
                 */
                xmlhttp.open("GET","/BorrowAndInvest/servlet/LoginServlet?username=tom", true);
        //3.发送请求
        xmlhttp.send();
        //4.接受并处理来自服务器的响应结果
        //获取方式：xmlhttp.responseText;
        //什么时候获取？当服务器响应成功后再获取
        //当xmlhttp对象就绪状态改变时,触发事件onreadystatechange.
        xmlhttp.onreadystatechange = function() {
           //判断readyState就绪状态是否为4，判断status响应状态码是否为200
                if (xmlhttp.readyState == 4 && xmlhttp.status==200) {
                    //获取服务器的响应结果
                        var responseText= xmlhttp.responseText;
                        alert(responseText);
                }
        }
}

2.Jquery实现方式

1.$.ajax()
      *语法:$.ajax({键值对})；
//定义方法



  function fun() {
            //使用$.ajax()发送异步请求
    $.ajax({
                       url:"/BorrowAndInvest/servlet/LoginServlet",//请求路径
                       type:"POST",//请求方式
                       //data:"username=hello&age=25",//请求参数
                       data:{"username":"hello","age":25},
                       success:function(data){
                             alert(data);
                       },//响应成功后的回调函数
                       error:function(){
                       alert("出错啦");
                       },//表示如果请求响应出现错误，会执行的回调函数
                       dataType:"text"//设置接收到的响应数据的格式
                    });

2.$.get()：发送get请求
*语法:$.get(url,[data],[callback],[type])
*参数：1.url:请求路径2.data:请求参数3.callback回调函数4.type:响应结果的类型

  function fun() {
            $.get("/BorrowAndInvest/servlet/LoginServlet",{username:"大雄"},function(data){
                      alert(data);
            },"text");
    }

3.$.post()发送post请求*
        function fun() {
        $.post("/BorrowAndInvest/servlet/LoginServlet",{username:"大雄"},function(data){
                  alert(data);
        },"text");
}

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

原文：https://blog.csdn.net/weixin_44538423/article/details/91608124

感谢分享~~

或者联系学姐DKA-2018

有任何问题欢迎在评论区留言