原生js对Ajax封装

最新推荐文章于 2025-05-13 15:11:40 发布

原创

最新推荐文章于 2025-05-13 15:11:40 发布 · 5.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

文章目录

封装

封装

1. AJAX 请求封装

函数就可以理解为一个想要做的事情，函数体中约定了这件事情做的过程，直到调用时才开始工作。

将函数作为参数传递就像是将一个事情交给别人，这就是委托的概念


/**

* 发送一个 AJAX 请求
* @param {String}  method 请求方法* @param {String}  url   请求地址* @param {Object}  params 请求参数
* @param {Function} done  请求完成过后需要做的事情（委托/回调）

*/
function ajax (method, url, params, done) {
   
   
	// 统一转换为大写便于后续判断
	method = method.toUpperCase()
	// 对象形式的参数转换为 urlencoded 格式
	var pairs = []
	for (var key in params) {
   
   
		pairs.push(key + '=' + params[key])
	}
	
	var querystring = pairs.join('&')
	var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')
	xhr.addEventListener('readystatechange', function () {
   
   
		if (this.readyState !== 4) 
			return
		// 尝试通过 JSON 格式解析响应体
		try {
   
   
			done(JSON.parse(this.responseText))
		} catch (e) {
   
   
			done(this.responseText)
		}
	})
	
	// 如果是 GET 请求就设置 URL 地址 问号参数
	if (method === 'GET') {
   
   
		url += '?' + querystring
	}
	
	xhr.open(method, url)
	// 如果是 POST 请求就设置请求体
	var data = null
	if (method === 'POST') {
   
   
		xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded')
		data = querystring
	}
	
	xhr.send(data)
}

ajax('get', './get.php', {
   
    id: 123 }, function (data) {
   
   
	console.log(data)
})
ajax('post', './post.php', {
   
    foo: 'posted data' }, function (data) {
   
   
	console.log(data)
 })

案例：正在加载中

在这里插入图片描述

jquery-ajax-event.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery全局事件处理函数</title>
  <style>
    .loading {
    
    
      display: none;
      position: fixed;
      background-color: rgba(255,0,0,.5);