Ajax

作者: 曾祥辉 | 来源:发表于2017-10-07 03:24 被阅读0次

题目1: ajax 是什么?有什么作用?

  • ajax 的全称是Asynchronous JavaScript and XML,直译:异步 JavaScript 和 XML。
  • ajax是使用XMLHttpRequest对象与服务器端通信的脚本语言。
  • 可以无需刷新页面而与服务器端进行通信,可以发送及接收各种格式的信息,包括JSON、XML、HTML和文本文件。

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

  • 前后端开发联调需要注意哪些事情:
  1. 统一接口名称,统一命名,定制规范。
  2. 统一数据类型,统一数据大小等限制的确定。
  3. 统一接口的相关参数: url、端口、方法( get/post)、请求数据的类型。
  4. 按照上述确认后的版本严格执行。
  • 后端接口完成前如何 mock 数据:
  1. 在本地搭建服务器后台,如使用nodejs等软件。
  2. 编写router.js文件模拟后端返回数据。

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

防止数据到来之前防止重复点击,可以在XMLHttpRequest对象与后台服务器通信中进行条件判断,首先阻止默认事件,再设置一个标记变量值为true,判断节点设置在执行发送函数时,将标记变量值变为false,并在css或js中阻止执行发送函数(元素)生效,如果接收到后台服务器返回的数据则将标记变量的值还原为true,并使发送函数(元素)可被正常执行。
例子demo

var btn=document.querySelector('#btn')
var isLoad = true
btn.addEventListener("click",function(e){
  e.preventDefault()
  if(!isLoad){
    return;//btn.classList.add(‘disabled’)
  }
  var xhr=new XMLHttpRequest()
  xhr.onreadystatechange=function(){
    if(readystate===4){
      if(xhr.status === 200||xhr.status === 304){
        /*var results = JSON.parse(xhr.responseText);
        for (var i = 0; i < results.length; i++) {
          var node = document.createElement('li')
          node.innerText = results[i]
          ct.appendChild(node)*/
        isLoad = true 
      }
    }
      xhr.open('get',"/url",true)
    xhr.send()
    isLoad = false
    //btn.classList.remove(‘disabled’)
  }
})

题目4:实现加载更多的功能,效果范例296,后端在本地使用server-mock来模拟数据

demo

//router.js
app.get('/loadMore', function (req, res) {
  var idx = req.query.index
  var len =req.query.length
  var data = []
  for(var i = 0;i<len ; i++){
    data.push("内容"+(parseInt(idx)+i))
  }
  res.send(data)

相关文章

  • AJAX

    主要内容: ajax 是什么、原生ajax 写法和jQuery ajax写法。 AJAX 是什么 ajax,即As...

  • JavaScript进阶知识点--AJAX及JSON

    AJAX 关于 AJAX 什么是 AJAX AJAX 的全称是 Asynchronous JavaScript a...

  • HTML5权威指南 | 第五部分 高级功能

    三十二、使用AJAX(上) Ajax起步: 使用Ajax事件: Ajax请求的错误处理: 中止Ajax请求: 三十...

  • ajax学习笔记

    Ajax学习笔记 Ajax简介 1. Ajax是什么? Ajax : Asynochronous javascri...

  • AJAX

    一、简介 AJAX菜鸟教程 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML。 AJAX...

  • js之AJAX复习

    异步交互和同步交互 什么是Ajax? Ajax的工作原理。 Ajax包含的技术: Ajax的缺陷: Ajax的核心...

  • 复习jQuery - ajax

    jQuery ajax - ajax() 方法 $.ajax({ url:'oo.php', ...

  • jQuery中Ajax请求的使用和四个步骤示例

    ajax() 方法用于执行 AJAX(异步 HTTP)请求,所有的 jQuery AJAX 方法都使用 ajax(...

  • ajax

    1、什么是ajax? 2、ajax的原理 3、ajax的核心对象 4、ajax的优点: ajax的缺点: 被jqu...

  • ajax

    Ajax 1 - 请求纯文本 Ajax 2 - 请求JSON数据 Ajax 3 - 请求Github接口 Ajax...

网友评论

      本文标题:Ajax

      本文链接:https://www.haomeiwen.com/subject/hlzkhxtx.html