AJAX--XMLHttpRequest的方法_ajax xmlttprequest-CSDN博客

本文详细介绍了如何使用XMLHttpRequest进行Ajax操作，包括创建对象、设置请求方法、发送请求和处理响应结果。通过实例代码展示了在实际项目中的应用。

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

AJAX–XMLHttpRequest

XMLHttpRequest是浏览器内置的一个构造函数，作用是：基于new出来的XMLsHttpRequest实例对象，可以发起Ajax的请求。
axios中的axios.get()、axios.post()等方法，都是基于XMLHttpRequest封装的。

使用XMLHTTPRequest进行ajax的操作的四个步骤为：

1.创建对象 (使用new进行创建)

const xhr = new XMLHttpRequest();

或：

在js中，windows是最顶级对象，代表了一个窗体。

var xhr;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xhr=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xhr=new ActiveXObject("Microsoft.XMLHTTP");
	}

调用xhr.open()函数进行初始化

//2.初始化 设置请求方法和 url
xhr.open('请求方式','请求路径');

如： xhr.open(‘GET’, ‘http://127.0.0.1:8000/server’);

调用xhr.send()函数进行发送

xhr.send();

进行事件绑定

 //4.事件绑定  作用:处理服务端返回的结果(所有的结果)
            //on <==> when 当....时候
            //readystate 是xhr对象中的属性,表示状态 有0 1 2 3 4这四个值
            //默认值为0 0表示未初始化  1表示open方法调用完毕 2表示send方法调用完毕  3表示服务端返回了部分结果  4表示服务端返回了所有的结果
            //change  改变时触发 (如: 下拉框中使用onchange)
            xhr.onreadystatechange = function() {
                // 判断 (服务端返回了所有的结果)  === 表示完全等于
                if (xhr.readyState === 4) {
                    //判断响应状态码 200 404 403 401 500
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // //处理结果  行 头 空行 体
                        // //1.响应行
                        // console.log(xhr.status); //响应码
                        // console.log(xhr.statusText); //响应字符串
                        // //2.所有响应头
                        // console.log(xhr.getAllResponseHeaders());
                        // //4.响应体
                        // console.log(xhr.response);

                        //设置result的文本
                        result.innerHTML = xhr.response;
                    } else {

                    }
                }

            }

完整代码

<body>
    <button>点击发送请求</button>
    <div id="result"></div>

    <!--     点击按钮发送请求    -->
    <script>
        //1.获取button元素
        //getElementsByTagName 获取多个  是数组 需要遍历一下  里面只有一个时需要加下标 [0]
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById('result');
        //2.绑定一个事件
        btn.onclick = function() {
            //进行ajax的操作的4个步骤:
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化 设置请求方法和 url
            xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
            //3.发送
            xhr.send();
            //4.事件绑定  作用:处理服务端返回的结果(所有的结果)
            //on <==> when 当....时候
            //readystate 是xhr对象中的属性,表示状态 有0 1 2 3 4这四个值
            //默认值为0 0表示未初始化  1表示open方法调用完毕 2表示send方法调用完毕  3表示服务端返回了部分结果  4表示服务端返回了所有的结果
            //change  改变时触发 (如: 下拉框中使用onchange)
            xhr.onreadystatechange = function() {
                // 判断 (服务端返回了所有的结果)  === 表示完全等于
                if (xhr.readyState === 4) {
                    //判断响应状态码 200 404 403 401 500
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // //处理结果  行 头 空行 体
                        // //1.响应行
                        // console.log(xhr.status); //响应码
                        // console.log(xhr.statusText); //响应字符串
                        // //2.所有响应头
                        // console.log(xhr.getAllResponseHeaders());
                        // //4.响应体
                        // console.log(xhr.response);

                        //设置result的文本
                        result.innerHTML = xhr.response;
                    } else {

                    }
                }

            }

        }
    </script>
</body>