Ajax get/post 方法封装

Posted 2020-06-13

 1 function get(url, options, callback){
 2     var xml = new XMLHttpRequest();
 3     xml.onreadystatechange(){
 4         if(xml.readyState === 4){
 5             if(xml.status >= 200 && xml.status < 300 || xml.status === 304){
 6                 callback(xml.responseText);
 7             }else{
 8                 throw new Error("请求未成功：" + xml.status )
 9             }
10         }
11     }
12     var seriUrl = url + ‘?‘ + serialize(options);
13     xml.open(‘get‘, seriUrl, true);
14     xml.send(null);
15 }
16 function serialize(data){
17     if(!data) return ‘‘;
18     var pairs = [], value;
19     for(name in data){
20         if(!data.hasOwnProperty(name)) continue;
21         if(typeof data[name] === ‘function‘) continue;
22         value = data[name].toString();
23         name = encodeURIComponent(name);
24         value = encodeURIComponent(value);
25         pairs.push(name + ‘=‘ + value);
26     }
27     return pairs.join(‘&‘);
28 }

上面封装了一个接受三个参数的get方法，分别为url, 以及一个options的键值对的配置对象，以及一个以Ajax请求成功返回的responseText为参数的回调函数。

第二个函数声明定义了一个序列化对象，将配置对象转化为一个可以传递的字符串。

封装一个接受一个对象作为发送数据的自定义post函数的话也差不多，都要用到serialize这个函数，无非是将serialize转化后的字符串通过send方法发送。

encodeURIComponent()是对统一资源标识符（URI）的组成部分进行编码的方法。它使用一到四个转义字符串来替换UTF-8编码字符串中的每个字符（只有由两个Unicode代理区字符组成的字符才用四个转义字符串编码）。

 

关于 encodeURIComponent()

参考 MDN:

https://developer.mozilla.org/zh-CN/docs/Web/javascript/Reference/Global_Objects/encodeURIComponent