标签:fun orm change case 一件事 完整 turn open ===
1.写出 AJAX 发送请求与接收响应的模板
const xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsot XMLHTTP"); xhr.open(‘get‘, ‘test.php‘); xhr.send(); xhr.addEventListener(‘readystatechange‘, function () { if (this.readyState === 4) { console.log(this.responseText); } }
2.写一个空函数然后将这个模板放进去
function ajax () {
const xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsot XMLHTTP");
xhr.open(‘get‘, ‘test.php‘); xhr.send(); xhr.addEventListener(‘readystatechange‘, function () { if (this.readyState === 4) { console.log(this.responseText); } }
}
3.最后根据变化量抽象参数,以及使用返回值
// params = null, 这是 ES6 中的语法,即默认参数,也就是:当这里没有参数传递进来的话,就默认为 null,有参数传递进来的话,就使用参数
function ajax (method, url, params = null, done) {
// 统一将方法转换为小写,因为调用,这样调用ajax()函数时 method 写大小写都可以 method = method.toLowerCase(); const xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsot XMLHTTP"); // 将 object 类型的数据转换为 key1=value1&key2=value2 这种形式的字符串 if (typeof params === ‘object‘) { let tempArr = []; for (let key in params) { let value = params[key];
// 将元素一个一个的放进这个空数组中 tempArr.push(key + ‘=‘ + value); } // console.log(tempArr); // join()方法:把数组中的所有元素放入一个字符串,并通过指定参数进行元素之间的分隔 params = tempArr.join(‘&‘); // console.log(params); }
// 当使用 get 方法传递参数,应该通过 url 传递参数 if (method === ‘get‘) { url += ‘?‘ + params; } xhr.open(method, url);
// 当使用 post 方法时,要设置响应头(当传递参数为 urlencoded 形式时)
// urlencoded 形式: key1=valule1&key2=value2 if (method === ‘post‘) { xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘); } xhr.send(params); xhr.addEventListener(‘readystatechange‘, function () { if (this.readyState !== 4) return; // 不应该在封装的函数中主观的处理响应结果 // console.log(this.responseText); // 无法在内部包含的函数中通过 return 的方式将返回值返回出去
// return this.responseText
// 这里使用了回调函数, // 执行调用者 done(this.responseText); }); }
回调:将函数作为参数传递,就好比是将一件事情交给另一个人做(也可以理解为委托)
在这个例子中,ajax异步请求由于函数内部包含返回响应体的函数,所以无法直接返回响应体,
因而,将 返回响应体 这件事委托给了 ondone 这一函数来做。
// 调用者
let ondone = function (res) { console.log(‘回调开始‘); console.log(res); console.log(‘回调结束‘); }
// 测试 ajax(‘get‘, ‘time.php‘, {}, ondone);
标签:fun orm change case 一件事 完整 turn open ===
原文地址:https://www.cnblogs.com/duxiu-fang/p/10914175.html