ajax

问答

• 1.ajax 是什么？有什么作用？
  AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），其实是我们去操纵XMLHttpRequest这么一个对象，向后台要数据，这个对象要完数据之后，页面不刷新，我们直接拿到这个数据，然后再进行一些展示或处理
• 2.前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？(npm install -g server-mock)
• 注意：
  1.确认接口文档的归属，由谁来撰写。
  2.确认接口的参数和返回值，还有接口名称。
  3.确认数据传输方式，是否需要中间站
  4.确认数据传输格式，JSON或XML等
  5.确认接口数据管理权6.接口信息变动告知方式
• 如何 mock 数据：
  1.自己编写测试数据，但是要求较高操作麻烦，并且可能数据类型不够全面。
  2.使用mock.js，搭建本地服务器，使用后端语言编写简单的接口模拟数据来测试。
  3.借助server-mock,修改文件之后需要重启server-mock.

• 3.点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
  在事件开始前设置一个状态锁，在事件开始前挂锁，事件结束后解锁，如果是重复点击则直接return掉，起到在数据到来之前防止重复点击的作用。

  
  

代码题

1.封装一个 ajax 函数，能通过如下方式调用

<pre>
function ajax(opts){
var xmlhttp=new XMLHttpRequest();

  xmlhttp.onreadystatechange=function(){
    if(xmlhttp.readyState==4&&xmlhttp.status==200){  
    var json=JSON.parse(xmlhttp.responseText);
    opts.success(json);
    }
    if(xmlhttp.readyState==4&&xmlhttp.status==404){
     opts.error();
    }
  }
 var dataStr='';
 for(var key in opts.data){
  dataStr+=key+'='+opts.data[key]+'&';
 }

  dataStr = dataStr.substr(0,dataStr.length-1);
  if(opts.type.toLowerCase()==='post'){
     xmlhttp.open(opts.type,opts.url,true);
     xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
     xmlhttp.send(dataStr);
  }
 if(opts.type.toLowerCase()==='get'){
     xmlhttp.open(opts.type,opts.url+'?'+dataStr,true);
     xmlhttp.send();
  }

}

document.querySelector('#btn').addEventListener('click', function(){
ajax({
    url: 'getData.php',   //接口地址
    type: 'get',               // 类型， post 或者 get,
    data: {
        username: 'xiaoming',
        password: 'abcd1234'
    },
    success: function(ret){
        console.log(ret);       // {status: 0}
    },
    error: function(){
       console.log('出错了')
    }
})

});

</pre>

版权归吴秀芳和饥人谷所有，若有转载，请注明来源