已上传至githubhttps://github.com/hajnalmin/ajaxJS.git
如果对你有帮助的话，就去给个星吧~么么哒~笔芯
ajax：一种请求数据的方式，不需要刷新整个页面；
ajax的技术核心是 XMLHttpRequest 对象；
ajax 请求过程：创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据；
调试过程中需要搭建apache服务
HTML文件如下：（有详细的注释）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>原生js的ajax</title> 6 </head> 7 <body> 8 <!-- 9 原生js封装ajax方法 10 11 --> 12 13 <script> 14 //1.处理get请求 15 function ajax(option){ 16 //1.实例化ajax 17 18 var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("microsoft.xmlhttp"); 19 20 //2.判断请求方式是否为get 21 var isGET = /get/i.test(option.method); 22 23 24 //3. 将json数据转换为字符串格式 属性名=值&。。。 25 var data = ""; 26 for(var i in option.data){ 27 //4.将数据拼成字符串 28 data +=i+"="+ option.data[i]+"&"; 29 } 30 31 //5.将处理好的数据字符串替换原有的数据 32 option.data = data; 33 34 //判断是否是get方法，如果是检查url中有没有？然后再把data数据加到？后 35 if(isGET){ 36 if(option.url.indexOf("?")<0){ 37 option.url+='?'; 38 } 39 option.url+=+"&"+option.data; 40 } 41 42 //6 判断是否启用缓存，如果不启用缓存 添加时间 43 if(!option.cache){ 44 //7向URL上补充时间 45 option.url+="&___="+new Date().getTime(); 46 } 47 //打开连接 48 xhr.open(option.method,option.url,option.async); 49 //7.如果是post请求则设置请求头 50 if(!isGET){ 51 xhr.setRequestHeader('content-type','application/xml-form-urlencoded'); 52 } 53 54 //8.发送请求 55 xhr.send(option.data); 56 //9.ajax状态改变时触发函数 57 xhr.onreadystatechange = function(){ 58 //判断ajax是否加载完成 59 if(xhr.readyState == 4){ 60 //判断页面是否请求成功 61 if(xhr.status == 200){ 62 option.success(xhr.responseText); 63 }else{ 64 option.error(xhr.status) 65 } 66 } 67 68 } 69 70 } 71 72 ajax({ 73 method:'get', 74 url:"01.php?name=Kitty", 75 async:true, 76 data:{age:12,sex:"girl"}, 77 cache:true, 78 sendBefore:function(xhr){ 79 console.log("loading···"); 80 }, 81 sendComplete:function(xhr){ 82 console.log("loading完成"); 83 }, 84 success:function(txt){ 85 console.log("请求成功，服务器返回数据为:"+txt); 86 }, 87 error:function(status){ 88 console.log("请求失败状态码为:"+status); 89 } 90 }); 91 92 </script> 93 </body> 94 </html>
PHP文件如下：（仅做测试用）
<?php echo 'get<pre>'; print_r($_GET); echo 'post<pre>'; print_r($_POST);
运行成功后的显示：
注意：如果不是在Apache服务器下，会显示以下信息
有什么问题欢迎交流沟通~大家一起学习~