ajax基础实践

ajax 是什么？有什么作用？

• AJAX代表异步JavaScript和XML。
  它是使用 XMLHttpRequest 对象与服务器端脚本进行通信。
  它可以发送以及接收各种格式的信息，包括JSON，XML，HTML，甚至文本文件。
  AJAX最吸引人的特性是，它的“异步”性质，这意味着它可以做所有这一切，而不必刷新页面。
  这让您可以根据用户事件更新页面的某些部分。

• 作用
  1.向服务器发出请求，而不重新加载页面
  2.接收和处理服务器中的数据

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

• 注意事项： 请求接口url，接口请求方式：post/get，传递参数说明：参数名称、数量和对应的值，返回响应数据格式：json/text
• 如何 mock 数据：
  在 node.js 环境下安装 server-mock （npm install -g server-mock）
  在项目文件夹下，创建 router.js 文件，写好对应接口的响应函数，创造一些假数据

app.get('/hello', function(req, res) {
  res.send({
    status: 0,
    msg: "hello hunger valley"
  })
});

index.html

$.get('/hello').done(function(ret){
    console.log(ret);
});

作为静态服务器运行

server start or mock start or server open

Success: server start success, open the link http://localhost:8080 in browser

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

添加一个锁，用 true 和 false 来判断

var getData = document.getElementById('getData');
var lock =  true;
getData.addEventListener('click', function(){
    if(!lock){
        return;
    }
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if( xhr.status === 200 || xhr.status === 304){
                console.log( JSON.parse(xhr.responseText) );
            }
            lock = true;
        }
    }
    xhr.open('get', '/getFriends?username=', true)
    xhr.send();
    lock = false;
});

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

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

实现代码如下：
index.html

    
    
    


    
    
    查询

    
    

后台router.js

/**
 * 当 http://localhost:8080/login 的GET请求到来时被下面匹配到进行处理
 * 通过req.query获取请求的参数对象 
 * 通过 req.send发送响应
 */
app.get('/login', function(req, res) {
  var username = req.query.username; // 通过 req.query获取请求参数
  var password = req.query.password; // 通过 req.query获取请求参数
  var status;
  if(username === 'xiaoming' && password === 'abcd1234'){
    status = 'get登录成功！';
  }else{
    status = 'get登录失败!';
  }
  res.send(status);
});

/**
 * 当 http://localhost:8080/login 的POST请求到来时被下面匹配到进行处理
 * 通过req.body获取请求的参数对象 
 * 通过req.send发送响应
 */
app.post('/login', function(req, res) {
  console.log(req.body);

  var username = req.body.username; // 通过 req.body获取请求参数
  var password = req.body.password; // 通过 req.body获取请求参数
  var status;
  if(username === 'xiaoming' && password === 'abcd1234'){
    status = 'post登录成功！';
  }else{
    status = 'post登录失败!';
  }
  res.send(status);
});

ajax实现点击加载更多的功能，后端在本地使用server-mock来模拟数据

http://boloog.github.io/demos/loadMore/loadMore.mp4
实例代码