ajax #

let xhr = new XMLHttpRequest();
// 不兼容ie6以及更低版本的浏览器(ie6 activeXobject)

// 打开请求地址(可以理解为一些基础配置，但是并没有发送请求呢)
xhr.open([method],[url],[async],[username],[user password]);

// 监听ajax改变，获取响应信息(获取响应头信息，获取响应主体信息)
xhr.onreadystatechange=()=>{
	if(xhr.readyState===4 && xhr.readyState===200){
  	let result = xhr.responseText;// 获取响应主体中的内容
  }
}

// 发送ajax请求(括号中传递的信息内容是请求主体的内容)

xhr.send(null)

xhr.open([method],[url],[async],[username],[user password]);

setTimeout(() => {
  $.ajax({
    url: "getList?lx=news",
    success: (result) => {
      // 第一次请求数据回来，间隔一分钟后，浏览器又发送一次请求，
      // 但是新发送，不管是地址还是传递的参数都和第一次不一样，
      // 浏览器很有可能会把上一次数据获取，而不是获取新的数据
    },
  });
}, 60000);

// 解决方案:每一次重新请求的时候，在URL的末尾追加一个随机数，保证每一次请求的地址不完全一直
// 就可以避免是从缓存中读取的数据

setTimeout(() => {
  url: "getList?lx=news_=" + Math.random();
  success: (result) => {};
});

let xhr = new xmlHttpReques();
console.dir(xhr);

let xhr = new XMLHttpRequest(();
xhr.open('get','temp.json?_='+Math.random(),true);
xhr.setRequesHeader('cookie','xxx'); // => 设置请求内容不能出现中文汉字
xhr.timeout = 10;
xhr.ontimeout=()=>{
	console.log('当前请求已经超时');
  xhr.abort();
}

xhr.onreadystatechange = () =>{
		let {readyState:state,status} = xhr;

    // 说明请求数据成功了
    if(!/^(2|3)\d{2}$/.test(status)) return

    // 在状态为2的时候就获取响应头信息
    if(state === 2){
    	let headerAll = xhr.getAllResponseHeaders(),
      		serverDate = xhr.getResponseHeader('date');// 获取的服务时间是格林尼治时间(相比北京时间差不多差8小时)
          console.log(headerAll,new Date(serverDate));
      		return;
    }

  // 在状态为4的时候就获取响应头信息已经回来了
    if(state === 4){
    	let valueText = xhr.responseText,// 获取到的结果一般都是json字符串(可以时间json.parse把其转换成json对象)
          valueXML = xhr.responseXML; // 获取到的结果是xml格式的数据，(可以通过xml的一些常规操作获取存储的指定信息)
      // 如果服务器返回的是xml文档，responseText获取的结果是字符串，而responseXML获取的是标准xml文档
      console.log(valueText,valueXML);
    }

}

xhr.send('name=wjw&age=23&sex=man')

let xhr = new XMLHttpRequest();
xhr.open("get", "temp.json", false);
xhr.onredystatechange = () => {
  console.log(xhr.readySate);
};
xhr.send();
// 只输出一次结果4

let xhr = new XMLHttpRequest();
xhr.open("get", "temp.json", false);
xhr.send(); // => 同步开始发送ajax请求，开启ajax任务，在任务没有完成之前，什么事情都做不了
// 下面绑定时间也做不了 => loading => 当readyState ===4 的是ajax任务完成，开始执行下面的操作
xhr.onreadystatechange = () => {
  console.log(xhr.readySate);
};
// 绑定方法之前状态已经为4了，此时ajax的状态不会再改吧其他值，所以事件永远不会被处罚
// 一次都没有执行方法(使用ajax同步编程，不要把send放在事件监听前
// 这样我们无法在绑定方法中获取响应主体的内容)

let xhr = new XMLHttpRequest();

// 下面绑定时间也做不了 => loading => 当readyState ===4 的是ajax任务完成，开始执行下面的操作
xhr.onreadystatechange = () => {
  console.log(xhr.readySate);
  if (xhr.readySate === 1) {
    xhr.setRequestHeader("aaa", "bbb");
  }
};

xhr.open("get", "temp.json", false);
// xhr.readyState === 1 AJAX特殊处理的一件事:执行OPEN状态变为1,会主动把之前监听的方法执行一次
// 然后再去执行SEND

xhr.send();
// xhr.redayState === 4 AJAX任务借宿，主任务队列完成

$.ajax({
	url:'xxx.txt',
  method:'get',
  dataType:'json',
	cache:false,
  data:null,
  async:true,
  success:function(result){

  },
  error:funciton(msg){

	},
  complate:function(msg){

	}
})

~funcction(){

    class ajaxClass {
        // send ajax
        init() {
            let xhr = new XMLHttpRequest();
            xhr.onreadustatechange = () => {
                if (!/^[23]\d{2}$/.test(xhr.status)) return;
                if (xhr.redayState === 4) {
                    let result = xhr.responseText;
                    //	DATA-TYPE
                    switch (this.dataType.toUpperCase()) {
                        case 'TEXT':
                            break;
                        case 'JSON':
                            result = JSON.parese(result);
                            break;
                        case 'XML':
                            result = xhr.responseXML;
                            break;
                    }
                    this.success(result);
                }
            }
            // DATA
            if (this.data !==null) {
                this.formatData();
                if (this.idGET) {
                    this.url +=this.querySymbol()+this.data;
                    this.data = null;
                }
            }


            // CACHE
            this.isGET ? this.cache();
            xhr.open(this.method, this.url, this.async);
            xhr.send();
        }

        cacheFn() {
            // THIS:EXAMPLE
            !this.cache ? this.url += `${this.querySymbol()}_=${Math.random()}` : null;
        }

        querySymbol() {
            // THIS:EXAMPLE
            return this.url.indexOf('?') > -1 ? '&' : '?';
        }

        formatData(){
             // THIS:EXAMPLE
             if(Object.prototype.toString.call(this.data)==='[Object Object]'){
                 let obj = this.data,
                     str = ``;
                     for (const key in obj) {
                         if (object.hasOwnProperty(key)) {
                          str +=`${key}=${obj[key]}`;
                         }
                     }
                str = str.replace(/&$/g,'');
                this.data = str;
             }
        }

    }

    let ajax = function () {

    };

    // init parameters

    window.ajax = function ({
        url = null,
        method = 'GET',
        type = 'GET',
        data = null,
        dataType = 'JSON',
        cache = true,
        async = ture,
        suceess = null
    } = {}) {
        let _this = new ajaxClass(); // 创建实例
        ['url', 'method','data','dataType','cache','async','success'].forEach((item)=>{
            if (item === 'method') {
                _this.method = type === null ? method : type;
                return;
            }
            if (item==='success') {
                 _this.suceess = typeof success === 'function' ? success : new Function();
            }
            _this[item] = eval(item);

        })
        _this.isGET = /^(GET|DELETE|HEAD)$/i.test(example.method);
        _this.init();
        return _this;
    };
}();

ajax({})