AJAX

Posted 2021-11-29 zhuobo

AJAX

一、概念

AJAX，中文名阿贾克斯。没错就是昨晚欧冠被热刺逆转的的荷甲黑马阿贾克斯，今年的欧冠决赛成为了英超内战，真的有意思。但愿另一个赛场的车仔和阿森纳可以在欧联决赛会师！

AJAX(Asynchronous JavaScript and XML），也就是异步的JavaScript与XML技术，指的是一套综合了多项技术的浏览器端网页开发技术。Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

1. 同步：客户端向服务端发送请求，在获得相应之前被阻塞不能做其他的操作
2. 异步：客户端发送请求后，获得相应之前可以做其他的操作

二、AJAX实现方式

1. 原生javascript的实现方式

2. jQuery的实现方式

1. $.ajax()：发送异步请求

   $("input[type='button']").click(function () {
       $.ajax({
           // 使用$.ajax的方式发送异步请求
           url:"ajaxServlet", // 请求路径
   
           type:"POST",// 请求方式
   
           // data: "username=tom&age=23",// 请求参数
           data: {"username":"Jack", "age":18},
   
   
           success:function (data) {// 响应成功的回调函数
           alert(data); // data 是服务器 响应的值
           },
   
           error:function () {// 响应失败的回调函数
           alert("error");
           },
           dataType:"text"// 响应的数据格式
       });
   });

2. $.get(url, [data], [callback], [type])：发送异步的GET请求，

   1. 参数：

      1. URL：请求路径
      2. data：请求参数
      3. callback：回调函数
      4. type：响应数据类型

      $("input[type='button']").click(function () {
           $.get("ajaxServlet", {username:"hehe"}, function (data) {
               alert(data);
           }), "text"
      });

3. $.post()：发送一步的POST请求，用法和上面的get一样，仅仅是方法名为post便可以发送POST请求