Ajax基础教程之封装(三)

这篇文章将为你深入AJAX基础教程中的封装知识。通过实际案例，我们将详细介绍如何在实际应用中实现AJAX请求的封装，即使你是初学者也能轻松理解。

在上一篇文章中，我们介绍了一个简单的点击按钮获取新闻的例子。现在，我们的需求有所扩大，需要每隔一段时间自动更新新闻，而不仅仅是点击按钮时才进行更新。为了实现这一功能，我们需要添加一个定时器，并在定时器的每次触发时执行AJAX请求。由于我们将频繁地使用到AJAX请求，因此对其进行封装是非常必要的。接下来，我们来看一下如何对之前的JS代码进行封装。

我们需要明确封装函数的要点。封装的主要目的是将重复使用的代码提取出来，将变化的部分作为参数传递。在我们的例子中，变化的参数包括请求方式（GET/POST）、请求地址、请求数据以及在请求成功后的处理逻辑。我们可以将这四个参数作为函数的参数来定义一个名为ajax的函数：ajax(method, url, data, successCallback)。

接下来，我们需要处理不同请求方式下的数据传递方式。由于GET和POST请求的数据传递方式有所不同，我们需要在函数内部进行条件判断，以确定正确的数据传递方式。

我们需要处理一个关键问题：如何在success回调函数中使用XMLHttpRequest对象？在封装函数中，我们声明了变量xhr来表示XMLHttpRequest对象。这个变量在封装函数之外是不可用的。为了在success回调函数中能够使用这个数据，我们需要在调用success回调函数时，将xhr.responseText作为参数传递出去。这样，在success回调函数中就可以使用这个参数来处理服务器返回的数据了。

这种回调函数的使用方式在编程中非常常见。回调函数就是一个作为另一个函数参数的函数，并在另一个函数内部被调用。在这个例子中，success回调函数作为ajax函数的参数被传递，并在ajax函数内部被调用。通过回调函数，我们可以实现异步操作的结果处理，使得代码更加灵活和可复用。

让我们对AJAX进行一次美妙的封装之旅。想象一下，我们有一个神奇的函数，它可以轻松地与服务器交流，获取我们想要的数据。这就是我们的ajax函数。

封装后的ajax函数如下：

```javascript

function ajax(method, url, data, successCallback) {

var xhr = null;

try {

xhr = new XMLHttpRequest(); //尝试创建一个新的XMLHttpRequest对象

} catch (e) {

xhr = new ActiveXObject('Microsoft.XMLHTTP'); //如果浏览器不支持XMLHttpRequest，则使用ActiveXObject进行替代

}

// 如果请求方法是GET并且带有数据参数，那么将数据拼接到URL上

if (method === 'get' && data) {

url += '?' + data;

}

xhr.open(method, url, true); //初始化请求，并设置为异步模式

// 如果是GET请求，直接发送请求；否则设置请求头并发送数据

if (method === 'get') {

xhr.send();

} else {

xhr.setRequestHeader('content-type', 'application/x--form-urlencoded');

xhr.send(data);

}

// 当请求状态改变时执行的函数

xhr.onreadystatechange = function() {

if (xhr.readyState === 4) { // 如果请求已完成

if (xhr.status === 200) { // 如果服务器成功响应

successCallback && successCallback(xhr.responseText); // 执行成功回调函数，并传入服务器返回的数据

} else {

alert('出错了，错误码：' + xhr.status); // 如果服务器响应失败，弹出错误提示

}

}

};

}

```

如何使用这个函数呢？就像这样：

调用ajax函数获取新闻数据，并在页面上展示：

```javascript

ajax('get', 'getNews.php', '', function(data) {

var newsData = JSON.parse(data); // 将服务器返回的JSON字符串为JavaScript对象

var newsUl = document.getElementById('ul1'); // 获取新闻列表的元素

var html = ''; // 用于拼接HTML字符串的变量

// 遍历新闻数据，并构建HTML列表结构

for (var i = 0; i < newsData.length; i++) {

html += '

}

});

```

虽然这个封装已经相对简单实用，但仍有改进的空间。比如，当没有数据时，我们需要占位或者做一些额外的处理。相比于jQuery中的AJAX方法，我们的函数在数据格式和处理方式上还有待完善。这只是一个开始，未来的改进和补充值得期待。调用`cambrian.render('body')`来渲染页面主体部分。