2022-04-02 ajax应用例子和封装一个自定义的Ajax类

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/123929700

1.自定义ajax请求方法

要求

文本框中输入是什么请求，点击发送按钮后弹出响应数据

代码

<label for="">请求方式:</label>
<input type="text" id="method">
<input type="button" value="Send" onclick="sendAjax()">
<script>
  function sendAjax() {
      var method = document.getElementById("method").value; //获取input文本框的文本
      var xhr = new XMLHttpRequest(); //创建请求对象
      xhr.open(method, "a.txt", true); //设置请求
      xhr.send(); //发送请求
      xhr.onreadystatechange = function() { //设置监听
          if (xhr.readyState == 4 && xhr.status == 200) { //xhr自身的状态&&http的状态
              alert("请求结果是:" + xhr.responseText); //获取响应数据
          }
      };
  }
</script>

输入结果

在这里插入图片描述
hello是a.txt中的文本内容

2.为请求添加参数

思路

通过下拉菜单选择请求方式,再输入请求内容
根据GET和POST两种请求方式的特点,把参数放在不同请求阶段

代码

<label for="">请求方式:</label>
<select id="method">
  <option value="GET">GET</option>
  <option value="POST">POST</option>
</select>
<br>
<label for="">请求内容:</label>
<input type="text" id="params">
<input type="button" value="Send" onclick="sendAjax()">
<script>
    function sendAjax() {
        var method = document.getElementById("method").value; //获取input文本框的文本
        var params = document.getElementById("params").value; //获取input文本框的文本
        var xhr = new XMLHttpRequest(); //创建请求对象
        if (method == "GET") { //get请求:参数直接放在URL后
            xhr.open(method, "a.txt?" + params, true); //设置请求
            xhr.send(); //发送请求
        } else if (method == "POST") { //post请求:参数通过send()函数写到请求内容中
            xhr.open(method, "a.txt?" + params, true); //设置请求
            xhr.send(params); //发送请求  
        }
        xhr.onreadystatechange = function() { //设置监听
            if (xhr.readyState == 4 && xhr.status == 200) { //xhr自身的状态&&http的状态
                alert("请求结果是:" + xhr.responseText); //获取响应数据
            }
        };
    }
</script>

结果

在这里插入图片描述

3.友好等待界面

思路

在readystate=4和status=200时不操作，否则loading。。。
别的不变把设置监听的部分加一层ifelse即可
html+css部分在最后加一个loading的结构和样式

代码

xhr.onreadystatechange = function() { //设置监听
    if (xhr.readyState == 4 && xhr.status == 200) { //xhr自身的状态&&http的状态
        alert("请求结果是:" + xhr.responseText); //获取响应数据
        loading.style.display = "none";
    } else {
        loading.style.display = "block";
    }
};

结果

在这里插入图片描述

4.根据不同的http返回代码进行不同的响应

思路

就是把xhr.status等于或不等于200的其他情况做一个ifelse分析

代码

xhr.onreadystatechange = function() { //设置监听
    if (xhr.readyState == 4) { //xhr自身的状态
        loading.style.display = "none";
        if (xhr.status == 200) { //http状态码:正常
            alert("服务器正常返回!");
        } else if (xhr.status == 404) { //URL不存在
            alert("网页不存在!")
        } else if (xhr.status == 500) { //服务器内部出现错误
            alert("服务器内部错误!");
        }
    } else {
        loading.style.display = "block";
    }

5.ajax传输JSON数据

思路

就是xhr.status为200时，把JSON数据显示出在下方

知识点:eval()函数

语法:eval(expression[, globals[, locals]])
其中,expression是表达式,globals是全局命名空间,locals是局部命名空间
示例:

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #loading {
        border: 1px solid black;
        background: yellow;
        display: none;
        height: 20px;
        width: 100px;
    }
</style>
<body>
<label for="">请求方式:</label>
<select id="method">
	<option value="GET">GET</option>
	<option value="POST">POST</option>
</select><br>
<label for="">请求内容:</label>
<input type="text" id="params">
<input type="button" value="Send" onclick="sendAjax()">
<br><span id="loading">loading...</span><br>
<p id="content"></p>
<script>
    function sendAjax() {
        var method = document.getElementById("method").value; //获取input文本框的文本
        var params = document.getElementById("params").value; //获取input文本框的文本
        var loading = document.getElementById("loading"); //获取节点
        var content = document.getElementById("content"); //获取节点
        var xhr = new XMLHttpRequest(); //创建请求对象
        if (method == "GET") { //get请求:参数直接放在URL后
            xhr.open(method, "getmethod.php?" + params, true); //设置请求
            xhr.send(); //发送请求
        } else if (method == "POST") { //post请求:参数通过send()函数写到请求内容中
            xhr.open(method, "getmethod.php?" + params, true); //设置请求
            xhr.send(params); //发送请求  
        }
        xhr.onreadystatechange = function() { //设置监听
            if (xhr.readyState == 4) { //xhr自身的状态
                loading.style.display = "none";
                if (xhr.status == 200) { //http状态码:正常
                    var resp = xhr.response; //响应文本
                    var str = '学生信息:<br>姓名,年龄<br>';
                    var obj = JSON.parse(resp);//{"name":"zhangsan","age":18}
                    for (var key in obj) {str += obj[key];}//把obj的所有value加到str中
                    content.innerHTML = str;
                } else if (xhr.status == 404) { //URL不存在
                    alert("网页不存在!")
                } else if (xhr.status == 500) { //服务器内部出现错误
                    alert("服务器内部错误!");
                }
            } else {
                loading.style.display = "block";
            }
        };
    }
</script>
</body>
</html>

结果

在这里插入图片描述

6.自定义一个ajax类

代码

<input type="button" onclick="sendAjax()" value="Send">
<script>
    function Ajax(url, callback, params, method) {
        this.url = url; //请求URL
        this.callback = callback; //回调
        this.params = params; //请求参数
        this.method = method; //请求方法
        // 1.创建请求对象
        window.Ajax.xhr = new XMLHttpRequest();
        // 2.设置和发送请求
        this.send = function() { //请求发送函数
            if (!this.method) { //若未指定请求方式就默认为GET请求
                this.method = "GET";
            } else { //指定请求方式
                if (this.method == "GET") {
                    window.Ajax.xhr.open(this.method, this.url + "?" + this.params, true);
                    window.Ajax.xhr.send(); //调用send()函数
                } else if (this.method == "POST") {
                    window.Ajax.xhr.open(this.method, this.url, true);
                    window.Ajax.xhr.send(this.params); //调用send()函数
                }
            }
            // 3.设置监听
            window.Ajax.onreadystatechange = function() {//注意这里不是window.Ajax.xhr,找半天bug的地方
                if (window.Ajax.xhr.readyState == 4 && window.Ajax.xhr.status == 200) {
                    callback(); //调用回调函数
                }
            };
        };
    }

    function sendAjax() {
        var ajax = new Ajax('a.txt', function() {
            alert(window.Ajax.xhr.responseText);
        }, '', 'POST');
        ajax.send();
    }
</script>