【JavaScript编程】ajax原生实现

AJAX

一、简介

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

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

二、XMLHttpRequest 对象

定义及作用：用于在后台与服务器交换数据

• 这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
• XMLHttpRequest 对象的属性和方法用于请求、响应、回调等，下面会详细介绍。

创建 XMLHttpRequest 对象

• 所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

  var xhr = new XMLHttpRequest();
  

• 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

  var xhr = new ActiveXObject("Microsoft.XMLHTTP");
  

三、向服务器发送请求

需要使用 XMLHttpRequest 对象的 open() 和 send() 方法：

• open(method,url,async)：规定请求的类型、URL 以及是否异步处理请求。

  method：请求的类型；GET 或 POST。
  url：文件在服务器上的位置 。
  async：true（异步）或 false（同步）。

• send()：将请求发送到服务器。

  GET 请求不需要带参数；
  POST 请求需要带上参数 data（请求的数据）。

GET 还是 POST

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

四、服务器响应

获得来自服务器的响应，需要使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性：

responseText：返回字符串形式的响应。如果来自服务器的响应并非 XML，请使用 responseText 属性。

document.getElementById("myDiv").innerHTML = xhr.responseText;

responseXML：获得 XML 形式的响应数据。如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：

xmlDoc = xhr.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++){
    txt = txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML = txt;

五、回调

当服务器响应时，需要执行相关任务。这个时候需要使用 XMLHttpRequest 对象的 onreadystatechange 事件。

onreadystatechange：存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState：XMLHttpRequest 请求的状态。

• 0：请求未初始化
• 1：服务器连接已建立
• 2：请求已接收
• 3：请求处理中
• 4：请求已完成，且响应已就绪

status：响应的状态

• 200：响应成功
• 404：未找到页面
• 500：服务器内部错误

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log(xhr.responseText)
        }
        else {
            alert('网络请求失败！')
        }
    }
}

六、封装 ajax

/**
 * @description ajax请求
 * @param {Object} param 请求相关数据
 */
function ajax(param) {
    // 初始化数据
    var method = param.method || 'GET'
    var url = param.url || ''
    var data = param.data || {}
    var async = param.async || true
    var success = param.success
    var error = param.error
    var complete = param.complete

    // 1.获取对象
    var xhr = null
    try {
        xhr = new XMLHttpRequest()
    }
    catch (e) {
        xhr = new ActiveXObject('Microsoft.XMLHTTP') // 兼容 IE5、IE6
    }

    // 2.设置请求信息 ---> 请求方式、路径、数据、是否异步
    if (data && method === 'GET') {
        url += '?' + _util.object.serialize(data) // 序列化对象，参照 https://blog.csdn.net/guang_s/article/details/87364440
    }
    xhr.open(method, url, async)

    // 3.发送请求
    if (method === 'GET') {
        xhr.send()
    }
    else {
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
        xhr.send(data)
    }

    // 4.设置回调函数
    xhr.onreadystatechange = function() {
        // 5.判断请求是否成功
        if (xhr.readyState === 4) {
            // 6.判断响应是否成功
            if (xhr.status === 200) {
                typeof success === 'function' && success(xhr.responseText) // 响应的内容 xml.responseText
            }
            else {
                typeof error === 'function' ? error(xhr.status) : alert('网络请求失败！')
            }
            typeof complete === 'function' && complete()
        }
    }
}