ajax,以和ajax的封装

什么是ajax

AJAX即“Asynchronous Javascript And XML”（异步javaScript和XML），
是指一种创建交互式网页应用的网页开发技术, 可以用于创建快速动态网页的技术，
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着
可以在不重新加载整个网页的情况下，对网页的某部分进行更新。刚好解决了传统方法的缺陷。

使用ajax的步骤

在我们通常使用ajax请求数据的时候,遵循5个步骤

1. 创建XMLHTTPRequest对象
2. 使用open方法设置和服务器的交互信息
3. 设置发送的数据,开始和服务器端交互
4. 注册事件
5. 更新页面

同步和异步

首先因为javascript是一门单线程的语言,一次只能执行一个任务,如果同时有多个任务的话就需要排队执行,这样就会产生很长的等待时间,所以javascript就把所有任务分成两种,同步任务和异步任务

• 同步任务: 浏览器在请求数据的过程中,不会一直等待,这段时间还可以做其他的操作
• 异步任务:浏览器在请求数据的过程中,会一直等待事件的相应,知道返回结果才会执行其他的操作

执行的过程中,同步任务会进入"主线程",而异步任务会进入"任务队列",而执行过程中"主线程"的任务执行完后才会开始执行"任务队列"的任务,简单理解就是同时有多个任务时,同步任务会先执行,全部执行完之后才开始执行异步任务

请求数据的方式--GET/POST

在我们使用ajax请求数据的时候我们也需要设置一下请求的方式,这里就提一下get方式和post的方式

GET请求

get请求用于向服务器查询某些信息,必要时,需要在get请求的url后面添加查询的字符串参数. 对于XHR来说,查询字符串必须正确编码后添加到url之后,然后再传给open()方法

POST请求

post请求一般用于向服务器发送应该保存的数据,每个post请求都会在请求体中携带提交的数据.在这里post的请求体可以包含非常多的数据,而且数据可以是任何格式. 如果要初始化post请求,只需要给open()方法的第一个参数传"post"即可

最后我们来总结下get请求和post请求有哪些区别

使用ajax

接下来就让我们一起创建ajax吧

1. 创建ajax对象

var xhr = new XMLHttpRequest();

2. 设置open方法----open(参数1,参数2,参数3)

• 参数1 : 请求的方式 get/post
• 参数2 : 请求的地址
• 参数3 : 是否异步----- true异步/false同步

xhr.open('get','./data/1.txt',true);

3. 使用send()方法发送信息

xhr.send();

4. 等待服务器返回信息

• 事件监听ajax的状态 : onreadystatechange

• ajax的状态 : readyState

             0     (初始化)还没调用open()方法<br />                 1     (载入) 已调用send()方法，正在发送请求<br />                 2     (载入完成) send()方法完成，已收到全部响应内容<br />                 3     (解析)正在解析响应内容<br />                 4     (完成)响应内容解析完成，可以在客户端调用了
  

• 服务器的状态 : status

             1开头：消息<br />                 2开头：成功<br />                 3开头：重定向<br />                 4开头：请求错误<br />                 5开头：服务器错误
  

• 数据: responseText

xhr.onreadystatechange = function(){
    // ajax成功
    if(xhr.readyState === 4){
        // 服务器成功返回
        if(xhr.status === 200){
            console.log(xhr.responseText);
        }
    }
}

get方式

get方式的数据是放在地址里面的,要加一个?,数据放在?后面

 // 1、创建ajax对象{}
  var xhr = new XMLHttpRequest();
  // 2、open（参数1，参数2，参数3）
  xhr.open('get','./data/1.txt?count=10',true);

  // 3、send() 发送信息
  xhr.send();
  // 4、注册事件 onreadystatechange 状态改变就会调用
  xhr.onreadystatechange = function(){
      // ajax成功
      if(xhr.readyState === 4){
          // 服务器成功返回
          if(xhr.status === 200){
              console.log(xhr.responseText);
          }
      }
  }

post方式

post请求一定要在send()方法前面设置请求头才行,不然就会报错

 // 1、创建ajax对象{}
  var xhr = new XMLHttpRequest();
  // 2、open（参数1，参数2，参数3）
  xhr.open('POST','./data/1.txt',true);
  // post请求一定要send前设置请求头才行不然会报错  编码方式
  xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");

  // 3、send() 发送信息
   // 发送请求，数据作为参数传入
   xhr.send('name=name&age=1808');
  // 4、注册事件 onreadystatechange 状态改变就会调用
  xhr.onreadystatechange = function(){
      // ajax成功
      if(xhr.readyState === 4){
          // 服务器成功返回
          if(xhr.status === 200){
              console.log(xhr.responseText);
          }
      }
  }

封装ajax

