Ajax的入门-Assignment

问答

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

• ajax 全称叫做Asynchronous JavaScript and XML；

  • 是一种基于现有标准的更新部分网页的新方法；
  • Asynchronous指的是资源加载方式是异步的；
  • JavaScript指的是使用JS的语言去实现请求的接发功能；
  • XML指的是一开始的数据交换的格式是XML,现在常用的格式是json；

• ajax的作用

  • 异步加载资源以提高用户体验
  • 降低数据流量传输以节省成本

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

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

  • 开发前约定好接口文档并指定负责人进行后续撰写和维护
  • 约定接口使用的数据类型，json/xml还是text等
  • 约定页面渲染时用到的数据

• mock数据

  • 使用server-mock或者mock.js等数据模拟工具
  • 自己搭建服务器，并使用后端语言（php、java）等去模拟数据

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

可以通过设置状态锁来防止重复点击
$('button').on('click',function(e){
  e.preventDefault();
  if($(this).data(isLoading,false)){
    return;
  }
  $(this).data(isLoading,true)
         .html('<p>努力加载中</p>')
})

代码

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

function ajax(opts){ // todo ...}
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('出错了') } 
  })
});

新浪云地址

2.实现如下加载更多的功能。效果如下： http://jrgzuoye.applinzi.com/作业安排/jscode/JS9-jqueryajax/1.html

新浪云地址

3.实现注册表单验证功能效果如下：http://jrgzuoye.applinzi.com/作业安排/jscode/JS7-ajax/3.html

sinacloud