Ajax-GET和POST使用_ajax get和post同时使用-CSDN博客

本文链接：https://blog.csdn.net/Yang_lan1/article/details/89789956

什么是Ajax?

AJAX是在不需要重新加载整个页面的情况下，与服务器交换数据并更新部分网页的艺术

如何使用Ajax？

GET请求

<body>
   <button>提交</button>
   <script>
       window.onload  = function(){
           var oBtn = document.querySelector('button');
           oBtn.onclick = function(){
               //1.创建一个异步对象
               var xmlhttp = new XMLHttpRequest();
               //2.设置请求方式和请求地址
               /*
                xmlhttp.open(method,url,async);
                method:请求的类型：GET或POST
                url:文件在服务器上的位置
                async；true(异步)或false(同步)，一般都使用异步
               */
               xmlhttp.open('GET','post.php',true);
               //3.发送请求
               xmlhttp.send();
               //4.监听状态的变化
               xmlhttp.onreadystatechange = function(){
                   if(xmlhttp.readyState == 4){
                    /*
                   0:请求未初始化
                   1：服务器连接已建立
                   2：请求已处接受
                   3：请求处理中
                   4：请求已完成，且响应已就绪
                   */
                       if(xmlhttp.status >=200 && xmlhttp.status <= 300 || xmlhttp.status == 304){
                           //状态码判断
                           console.log('接收到服务器返回的数据了');
                           console.log(xmlhttp.responseText);//返回请求到的数据
                       }else{
                           console.log('没有接收到服务器返回的数据了');
                       }
                   }
               }
           }
       }
   </script>
</body>

POST请求

<body>
   <button>提交</button>
   <script>
       window.onload  = function(){
           var oBtn = document.querySelector('button');
           oBtn.onclick = function(){
               //1.创建一个异步对象
               var xmlhttp = new XMLHttpRequest();
               //2.设置请求方式和请求地址
               /*
                xmlhttp.open(method,url,async);
                method:请求的类型：GET或POST
                url:文件在服务器上的位置
                async；true(异步)或false(同步)，一般都使用异步
               */
               xmlhttp.open('POST','post.php',true);
               //3.发送请求
               xmlhttp.send();
               //4.监听状态的变化
               xmlhttp.onreadystatechange = function(){
                   if(xmlhttp.readyState == 4){
                    /*
                   0:请求未初始化
                   1：服务器连接已建立
                   2：请求已处接受
                   3：请求处理中
                   4：请求已完成，且响应已就绪
                   */
                       if(xmlhttp.status >=200 && xmlhttp.status <= 300 || xmlhttp.status == 304){
                           //状态码判断
                           console.log('接收到服务器返回的数据了');
                           console.log(xmlhttp.responseText);//返回请求到的数据
                       }else{
                           console.log('没有接收到服务器返回的数据了');
                       }
                   }
               }
           }
       }
   </script>
</body>

AJAX在IE中的兼容问题

1.XMLHttpRequest()在IE5和IE6中不支持
解决方法：

 创建一个异步对象时
              var xmlhttp；
              if(window.XMLHttpRequest){
                 xmlhttp = new XMLHttpRequest();
              }else{
                 xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
                  
              }

2.Ajax在IE中的缓存问题
在IE浏览器中，如果通过Ajax发送GET请求，那么浏览器认为同一个URL只有一个结果
**解决方法：**请求地址按照如下格式编写

‘’post.php？t=’ + (new Date().getTime());