Ajax学习

对Ajax的理解？

是基于XHR(XMLHttpRequest)实现的

HTML:Hyper Text Markup Language

XML:Extensible Markup Language（在html之上能够拓展的语言）

比如：不局限于Html：

<parent>
   <son></son>
   <son></son>
</parent>

Ajax：asynchronous javascript and XML（异步的js和xml）

实现局部刷新技术，利用js单独向服务器发送http请求。

所有基于ajax的通讯，基本都是json的数据格式

实现方式

1.创建xhr对象

var xhr;
if(window.XMLHttpRequest){
  xhr=new XMLHttpRequest(); // ie7+
}else {
  xhr= new ActiveXObject('Microsoft.HMLHTTP');
}

2.发送http（Hyper Text Transfer Protocol）请求

发送请求之前要建立连接
xhr.open(‘get',url,false); // 用来指定请求的方式,请求的url，同步还是异步（true)请求

xhr.send();
// 有4个主要的属性
// responseText:文本
// responseXML：xml；'application/xml'，'text/xml’
// status：
// statusText：

if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
  console.log(xhr.responseText);
}

-------------------------------------------------------------------
异步：
xhr.open(‘get',url,true);
xhr.send();

// xhr.readyState
// 0代表初始化，什么都没做
// 1代表启动
// 2代表发送
// 3是浏览器接收
// 4完成

xhr.onreadystatechange=()=>{
   if(xhr.readyState === 4){
      if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
           console.log(xhr.responseText);
      }
   }
}

3.前端接收服务器返回的结果

4.处理服务器给的结果，渲染

var $ = () => {
    function _doAjax(opt) {
        var o = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Mocrosoft.XMLHTTP");
        if (!o) {
            throw new Error("您的浏览器不支持异步发起http请求");
        }
        var opt = opt || {},
            type = (opt.type || 'GET').toUpperCase(),
            async = "" + opt.async === 'false',
            dataType = opt.dataType || 'JSON',
            jsonp = opt.jsonp || 'cb',
            jsonpCallback = opt.jsonpCallback || 'jQuery' + randomNum() + '_' + new Date().getTime();
        (url = opt.url),
            (data = opt.data || null),
            (timeout = opt.timeout || 30000),
            (error = opt.error || function () { }),
            (success = opt.success || function () { }),
            (complete = opt.complete || function () { }),
            (t = null);

        if (!url) {
            throw new Error('您没有填写url')
        }

        if (dataType.toUpperCase() === 'JSONP' && type !== 'GET') {
            throw new Error('如果dataType为JSONP，type请您设置GET或不设置');
        }

        if (dataType.toUpperCase() === 'JSONP') {
            var oScript = document.createElement('script');
            oScript.src =
                url.indexOf('?') === -1 ?
                    url + "?" + jsonp + '=' + jsonpCallback :
                    url + '&' + jsonp + '=' + jsonpCallback;
            document.body.appendChild(oScript);
            document.body.removeChild(oScript);
            window[jsonpCallback] = function (data) {
                success(data);
            };
            return;
        }

        o.onreadystatechange = () => {
            if (o.readyState === 4) {
                if ((o.status >= 200 && o.status < 300) || o.status === 304) {
                    switch (dataType.toUpperCase()) {
                        case 'JSON':
                            success(JSON.parse(o.responseText));
                            break;
                        case 'TEXT':
                            success(o.responseText);
                            break;
                        case 'XML':
                            success(o.responseXML);
                            break;
                        default:
                            success(JSON.parse(o.responseText));
                    }
                } else {
                    error();
                }
                complete();
                clearTimeout(t);
                t = null;
                o = null;
            }
        };

        o.open(type, url, async);
        type === 'POST' &&
            o.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        o.send(type === 'GET' ? null : formatDatas(data));
        t = setTimeout(() => {
            o.abort();
            clearTimeout();
            t = null;
            o = null;
            throw new Error('本次请求已超时' + url);
        }, timeout);
    }
}

function formatDatas(obj) {
    var str = '';
    for (var key in obj) {
        str += key + '=' + obj[key] + '&';
    }
    return str.replace(/&$/, '');
}