【自种树自乘凉】Ajax 简单入门｜8月更文挑战

Ajax 到底是干什么的？

简单来说 Ajax 就是用于客户端向服务器端发送请求的。

在现在这个前后端分离的时代，我们的客户端中的 JS 要通过 Ajax 来向服务器端发送一个请求，并获取服务器返回的内容，最终进行客户端渲染。

为什么不用普通的 HTTP 请求？

• Ajax 通过 xmlHttpRequest 对象发送请求，服务器返回数据后无需重新加载整个网页，能够在这样的情况下更新网页局部。
• 普通 HTTP 请求通过 httpRequest 对象发送请求，服务器返回数据后需要重新刷新整个网页（一次 HTTP 请求对应一个页面）。

Ajax 原生写法（JS）

1. 创建一个对象

var xhr = new XMLHttpRequest();

2. 设置请求参数

xhr.open("GET","/xxxx",true);

3. 监听

xhr.onreadystatechange = function() {
   if (xhr.readyState == 4) {
      console.log('请求完成');
      if (xhr.status >= 200 && xhr.status < 300){
         console.log('请求成功');
      }
   }
 }

4. 发送请求

xhr.send();

5. 简化以上步骤的写法

var xhr = new XMLHttpRequest();
xhr.open("GET","/xxxx",true);
xhr.onlosd = ()=>{ console.log('请求成功') }
xhr.send();

封装了 Ajax 的库（例如JQuery.ajax）

$.get('/xxxx').then(function(response){
  // 这里的 response 就是返回的内容
})

Ajax 可以请求哪些格式的内容？

• XML 内容
• JSON 内容（最常用）
• HTML 内容
• CSS 内容
• JS 内容
• ...