ajax

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

ajax，全称：Asynchronous JavaScript And XML，异步的JavaScript和XML。

ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的 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 与网页服务器进行异步数据交换；

ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

传统模式

• 传统的开发模式：用户的每一次操作都触发一次返回服务器的HTTP请求，服务器做出处理后，返回一个html页面给用户。

  
  
  ajax模式
• ajax开发模式：页面将用户的操作通过ajax引擎与服务器进行通信，将返回的结果给ajax引擎，然后ajax将数据插入指定位置。

2. 如何mock数据

mock：前后端同时开发的时候，后端接口数据没有出来，前端可以mock假数据，模拟开发

1. http-server：安装Node.js ，通过http-server开启本地服务器
   获取端口http://localhost:8000
   然后通过在文件夹创建html和json文件来测试数据
2. server-mock：使用 server-mock node 工具启动一个能处理静态文件和动态路由的服务器。
3. 手写一个 nodejs 服务器线上 mock 数据：
   使用 http://easy-mock.com/
   使用 http://rapapi.org/org/index.do

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

var xhr = new XMLHttpRequest()

//GET写法
xhr.open('GET','/login?username=star&password=123',true)
//POST写法
xhr.open('POST','/login',true)

//监听握手状态是否完成 等同于 xhr.addEventListener('onreadystatechange', function(...){})
xhr.onreadystatechange = function(){
  if(xhr.readystate === 4){
    if((xhr.status => 200 && xhr.status < 300) || xhr.status === 304){   //200-299和304的请求都是成功
      console.log(xhr.responseText)
    }else{
      console.log('请求异常')
    }
  }
}
//监听页面是否完全加载完成 等同于 xhr.addEventListener('load', function(...){})
xhr.onload = function(){
  if((xhr.status => 200 && xhr.status < 300) || xhr.status === 304){
    console.log(xhr.responseText)
  }else{
    console.log('请求异常')
  }
}

//设置超时
xhr.timeout = 5000
xhr.ontimeout = function(){
  console.log('请求超时')
}

//与服务器断开
xhr.onerror = function(){
  console.log('连接失败')
}

//上传二进制文件获取进度
xhr.upload.onprogress = function(){
  console.log('loading...')
}

//GET写法
xhr.send()
//POST写法
xhr.send('username=star&password=123')

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

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

function ajax(opt){
  var url = opt.url || '/login';   //默认地址
  var data = opt.data || {};   //默认空对象
  var type = opt.type || 'GET';  //默认GET
  tpye = type.toUpperCase();
  var onsuccess = opt.onsuccess || function(e){console.log(e)};  //默认
  var oneroor = opt.oneroor || function(e){console.log(e)};  //默认
  var dataType = opt.dataType || 'json';   //默认json

  var dataStr = [];
  for(var key in data){
    dataStr.push(key+ '=' +data[key]);
  }
  dataStr = dataStr.join('&');
  if(type === 'GET'){
    url += '?' + dataStr;
  }

  var xhr = new XMLHttpRequest();
  xhr.open(type, url, true);
  xhr.onoload = function(){
    if((xhr.status >= 200 && xhr.status < 300) || (xhr.status === 304)){
      if(type === 'json'){
        onsuccess(Json.parse(xhr.responseText));
      }else{
        oneroor('error');
      }
    }
  };

  xhr.oneroor = oneroor;
  if(type === 'GET'){
    xhr.send();
  }else{
    xhr.send(dataStr);
  }
}

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