ajax的笔记

ajax的概述

我们在向服务器请求数据的时候，在浏览器中响应的页面都是整页刷新的。在一些项目中我们只希望该页面只获取局部的数据，而不需要他整页的刷新，我们就需要用到Ajax了

目前主流的数据格式使用的是json(javascript对象表示法）
如以下的格式

{
    "fruit":{
        "name":"apple",
        "weight":"0.5kg",
        "color":"red"
    }
}

ajax的优缺点

优点：按需获取数据，提升系统性能。
缺点：异步获取数据，不利于搜索引擎优化。（SEO)

ajax的原理

Ajax的原理是通过XMLhttpRequest对象向服务器发送请求，实例代码如下所示：

//后台程序
router.get("/", async ctx => {
    await ctx.render("index")
})

router.get("/data", async ctx => {
    ctx.body = "hello world"
})
//前端程序
var xhr = new XMLHttpRequest(); //创建XHR对象
xhr.open("get","/data");   //规定请求类型
xhr.send()                      //发送请求
xhr.onreadystatechange = function(){ //监听readyState事件
// 0: 请求未初始化
// 1: 服务器连接已建立
// 2: 请求已接收
// 3: 请求处理中
// 4: 请求已完成，且响应已就绪
  if(xhr.readyState === 4 && xhr.status === 200){
      alert(xhr.responseText)
  }
}

三，封装一个ajax方法

回调函数
将上面的程序封装到一个myAjax方法，实例代码如下所示，这里需要注意的是，因为Ajax是异步的操作，因此封装的Ajax不能用return获取返回值。下面的示例使用的是回调函数封装的Ajax方法（但是回调函数如果多的话会产生回调地狱，所以更推荐用es6的promise或者async+await)

function myAjax(method,url,next) {
   let xhr = new XMLHttpRequest();
   xhr.open(method, url);
   xhr.send()
   xhr.onreadystatechange = function () {
       if (xhr.readyState === 4 && xhr.status === 200) {
           next(xhr.responseText);
       }
   }
}

document.querySelector("button").onclick = function() {//调用封装的Ajax
  myajax("get","/data",function(data){
      alert(data);
  });
}

Promise
过多的使用回调函数会让程序变得很难维护，接下来我们用Promise重新封装ajax方法，示例代码如下所示：

function myajax(method, url, next) {
   return new Promise(function (resolve,reject) {
       let xhr = new XMLHttpRequest();
       xhr.open(method, url);
       xhr.send(); //可以向后台传输数据
       xhr.onreadystatechange = function () {
           if (xhr.readyState === 4 && xhr.status === 200) {
               resolve(xhr.responseText);
           }
       }
       reject("获取数据失败")
   })
}
document.querySelector("button").onclick = async function () {
   let p = myajax("get", "data");
   p.then(function (data) {
       alert(data);
   })
}