AJAX

AJAX是微软发明
用js发一个请求啊
ajax是不刷新页面请求的唯一方法

get在req.query里面
post在req.body里面

浏览器发出请求：
1.地址栏输入网址url
2.link css
3.img src = xxx
4.script = xxx
5.form表单也可以发请求（当用户点击提交时）

面试
onreadystatuchange
statu === 4 才是完成
readystatu

题目1： ajax 是什么？有什么作用？
AJAX = 异步 JavaScript 和 XML。描述了一种将新的现有技术一起使用的“新”方法， 包括: HTML或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 最重要的是 XMLHttpRequest 对象。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

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

• 约定数据：需要传输的数据以及数据类型；
• 约定接口：接口名称，请求和响应的格式，请求的参数名称，响应的数据格式；
• 根据这些约定整理成接口文档。

后端接口完成前如何 mock 数据：

• 可以根据接口文档，使用假数据来验证我们制作的页面响应和接口是否正常。
• 可以搭建php本地服务器用，php写脚本提供临时数据；
• 也可使用Mock.js，它能拦截ajax请求并根据请求中的内容来随机生成符合你要求的假数据，模拟后端环境让你完成对页面和接口的测试。

题目3：点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
添加一个状态锁，在触发ajax前先上锁，之后用户再怎么点击都不会触发ajax，直到ajax代码执行完才会触发。

var btn = document.querySelector('.btn');
var lock = false; 

btn.addEventListener('click',function(e){
    e.preventDefault();

    if(lock){
        return;
    }else{
        lock = true;
        ajax({
            ...
            },
            success: function(){
                ...
                lock = false;
            },

            error: function(){
                ...
                lock = false;
            }
        });  
    }
})

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

function ajax(opts){
  var xhr = new XMLHttpRequest()
  xhr.onreadystatechange = function(){
      if(xhr.readyState === 4){
          if(xhr.status === 200 || xhr.status === 304){
              var results = JSON.parse(xhr.responseText)
              opts.success('results')
          }else{
              opts.error()
          }
      }
  }
  var query = '?'
  for (key in opts.data){
      query += key + '=' + opts.data[key] + '&'
  }
  query = query.substr(0, query.length-1)
  xhr.open(opts.type, opts.url+query, true)
  xhr.send()
}
document.querySelector('#btn').addEventListener('click', function(){
    ajax({
        url: '/login',   //接口地址
        type: 'get',               // 类型， post 或者 get,
        data: {
            username: 'xiaoming',
            password: 'abcd1234'
        },
        success: function(ret){
            console.log(ret);       // {status: 0}
        },
        error: function(){
           console.log('出错了')
        }
    })
});

题目5：实现加载更多的功能，效果范例149，后端在本地使用server-mock来模拟数据

  
  
  


  

    
内容1
    
内容2
  
  加载更多
  

直播课：
关键概念
服务器
网站