【知识学习】Ajax是什么？

本人小白，还请大佬指教。

1. Ajax是什么？

• Ajax=异步JavaScript和XML（标准通用标记语言的子集）。
• 通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（无刷新技术）。
• 传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页页面。

总结就是异步网页更新技术。

2. 同步方式与异步方式的区别：

• 同步方式发送请求：发送一个请求，需要等待响应返回，然后才能够发送下一个请求，如果该请求没有响应，不能发送下一个请求，客户端会一直处于等待过程中。
• 异步方式发送请求：发送一个请求，不需要等待响应返回，随时可以再发送下一个请求，即不需要等待。

图片的意思就是：

1. AJAX引擎会在不刷新浏览器地址栏的情况下，发送异步请求：
   使用JavaScript获取浏览器内置的AJAX引擎（XMLHttpRequest对象：XMLHttpRequest对象是浏览器提供的向服务器请求和解析响应数据的接口）使用js确定请求路径和请求参数
2. AJAX引擎对象根据请求路径和请求参数进行发送请求
   服务器接收到Ajax引擎的请求进行处理：
   服务器获得请求参数数据
   服务器处理请求业务（调用业务层代码）
   服务器响应数据给Ajax引擎
3. Ajax引擎获得服务器响应的数据，通过执行JavaScript的回调函数将数据更新到浏览器页面的具体位置：
   通过设置给Ajax引擎的回调函数获取服务器响应的数据
   使用JavaScript在指定的位置，显示响应的数据，从而局部修改页面的数据，达到局部刷新的目的。

• 示例：

 $.ajax({
             type: "GET",
             url: "test.json",
             data: {username:$("#username").val(), content:$("#content").val()},
             dataType: "json",
             success: function(data){
                         $('#resText').empty();   //清空resText里面的所有内容
                         var html = ''; 
                         $.each(data, function(commentIndex, comment){
                               html += '<div class="comment"><h6>' + comment['username']
                                         + ':</h6><p class="para"' + comment['content']
                                         + '</p></div>';
                         });
                         $('#resText').html(html);
                      }
         });

如今Vue的前端框架已封装为axios，实际使用与ajax大同小异；不过更为简洁，易于理解。

• 原文链接：
  https://blog.youkuaiyun.com/Ha_Girl/article/details/90710491?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task