简单的Ajax封装
- 2019 年 12 月 12 日
- 筆記
/* *参数说明： *opts: {'可选参数'} **method: 请求方式:GET/POST,默认值:'GET'; **url: 发送请求的地址, 默认值: 当前页地址; **data: string,json; **async: 是否异步:true/false,默认值:true; **cache: 是否缓存：true/false,默认值:true; **contentType: HTTP头信息，默认值：'application/x-www-form-urlencoded'; **success: 请求成功后的回调函数; **error: 请求失败后的回调函数; */ function ajax(opts){ //一、设置默认参数 defaults = { url : '', data : '', method : 'GET', aysnc : 'true', cache : 'true', ContentType : 'application/x-www-form-urlencode', success : function(){}, error : function(){} }; //二、用户参数覆盖默认参数 for(var key in opts){ defaults[key] = opts[key]; } //三、对数据进行处理 if(typeof defaults.data === 'object'){//处理data var str = ''; for(var key in defaults.data){ str += 'key'+'='+defaults.data[key]+'&'; } defaults.data = str.substring(0,str.length-1); } defaults.method = defaults.data.toupperCase();//处理method //处理缓存 defaults.cache = defaults.cache ? '':'&' + new Date().getTime(); if(defaults.method === 'GET' && (defaults.data || defaults.cache)){//处理url defaults.url +='?' + defaults.data + defaults.cache; } //四、开始编写ajax //1、创建ajax对象 var oXhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //2、与服务器建立联系，告诉服务器要请求什么文件 oXhr.open(defaults.method, defaults.url, defaults.async); //3、发送请求 if(defaults.method === 'GET'){ oXhr = send(null); }else{ oXhr.setRequestHeader("Content-type", defaults.contentType); oXhr = send(defaults.data); } //4、等待服务器回应 oXhr.onreadystatechange = function(){ if(oXhr.readyState === 4){ if(oXhr.status === 200){ defaults.success.call(oXhr, oXhr.responseText); }else{ defaults.error(); } } }; }
使用示例：
ajax({ url: '1.php', data: {name: 'ivan', sex: 'male', age: '23'}, success: function (data){ alert('返回数据是：' + data); } }); ajax({ url: '1.php', data: 'name=ivan&sex=male&age=23', cache: false, success: function (data){ alert('返回数据是：' + data); } });
关于ajax缓存 只要是URL相同的GET请求，浏览器会使用缓存(当然还要看服务器的Cache-Control/Expires/Last-Modified/ETag头的设置)。 只要是POST请求，浏览器都不会缓存。 不缓存的办法： 1、在服务端加header("Cache-Control: no-cache, must-revalidate");(如php中) 2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0"); 3、在ajax发送请求前加上anyAjaxObj.setRequestHeader("Cache-Control","no-cache"); 4、在 Ajax 的 URL 参数后加上"?fresh=" + Math.random(); //当然这里参数 fresh 可以任意取了 5、第五种方法和第四种类似，在 URL 参数后加上"?timestamp=" + new Date().getTime();
