标签：

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

将函数作为参数通报就像是将一个工作交给别人，这就是委托的观点

    封装：

    1. 写一个相比拟较完善的用例

    2. 写一个空函数，没有形参，，将刚刚的用例直接作为函数的函数体

    3. 按照使用过程中的需求抽象参数

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

<script> // 封装者============================= function ajax(method, url, params, done) { method = method.toUpperCase() var xhr = new XMLHttpRequest() if (typeof params === ‘object‘) { var tempArr = [] for (var key in params) { var value = params[key] tempArr.push(key + ‘=‘ + value) } params = tempArr.join(‘&‘) } if (method === ‘GET‘) { url += ‘?‘ + params } xhr.open(method, url, false) var data = null if (method === ‘POST‘) { xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘) data = params } xhr.onreadystatechange = function () { if (this.readyState !== 4) return // 不应该在封装的函数中主不雅观的措置惩罚惩罚响应功效 // console.log(this.responseText) // 你说我太主不雅观，那么你报告我应该做什么 done(this.responseText) } xhr.send(data) } // 挪用者============================ var onDone = function (res) { console.log(‘hahahahaha‘) console.log(‘hohohohoho‘) console.log(res) console.log(‘做完了‘) } ajax(‘get‘, ‘time.php‘, {}, onDone) </script>

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---根基的封装

标签：

原文地点：https://www.cnblogs.com/jane-panyiyun/p/12283461.html