1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>Examples</title> 10 <script> 11 12 //将对象序列化 13 function params(data) { 14 var arg = []; 15 for (var i in data) { 16 arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i])); 17 } 18 return arr.join('&'); 19 } 20 21 //封装ajax 22 function ajax(obj) { 23 //创建xhr对象; 24 obj.xhr = new XMLHttpRequest(); 25 //后面随机数防止浏览器缓存 26 obj.url = url + "?rand=" + Math.random(); 27 //序列化对象 28 obj.data = params(obj.data); 29 //当是get请求时 30 if (obj.method = 'get') { 31 //当前面没设置随机数时 32 obj.url += obj.url.indexOf('?') == -1 ? '?' +obj.data : '&' + obj.data; 33 } 34 //异步调用 35 if (obj.async == true) { 36 //监听响应状态 37 xhr.onreadystatechange = function() { 38 if (xhr.readyState == 4) { 39 callback(); 40 } 41 }; 42 } 43 //启动HTTP请求 44 xhr.open(obj.method, obj.url, obj.aysnc); 45 //当是post请求时 46 if(obj.method === 'post') { 47 //模仿表单提交 48 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 49 //发送HTTP请求-post 50 xhr.send(obj.data); 51 } else { 52 //发送HTTP请求-get 53 xhr.send(null); 54 } 55 //同步调用 56 if (obj.async == false) { 57 callback(); 58 } 59 //回调函数传参 60 function callback() { 61 if (xhr.atatus == 200) { 62 obj.success(xhr.responseText); 63 } else { 64 alert("失败，失败状态码：" + xhr.status); 65 } 66 } 67 } 68 69 document.addEventListener('click', function() { 70 ajax({ 71 method: 'get', 72 url: 'demo3.php', 73 data: { 74 'name' = 'Lee', 75 'age' = 100 76 }, 77 success: function(text) { 78 alert(text); 79 }, 80 async = true 81 }); 82 }, false); 83 </script> 84 </head> 85 <body> 86 87 </body> 88 </html>