Ajax的原理以及原生封装

[Ajax工作原理和原生JS的ajax封装]

无论从ajax的出现还是从它的作用上来说，ajax对于前端无疑是意义重大的。甚至可以说，是ajax带来了前端这个行业。

一，定义：Asynchronous JavaScript and XML，意思是异步JS和XML；

解释下异步，异步是相对于同步来说的，同步即同时进行（累积多了就排队，一个一个执行，必须等上一个结束，才能到下一个），而异步就是执行到我了，我去旁边继续执行等结果，后面排队的继续不用等我结果出来再执行。

这是对于ajax的特点来设计的，因为ajax对后端数据的请求需要时间，而这个时间不利用起来就是浪费。当然，如果必须要等前一个的结果怎么办，这就使用到JS中的重要部分——回调函数了，其实回调在JS中应用很多，只是我们对它没有概念而已，像点击事件执行的就是回调（先绑定事件，只有在点击发生时，才会执行）。那么ajax也一样，先请求数据，只有在状态改变时才会执行接下来的（这个状态包括请求成功和请求失败）。

二，ajax特点：AJAX 是一种用于创建快速动态网页的技术，对网页的某部分进行更新，不用刷新整个网页。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

三，ajax工作原理：先上一张图，ajax实现的就是浏览器和服务器之间的数据交互

image

四，ajax的核心：

—XMLHTTPRequest对象，（是对象，就有属性和方法）

—常用的方法：open("method", "url", "async")，

method表示通过什么方式进行服务器访问，包括get和post；

url表示访问服务器的地址；

async表示是否异步，包括true和false（注意：true表示异步）。

send(content)，

content表示向服务器发送的数据。

下面进行说明：

1. 向服务器请求状态的阶段：

onreadystatechange表示请求状态改变的事件触发器，

readystate表示请求状态，4表示完成，具体如下表：

image

2. 服务器反馈阶段：

status表示http请求状态码，200表示成功，具体如下表：

image

3. 服务器反馈的内容：（数据）

responseText表示响应返回的文本，具体如下表：

image

（图片转载自https://blog.csdn.net/limuzi13/article/details/53636830?utm_source=itdadao&utm_medium=referral）

五、原生JS的ajax封装

function ajax(opt) {
    var default_opt = {
        url: '',
        method: 'POST',
        async: true,
        data: null,
        callback: null,
    }
    var newOpt = Object.assign(default_opt, opt);
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            newOpt.callback && newOpt.callback(xhr.responseText)
        }
    }
    var search = ''
    if (newOpt.method.toUpperCase() === 'GET') {
        search = '?' + Object.keys(newOpt.data).map(function (k) {
            return k + '=' + newOpt.data[k];
        }).join('&');
    }
    xhr.open(newOpt.method,newOpt.url+search,newOpt.async)
    var data={}
    if(newOpt.method.toUpperCase() === 'POST'){
      xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
      data=JSON.stringify(newOpt.data);
    }
    xhr.send(data);


}

几点说明：

• IE7及其以上版本中支持原生的 XHR 对象，因此可以直接用： var oAjax = new XMLHttpRequest();
  IE6及其之前的版本中，XHR对象是通过MSXML库中的一个ActiveX对象实现的。使用下面的语句创建： var oAjax=new ActiveXObject(’Microsoft.XMLHTTP’);

• GET 请求方式是通过URL参数将数据提交到服务器的，POST则是通过将数据作为 send 的参数提交到服务器；POST 请求中，在发送数据之前，要设置表单提交的内容类型；