因为我们会经常用到ajax请求数据,包括很多时候我们也会对ajax进行二次封装,所以接下来我们一起封装一下吧

function ajax(methods, url, data, callback) {
    // 创建ajax对象
    var xhr = new XMLHttpRequest();

    if (methods.toLowerCase() === 'get') { //在这里统一转成大写或者小写
        // get请求
        if (data) {
            url  = '?'   data;
        }
        xhr.open('get', url, true);
        xhr.send();
    } else if (methods.toLowerCase() === 'post') {
        // post请求
        xhr.open('post', url, true);
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.send(data);
    }

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                // 请求成功
                callback && callback(xhr.responseText);
            } else {
                // 报错
                throw new Error('请求失败，错误码是：'   xhr.status);
            }
        }
    }
}

完美封装ajax

// 防止 污染全局     将方法挂到widnow上
~ function (window) {
    // 如果使用低版本浏览器可能不识别常规写法,所以这里需要简单处理一下兼容问题
    // 处理IE 兼容问题
    function createXHR() {
        if (window.ActiveXObject) { //IE的低版本  ie 5 6 7 8 
            return new ActiveXObject("Microsoft.XMLHttp");
        } else { //标准  ie 9 10 11
            return new XMLHttpRequest;
        }
    }

    // ajax方法
    // options {...}
    function ajax(options) {
        //用户不传递是默认参数 传递了就是传递进来的参数

        // 默认的对象
        var _default = { //值都是默认值
            method: "get", //请求方式 默认值是get
            url: null, //请求的url地址
            async: true, //同步还是异步
            dataType: null, //返回的数据格式
            getHead: null, //获取响应头信息
            success: null, //获取响应主体内容  成功的回调
            error: null,//失败的回调函数
            complete: null //不管成功还是失败都调用-----可以知道请求是否接通
            setRequest: null, //设置请求头  
            data: null  //传入的数据格式
        };

        //将默认对象的值进行覆盖
        //循环遍历用户传递进来的对象   给默认对象重新赋值 
        for (var key in options) {
            // 只循环遍历私有的属性
            if (options.hasOwnProperty(key)) {
                _default[key] = options[key];
            }
        }

        //创建ajax实例
        var xhr = createXHR();

        // GET请求有缓存  如果是get请求处理缓存
        // 先转为小写 再进行比较
       // 中url后面接了个随机数，是为了欺骗浏览器或代理服务器用的；某些代理服务器会无视 no - cache 之类的标识，
        // 对响应结果进行强行缓存；而当url请求不改变的时候，有时候会导致浏览器不向服务器发送请求，
        // 而直接取调用缓存中的数据。加上随机数就是欺骗浏览器url改变了，要每次向服务器发送请求而不去调用缓存中的数据；
        // 还有另一种解决办法：
        // 在Jquery中有属性设置cache: false即可；
      
        if (_default.method.toLowerCase() === "get") {
            // url: "json/data.json?_=" Math.random(), //请求的url地址
            //   url: "json/data.json?name=哈哈&age=100&_="   Math.random(), //请求的url地址
            //如果用户传递的url  没有传递参数  ?_=" Math.random()  传递了&_="   Math.random()
            _default.url  = _default.url.indexOf("?") > 0 ? "&_="   Math.random() : "?_="   Math.random();
        }

        //配置请求参数
        xhr.open(_default.method, _default.url, _default.async);

        // 监听请求状态
        xhr.onreadystatechange = function () {
            // 请求状态成功
            if (/^2\d{2}$/.test(xhr.status)) {
                // ajax的处理进度为2  获取响应头信息
                if (xhr.readyState === 2) {
                    // 函数存在            将这个函数执行并且让这个函数中的this指向第一个参数
                    _default.getHead && _default.getHead.call(xhr);
                }
                // ajax处理进度为4    获取响应主体内容
                if (xhr.readyState === 4) {
                    // 服务器返回的数据
                    var jsonData = xhr.responseText;
                    if (_default.dataType &&_default.dataType.toUpperCase() === "JSON") {
                        // 转为JSON格式对象
                        jsonData = "JSON" in window ? JSON.parse(jsonData) : eval('('   jsonData   ')');
                    }
                    _default.success && _default.success.call(xhr, jsonData);
                }
            }
        }
        // 设置请求头信息
        _default.setRequest ? xhr.setRequestHeader("content-type", _default.setRequest) : null;

        //发送请求
        xhr.send(_default.data);
    }

    // 将自己的ajax函数挂载到window上
    window.ajax = ajax;
}(window);


  // 调用
   ajax({
     method:'post',
     url:'./data/data.json',
     success:function(data){
       console.log(data);
     }
   })

这篇好文章是转载于：学新通技术网