ajax

一.概念

AJAX => Asynchronous Javascript And XML
直译：异步的 JavaScript 和 XML
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术(局部刷新)
通俗的讲，AJAX就是JS通过一个网址去加载数据，这个过程通常是用户不可见的

二.优缺点

1.优点

1）页面无刷新更新数据：AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据；
2）异步与服务器通信：AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力；
3）前端和后端负载平衡：AJAX可以把以前一些服务端负担的工作转嫁到客户端，减轻服务器和带宽的负担，节约空间和宽带租用成本；
4）基于标准被广泛支持：AJAX基于标准化的并被广泛支持的技术，不需要下载浏览器插件；
5）界面与应用分离：Ajax使WEB中的数据与呈现分离，有利于分工合作，提高效率。

2.缺点

1）AJAX干掉了Back和History功能：即对浏览器机制的破坏，在动态更新页面的情况下，用户无法回到前一个页面状态；
2）AJAX有安全问题：AJAX技术给用户带来很好的用户体验的同时也带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道；
3）对搜索引擎支持较弱：对搜索引擎优化不太友好；
4）破坏程序的异常处理机制：像Ajax.dll，Ajaxpro.dll这些Ajax框架是会破坏程序的异常机制；
5）AJAX不能很好支持移动设备：一些手持设备（如手机、PDA等）不能很好的支持Ajax。

三.使用

1.创建对象

if(window.XMLHttpRequest){ // 非IE5 IE6
    var xhr=new XMLHttpRequest();
}else{ // IE5 IE6
    var xhr=new ActiveXObject("Microsoft.XMLHTTP");
};

2.初始化请求

xhr.open(method,url,async);

3.发送请求

对于get请求，参数为null
如：xhr.send(null);
对于post请求，参数为发送到服务器的数据
如：xhr.send('name=xiaoming&age=24');

4.请求/响应状态

当readyState为 4 且 status为 200 时，表示请求已完成，成功得到响应结果
xhr.onreadystatechange=function (){
    if (xhr.readyState==4) { // 请求完成
        if (xhr.status==200) { //ok 成功
            alert( xhr.responseText ); // 得到响应结果
        } else{
            alert( xhr.status ); // 弹出失败的状态码
        };
    };
}

xhr.responseText  获得文本形式的响应数据
xhr.responseXML  获得 XML 形式的响应数据

四.封装ajax函数

function ajax(options){
  // data -> 'key=value&key=value'
  // 1.创建数据交互对象
  if (window.XMLHttpRequest) {
    var xhr = new XMLHttpRequest() // 非IE5 6
  } else {
    var xhr = new ActiveXObject('Microsoft.XMLHTTP') // IE5 6
  }

  // 判断并格式化参数data
  var data = ''
  // if (typeof options.data === 'object' && options.data !== null && options.data.constructor === 'Object') {
  if (isObject(options.data)) {
    // 把对象格式化成 -> 'k1=v1&k2=v2&k3=v3'
    for (var key in options.data) {
      data += key+'='+options.data[key]+'&'
    }
    // data = 'k1=v1&k2=v2&k3=v3&'
    data = data.substring(0,data.length-1)
  }

  if (typeof options.data === 'string') {
    data = options.data
  }

  // 判断请求方式
  if (options.type.toLowerCase() === 'get') {
    var time = ''
    time = options.cache ? '' : Date.now()
    // 2.打开连接
    xhr.open(options.type,options.url+'?'+data+'&_='+time,true) // 默认true，异步
    // 3.发送请求
    xhr.send(null) // get请求传null
  }
  if (options.type.toLowerCase() === 'post') {
    // 2.打开连接
    xhr.open(options.type,options.url,true) // 默认true，异步
    // post 请不会有缓存问题

    // 设置请求头，作用 模拟表单 post 请求提交数据，在send方法之前设置
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")

    // 3.发送请求
    xhr.send(data) // post请求 要传递的参数在此传
  }
  
  // 4.等待请求/响应状态
  // xhr.readyState  请求状态，0-4状态改变会触发一个readystatechange事件
  xhr.onreadystatechange = function (){
    // console.log( xhr.readyState );// 2 3 4
    if (xhr.readyState === 4) {// 请求完成
    // xhr.status 响应状态
      if (xhr.status === 200) {// OK 响应就绪
        // xhr.responseText 响应的数据
        // options.success(xhr.responseText)
        // 支持dataType配置
        if (options.dataType === 'json') {
          var json = JSON.parse(xhr.responseText)
          options.success(json)
        } else if (options.dataType === 'xml') {
          options.success(xhr.responseXML)
        } else {
          options.success(xhr.responseText)
        }
      } else {
        // console.log(xhr.status);
        options.error(xhr.status)
      }
    }
  }
}
function isObject(obj){
  if (Object.prototype.toString.call(obj) === '[object Object]') {
    return true
  }
  return false
}