美文网首页
ajax实践

ajax实践

作者: cctosuper | 来源:发表于2017-11-13 18:39 被阅读0次

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

  • ajax是一种技术方案. 它依赖现有的CSS/HTML/JavaScript, 而其中最核心的依赖是浏览器提供的XMLHTTPRequest对象, 是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应, 实现在页面不刷新的情况下和服务器端进行数据交互;
  • ajax(Asynchronous JavaScript and XML). 传统的从服务器获取数据都会刷新页面, 包括了以下几个步骤:
    1. 浏览器向服务器发送请求
    2. 服务器端获取请求信息后处理请求信息生成response
    3. 服务器将response发送给浏览器
    4. 浏览器刷新整个页面显示最新数据
  • 这个过程是同步的, 按照顺序执行. 这就会造成整个页面刷新用户体验差的情况, 并且很多情况都只是页面的一部分内容改变, 大部分内容是不改变的, 这就造成多余的请求. 这时候就是发挥ajax的作用了.
  • ajax利用XMLHttpRequest对象脱离浏览器页面向服务器发送请求, 加载等单独执行. 这就能在不重新加载整个网页的情况下, 对部分网页进行更新
  • 作用: 实现网页的异步加载, 局部刷新网页. 当在向服务器获取新数据时不需要刷新整个网页, 提高用户体验

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

  1. 前后端联调注意事项:
    • 约定数据: 有哪些需要传输的数据. 数据类型是什么
    • 约定接口: 确定接口名称及请求和响应的格式, 请求的参数名称, 响应的数据格式; 根据这些约定整理成详细的接口文档
  2. 后端接口完成前mock数据
    根据接口文档的具体要求, 前端人员可以用假数据来完成简单的测试; 可以用server-mock来完成, 也可以使用easy-mock, 这样不需要特地去写一个后台的处理页面文件来访问数据

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

var ajaxLock 
btn.onclick = function() {
    if(ajaxLock){
         return;
    }else{
        ajax.Lock = true;
        var xhr = new XMLHttpRequest()
        xhr.open('GET', '/hello.json', true)
        xhr.onreadstatechange = function(){
             f(xhr.readyState === 4) {
                  ajaxLock = false;
             }
        }
        xhr.send();
    }
}     

题目4:

实现加载更多的功能,效果范例495 。代码提交到 github

地址

相关文章

  • ajax实践

    1、 ajax 是什么?有什么作用? ajax即asynchronous javascript and xml(异...

  • ajax实践

    1、ajax 是什么?有什么作用? ajax,即Asynchronous JavaScript and XML(异...

  • Ajax实践

    在了解ajax之前,我们先粗略的了解一下http协议 HTTP协议 http事务 一个完整的http请求是怎样的呢...

  • ajax 实践

    题目1: ajax 是什么?有什么作用? ajax是一种技术方案,但并不是一种新技术。它依赖的是现有的CSS/HT...

  • ajax实践

    1.ajax 是什么?有什么作用? Ajax是Asynchronous JavaScript and XML的缩写...

  • Ajax实践

    1.ajax 是什么?有什么作用? AJAX(Asynchronous JavaScript and XML)是一...

  • ajax实践

    题目1: ajax 是什么?有什么作用? AJAX = Asynchronous JavaScript And X...

  • ajax实践

    题目1: ajax 是什么?有什么作用? AJAX的全称是Asynchronous JavaScript and ...

  • ajax实践

    http://www.w3school.com.cn/ajax/index.asp状态码 题目1: ajax 是什...

  • ajax实践

    题目1: ajax 是什么?有什么作用? ajax即“Asynchronous JavaScript and XM...

网友评论

      本文标题:ajax实践

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