AJAX的实践

2017-12-26  本文已影响0人  熊蛋子17

1. AJAX 是什么?有什么作用?

2.前后端开发联调需要注意哪些事情?后端接口完成前如何 mock 数据?

在开发之前,前后端需要协作商定数据和接口的各项细节,后端负责提供数据,前端负责展示数据(根据数据负责页面的开发)

3. 点击按钮,使用 ajax 获取数据,如何在数据到来之前防止重复点击?

var isLoading = false //添加状态锁,初始为false,用于判断是否在加载数据
btn.addEventListener('click',function(){
       if(!isLoading){
          return;   //如果正在请求数据,这次点击什么都不做
       }
     var xhr = new XMLHttpRequest()
     xhr.onreadystatechange = function(){
       if(xhr.readystate === 4){
          if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
              console.log(xhr.responseText)
       }else{
              console.log("error")
       }
       isLoading = false;  //readystate = 4数据到来,状态锁变为false,可以再次点击
       }
       xhr.open('get',url,true);
       xhr.send()
       isloading = true //数据发送,进入等待数据状态,状态锁变为true
})

4.实现加载更多的功能。代码提交到 github


代码地址
上一篇 下一篇

猜你喜欢

热点阅读