AJAX发送get和post请求-优快云博客

本文链接：https://blog.youkuaiyun.com/lixingzhuo/article/details/129914124

文章详细介绍了如何使用XMLHttpRequest对象进行AJAX请求，包括创建对象、监听状态变化、处理GET和POST请求，以及处理不同状态码的情况。通过示例代码展示了AJAX如何发送GET和POST请求来更新页面内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

传统请求的缺点

XMLHTTPRequest对象的readyState属性

XMLHttpRequest对象是浏览器内置的一个对象，它可以向服务端发送请求
其中一个属性readyState可以记录XMLHttpRequest对象的状态
XMLHttpRequest对象的readystate属性对应的状态值
0: 请求末初始化
1: 服务器连接已建立
2: 请求已收到
3:正在处理请求
4:请求已完成且响应已就绪
因此，当readyState状态值变为4时，表示此时这个AJAX请求以及响应已经完成

AJAX

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>ajax get请求</title>
  </head>
  <body>
    <script type="text/javascript">
      //页面加载完毕后再执行回调函数
      window.onload = function() {
        //给按钮绑定单击事件
        document.getElementById("myButton").onclick = function(){
          //1：创建XMLHttpRequest对象
          const xmlHttpRequest = new XMLHttpRequest();
          //2:注册回调函数
          xmlHttpRequest.onreadystatechange = function (){
            //当readystate == 4，表示响应结束了
            if(this.readyState == 4){
              //获取响应的状态码
              if(this.status == 404){
                alert("对不起，您访问的资源不存在，请检查路径")
              }else if(this.status == 500){
                alert("对不起，服务器发生了严重的错误，请联系管理员")
              }else if(this.status == 200){
                // alert(this.responseText)
                //绑定div
                document.getElementById("myDiv").innerText = this.responseText
              }
            }
          }
          //3：开启通道
          xmlHttpRequest.open("GET", "/ajax/ajaxRequest1", true)
		  //open函数（第一个参数：请求的方式，第二个参数：URL，第三个参数是否是一个异步请求）	
          //4：发送请求
          xmlHttpRequest.send()
        }
      }
    </script>
    <input type="button" value="hello ajax" id="myButton">
    <div id="myDiv"></div>
  </body>
</html>

AJAX发送Get请求

      window.onload = function (){
          document.getElementById("btn").onclick = function (){
              //创建xml对象
              const xml = new XMLHttpRequest();
              //注册回调函数
              xml.onreadystatechange = function (){
                  if(xml.readyState == 4){
                      if(xml.status == 200){
                            document.getElementById("myDiv").innerHTML = this.responseText
                      }else{
                        //失败
                          alert(this.status)
                      }
                  }
              }
              const usercode = document.getElementById("usercode").value
              const username = document.getElementById("username").value
              //打开通道
              xml.open("GET", "/ajax/ajaxRequest2?usercode="+usercode+"&username="+username, true)
              //发送请求
              xml.send()

AJAX发送Post请求

window.onload = function (){
        document.getElementById("btn").onclick = function (){
          //创建对象
          const xhr = new XMLHttpRequest();
          //注册回调函数
          xhr.onreadystatechange = function (){
            if (xhr.readyState == 4) {
              if (xhr.status == 200) {
                document.getElementById("myDiv").innerHTML = this.responseText
              }else {
                alert(this.responseText)
              }
            }
          }
          //开启通道
          xhr.open("POST", "/ajax/ajaxRequest3", true)

          //使用AJAX模拟form表单提交数据（设置请求头的内容类型）
          xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
		  //设置请求头时。必须在open以后send之前
          var username = document.getElementById("username").value;
          var userpwd = document.getElementById("userpwd").value;
          //发送请求
          xhr.send("username="+username+"&password="+userpwd)