ajax

ajax 是什么？有什么作用？

ajax（全称：Asynchronous JavaScript + XML，异步JavaScript和XML） 是一种技术方案，但并不是一种新技术。它依赖的是现有的 CSS/HTML/JavaScript，而其中最核心的依赖是浏览器提供的 XMLHttpRequest 对象，是这个对象使得浏览器可以发出 HTTP 请求与接收 HTTP 响应。
ajax 应用可以仅向服务器发送并取回必须的数据，并在客户端采用JavaScript处理来自服务器的回应。因为在服务器和浏览器之间交换的数据大量减少，服务器回应更快了。同时，很多的处理工作可以在发出请求的客户端机器上完成，因此Web服务器的负荷也减少了。

作用：
1.运用 XHTML+CSS 来表达信息；
2.运用 JavaScript 操作 DOM（Document Object Model）来运行动态效果；
3.运用 XML 和 XSLT 操作数据
4.运用 XMLHttpRequest 或新的 Fetch API 与网页服务器进行异步数据交换；

---

如何 mock 数据？

• http-server：使用 http-server node 工具启动一个静态服务器。* server-mock：使用 server-mock node 工具启动一个能处理静态文件和动态路由的服务器。* 手写一个 nodejs 服务器* 线上 mock 数据：
  1. 使用 http://easy-mock.com/
  2. 使用 http://rapapi.org/org/index.do
  3. 使用 server-mock

---

把视频中GET 和 POST 类型的 ajax 的用法手写一遍

<script>
  // GET 类型
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'login?username=huanger&password=123',true);
  xhr.send();
  xhr.onload = function(){
    console.log(xhr.status);
    if((xhr.status >= 200 && xhr.status <300) || xhr.status === 304){
      var data = xhr.responseText;
      console.log(data);
    }else{
      console.log('error');
    }
  };

  // POST 类型
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'login',true);
  xhr.send('username=huanger&password=123');
  xhr.onload = function(){
    console.log(xhr.status);
    if((xhr.status >= 200 && xhr.status <300) || xhr.status === 304){
      var data = xhr.responseText;
      console.log(data);
    }else{
      console.log('error');
    }
  };

</script>

---

封装一个 ajax 函数，能实现如下方法调用

function ajax(options){
    //补全
}
ajax({
    url: 'http://api.jirengu.com/weather.php',
    data: {
        city: '北京'
    },
    onsuccess: function(ret){
        console.log(ret)
    },
    onerror: function(){
        console.log('服务器异常')
    }
})

答案：

function ajax(opts){
    var url = opts.url
    var type = opts.type || 'GET'
    var dataType = opts.dataType || 'json'
    var onsuccess = opts.onsuccess || function(){}
    var onerror = opts.onerror || function(){}
    var data = opts.data || {}
    //上面全是看默认参数是否被设置，假如没有就使用默认参数
    var dataStr = []
    for(var key in data){
        dataStr.push(key + '=' + data[key])
    }
  //拼装data进数组中
    dataStr = dataStr.join('&')

    if(type === 'GET'){
        url += '?' + dataStr
    }
   //假如是GET方法，就把data放入URL中
    var xhr = new XMLHttpRequest()
    xhr.open(type, url, true)
    xhr.onload = function(){
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            //成功了
            if(dataType === 'json'){
                onsuccess( JSON.parse(xhr.responseText))
            }else{
                onsuccess( xhr.responseText)
            }
        } else {
            onerror()
        }
    }
    xhr.onerror = onerror
    if(type === 'POST'){
        //POST方法就放入send中
        xhr.send(dataStr)
    }else{
        xhr.send()
    }
}

ajax({
    url: 'http://api.jirengu.com/weather.php',
    data: {
        city: '北京'
    },
    onsuccess: function(ret){
        console.log(ret)
    },
    onerror: function(){
        console.log('服务器异常')
    }
})