Ajax的GET与POST的请求方式

[smile1129]

Ajax

GET与POST的请求方式

1. GET请求方式

Ajax异步交互中使用GET请求方式的步骤

1. 将构建的请求数据添加到open()方法中的url地址中，示例代码如下：

     httpRequest.open('get',"http://127.0.0.1:5500/01-%E6%B5%8B%E8%AF%95XMLHttpRequest.html?user=185&pwd=456");

   上述示例代码中，"user=185&pwd=456"表示请求数据

       2. 将发送请求数据的send()方法中参数设置为null值，如下示例代码所示：

     httpRequest.send(null);

2. POST请求方式

Ajax异步交互中使用POST请求方式的步骤

1. 调用send()方法之前，需要通过XMLHttpRequest对象的setRequestHeader()方法设置请求头信息。

   httpRequest.setRequestHeader(header,value);

   header：将要被赋值的请求头名称。

   value：给指定的请求头赋的值。

   httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

2. 通过XMLHttpRequest对象的send()发送请求数据

3. 代码

   <script>
          var btn = document.getElementById('btn');
          btn.addEventListener('click',function(){
              // 实现Ajax的异步交互
   
              // 1.创建XMLHttpRequest对象
              var xhr = createXMLHttpRequest();
              /* 
                  4.利用XMLHttpequest对象的onreadystatecahnge事件
              */
              xhr.onreadystatechange = function(){ // 监听服务器端的通信状态
                  //console.log(xhr.readyState);
                  if(xhr.readyState === 4){
                      console.log(xhr.status);
                      if(xhr.status === 200){
   
                          console.log(xhr.responseText);
                      }
                  }
             }
              /* 
                  2. 调用XMLHttpResquest对象
              */        
              xhr.open('post',"http://127.0.0.1:5500/01-%E6%B5%8B%E8%AF%95XMLHttpRequest.html");
              // 设置请求头部信息
              xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
              /* 3. 调用XMLHttpResquest对象的send()方法
                      send()方法
                      * 如果是GET，send()方法只能传递null的值 -> 请求数据添加在地址中
                      * 如果是POST，send()方法传递请求数据
              */
              xhr.send("user=185&pwd=456");
   
              // 5. 将接受到的结果更新到HTML页面
          });
      </script>

4. 效果展示

   

[smile1129]

post

[smile1129]

delete

[smile1129]

get

[smile1129]

update