Asynchronous Javascript And XML”（异步 JavaScript 和 XML）。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

概念

客户端向服务器端请求数据的一种技术。

XMLHttpRequest 对象

是 AJAX 的基础，用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
语法：variable=new XMLHttpRequest();

向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

  • method：请求的类型；GET 或 POST
  • url：文件在服务器上的位置
  • async：true（异步）或 false（同步）

    get和post

    ```html get 1.用来请求数据 2.请求放在url地址里面的,对用户是可见的 3.发送的信息也是有限制的

post 1.提交数据 2.发送数据对用户来说是不可见 3.发送数据理论上是没有限制的

  1. <a name="WLic2"></a>
  2. ## send(_string_)
  3. 将请求发送到服务器。
  5. - _string_：仅用于 POST 请求
  6. <a name="Bis5i"></a>
  7. # 服务器响应
  8. 如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。<br />responseText    获得字符串形式的响应数据。<br />responseXML    获得 XML 形式的响应数据。
  9. <a name="1zrfA"></a>
  10. # onreadystatechange 事件
  11. 当请求被发送到服务器时，我们需要执行一些基于响应的任务。<br />每当 readyState 改变时，就会触发 onreadystatechange 事件。<br />readyState 属性存有 XMLHttpRequest 的状态信息。<br />下面是 XMLHttpRequest 对象的三个重要的属性：
  12. <a name="onreadystatechange"></a>
  13. ## onreadystatechange
  14. 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
  15. <a name="Up58B"></a>
  16. ## readyState  
  17. 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。<br />0: 请求未初始化<br />1: 服务器连接已建立<br />2: 请求已接收<br />3: 请求处理中<br />4: 请求已完成，且响应已就绪
  18. <a name="lyTV6"></a>
  19. ## status  
  20. 200: "OK"<br />404: 未找到页面
  22. 当 readyState 等于 4 且状态为 200 时，表示响应已就绪：<br />if (xmlhttp.readyState==4 && xmlhttp.status==200)
  23. <a name="5jO3c"></a>
  24. # 使用 Callback 函数
  25. callback 函数是一种以参数形式传递给另一个函数的函数。<br />如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
  26. <a name="Z8ib5"></a>
  27. # 没封装的ajax
  28. ```html
  29. <p id="app"></p>
  30. <script>
  31.     /* 
  32.     1.什么是异步 何时使用
  33.     2.如何使用原生ajax
  34.      */
  35.     var app = document.getElementById("app")
  36.     var url ="http://192.168.4.18:3000/search?keywords=哈"
  37.     /* ajax 如何使用ajax向后台获取数据*/
  38.     /* 1. 创建ajax核心对象*/
  39.     var xhr =  new XMLHttpRequest();
  40.     /* 2.与服务器建立连接 xhr.open(method,url,async) 
  41.     请求的方式,地址,是否异步
  42.     */
  43.     xhr.open("get",url,true)
  44.     /* 3.发送请求 */
  45.     xhr.send()
  46.     /* 4.响应 */
  47.     /* onreadystatechange  监听服务器的响应状态*/
  48.     xhr.onreadystatechange = function(){
  49.         /* xhr.status  服务器端响应的状态码  200 */
  50.         /* xhr.readyState 服务器响应的进度  4 响应已经完成 */
  51.         if(xhr.readyState == 4 && xhr.status == 200){
  52.             var txt = xhr.responseText;
  53.             /* JSON.parse()  可以json格式的字符串,转换为json格式的数据 */
  54.             var obj = JSON.parse(txt);
  55.             console.log(obj)
  56.             app.innerHTML =  obj.name
  57.         }
  58.     }
  59. </script>

传参解构

  1. /* 解构 */
  2. function http({
  3.     callback:callback,
  4.     method,
  5.     url,
  6. }) {
  7.     console.log(callback);
  8.     console.log(method)
  9.     console.log(url)
  10. }
  11. http({
  12.     callback:"123",
  13.     method:"get",
  14.     url:"xx"
  15. })

封装ajax

http.js

  1. function ajax({
  2.     url,
  3.     method,
  4.     success
  5. }){
  6.     var xhr =  new XMLHttpRequest()
  7.         xhr.open(method,url,true)
  8.         xhr.send()
  9.         xhr.onreadystatechange = function(){
  10.             if(xhr.readyState == 4 && xhr.status == 200){
  11.                 var res = JSON.parse(xhr.responseText);
  12.                 success(res);
  13.             }
  14.         }
  15. }

封装ajax..html

  1. var url = "http://192.168.4.18:3000/comment/music?id=186016&limit=1"
  2. ajax({
  3.     url,
  4.     method:"get",
  5.     success:res=>{
  6.         console.log(res)
  7.     }
  8. })