Ajax实践

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

AJAX(Asynchronous JavaScript and XML)是一种技术方案,依赖的是现有的CSS/HTML/Javascript,而其中最核心的依赖是浏览器提供的XMLHttpRequest对象,是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。所以我用一句话来总结两者的关系:我们使用XMLHttpRequest对象来发送一个Ajax请求。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

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

前后端开发联调注意事项:

  • 约定数据:有哪些需要传输的数据,数据类型是什么
  • 约定接口:确定接口名称及请求和响应的格式,请求的参数名称、响应的数据格式。根据这些约定整理成接口文档
  • 后端接口完成前Mock数据
    mock数据方法
  • 安装xampp搭建php本地服务器
  • server-mock模拟后台数据

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

var isDataArrive = true  //使用状态锁,先声明变量
...
btn.addEventListener('click',function(){
        if (!isDataArrive) {
          return
        }     //绑定事件,检查状态锁的状态
...
xhr.onreadystatechange = function(){
          if (xhr.readyState === 4&(xhr.status === 200 || xhr.status === 304)){
          ...
          var isDataArrive = true}    //后端传入数据无误,状态锁设置为true
        xhr.open('get','/loadMore?index=0&length=6',true)
        xhr.send()
        isDataArrive = false //向后端提交数据,状态锁设置为false

4.实现加载更多的功能,后端在本地使用server-mock来模拟数据?

作业

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. ajax 是什么?有什么作用? Ajax(Asynchronous JavaScript + XML)是一种...
    madpluto阅读 177评论 0 0
  • 1. ajax 是什么?有什么作用? AJAX即Asynchronous Javascript And XML(异...
    _李祺阅读 289评论 0 0
  • ajax 是什么?有什么作用? AJAX的全称是Asynchronous JavaScript and XML(异...
    cross_王阅读 343评论 0 0
  • 1- 关于 ajax 及其作用 Ajax是Asynchronous JavaScript and XML的缩写。...
    osborne阅读 549评论 0 0
  • 题目1: ajax 是什么?有什么作用? ajax是一种技术方案. 它依赖现有的CSS/HTML/JavaScri...
    cctosuper阅读 80评论 0 0