自制简易Ajax：仿jQuery实现get/post/jsonp请求

"这篇文章主要介绍了如何使用JavaScript实现一个简单的jQuery AJAX功能，包括GET、POST和JSONP请求。我们将不依赖jQuery的内置deferred模块，而是创建一个自定义的AJAX函数，以满足基本的网络数据交互需求。" 在JavaScript中，AJAX（Asynchronous JavaScript and XML）是一种创建动态网页的技术，允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。jQuery库中的$.ajax()方法使得开发者能够方便地进行AJAX操作，但为了理解其工作原理和实现自定义功能，我们可以尝试自己编写一个简易版的AJAX函数。 首先，我们需要定义一个函数，该函数接收一个配置对象作为参数，这个对象包含各种与请求相关的设置，例如URL、请求类型（GET或POST）、数据类型（JSON或text）等。下面是一些基本的配置选项： ```javascript var defaultOptions = { url: null, // 请求连接 type: 'GET', // 请求类型 data: null, // POST时的请求体 dataType: 'text', // 返回数据的类型 jsonp: 'callback', // JSONP请求的标志 jsonpCallback: 'jsonpCallback', // JSONP请求的函数名 async: true, // 是否异步 cache: true, // 是否缓存 timeout: null, // 设置请求超时 contentType: 'application/x-www-form-urlencoded', // 请求内容类型 success: null, // 请求成功回调函数 fail: null // 请求失败回调 }; ``` 接下来，我们需要实现AJAX的核心逻辑。在JavaScript中，我们可以使用`XMLHttpRequest`对象或者更现代的`fetch` API来发起HTTP请求。这里我们将使用`XMLHttpRequest`，因为它对老版本浏览器有更好的兼容性： ```javascript var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { // 代表请求已完成 if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) { // 成功 if (defaultOptions.dataType === 'json') { var data = JSON.parse(xhr.responseText); if (defaultOptions.success) { defaultOptions.success(data, xhr.statusText); } } else { if (defaultOptions.success) { defaultOptions.success(xhr.responseText, xhr.statusText); } } } else { // 失败 if (defaultOptions.fail) { defaultOptions.fail(xhr.statusText, xhr); } } } }; xhr.open(defaultOptions.type, defaultOptions.url, defaultOptions.async); if (defaultOptions.type === 'POST') { xhr.setRequestHeader('Content-Type', defaultOptions.contentType); xhr.send(defaultOptions.data); } else { xhr.send(); } ``` 对于JSONP请求，我们需要处理动态插入script标签以及回调函数的调用。因为JSONP利用的是动态创建`<script>`标签来加载跨域的JavaScript资源，并且通过在URL中添加回调函数名称来实现数据的传递。以下是JSONP的处理逻辑： ```javascript // 检查是否为JSONP请求 if (defaultOptions.dataType === 'jsonp') { var script = document.createElement('script'); script.src = defaultOptions.url + '?' + defaultOptions.jsonp + '=' + defaultOptions.jsonpCallback; window[defaultOptions.jsonpCallback] = function(data) { if (defaultOptions.success) { defaultOptions.success(data); } // 清理 delete window[defaultOptions.jsonpCallback]; script.parentNode.removeChild(script); }; document.head.appendChild(script); } else { // 使用XMLHttpRequest发送请求 // ... } ``` 现在，我们可以将这些代码封装到一个自定义的`ajax`函数中，并提供一个可选的配置对象： ```javascript var ajax = (function() { var defaultOptions = { // ... }; function sendRequest(options) { // ... } return function(options) { options = Object.assign({}, defaultOptions, options); sendRequest(options); }; })(); ``` 至此，我们已经创建了一个简易的AJAX函数，它可以处理GET、POST和JSONP请求，并支持自定义的成功和失败回调。这个实现虽然没有jQuery的$.ajax()那么强大和完善，但对于理解AJAX的工作原理和实现基础功能是足够了。在实际项目中，可以在此基础上扩展更多的功能，如错误处理、上传进度监控等。