Ajax实践

1、ajax是什么，有什么用？

• AJAX是异步的JavaScript和XML，作用主要是利用js的XMLHttpRequest对象来实现在不重新加载整个页面的情况下更新部分网页，具体包含以下步骤：

var httpRequest = new XMLHttpRequest() //  创建对象->获取实例
httpRequest.open('GET', '/data')     // 设置GET 路径
httpRequest.send()      //发送HTTP请求 

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

• 前后端开发联调需要注意事项
  1、约定数据：有哪些需要传输的数据，数据类型是什么
  2、约定接口：确定接口的名称及请求和响应的格式，请求的参数、响应的数据格式
  3、依据这些约定整理成接口文档

• 如何mock数据
  1、可以依据接口文档，使用假数据来验证制作的页面响应和接口是否正常
  2、使用xampp模拟
  3、使用server-mock(重点掌握)

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

vscode

4、封装一个 ajax 函数，能通过如下方式调用。后端在本地使用server-mock来 mock 数据

function ajax(opts){
var xhr = new XMLHttpRequest();
//依据状态码来判断数据是否判断如何处理
xhr.onreadystatechange = function(){
  if(xhr.readyState == 4 && xhr.status ==200){
    var json = JSON.parse(xhr.responseText);
    opts.success(json);
  }
  if(xhr.status == 404){
    opts.error();
  }
}
var dataStr='';
//取出opts.data内所有数据并以&符号连接
for(var key in opts.data){
  dataStr += key + '=' + opts.data[key] + '&'
}
dataStr = dataStr.substr(0,dataStr.length-1);
//xhr.open(method,url,asyn)，asyn设置为bool值，true表示异步；false表示同步
if(opts.type.toLowerCase() == 'get'){
  xhr.open(opts.type,opts.url + '?'+dataStr,true);
  xhr.send();
}
//get数据一般通过url传递，而post通过body内传递
if(opts.type.toLowerCase() == 'post'){
  xhr.open(opts.type,opts.url,true);
  xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
  xhr.send(dataStr);
}
}

5、实现加载更多的功能

• 前端代码：

  
  
  
  


  

    
内容1
    
内容2
  
  

   加载更多