如何用原生js写Ajax请求？_原生js ajax responsetype-优快云博客

本文链接：https://blog.youkuaiyun.com/lb191258514/article/details/116432195

本文详细介绍了如何使用原生JavaScript编写Ajax请求，包括open方法的参数解析、send方法的使用、onreadystatechange回调函数的作用，以及Ajax的其他配置如setRequestHeader、timeout等。同时，阐述了Ajax的工作原理，强调其核心机制是XmlHttpRequest对象实现的异步请求，以无刷新方式更新页面。

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

如何用原生js写Ajax？

我们在node.js配置的服务器

// 创建应用对象
const app =express();

// 创建路由规则
app.get('/lb',(request,response)=>{
    // 设置允许跨域
    response.header("Access-Control-Allow-Origin","*");
    // 请求响应
    response.send('hello express 11111')
})
app.all('/lb',(request,response)=>{
    // 设置允许跨域
    response.header("Access-Control-Allow-Origin","*");
     // 响应头，允许接受所有请求头信息
    response.header("Access-Control-Allow-Headers","*");
    // 请求响应
    response.send('hello express post')
})
// 服务器监听
app.listen(8000,()=>{
    console.log('服务器已经启动....')
})

我们客户端通过绑定按钮点击事件来请求Ajax

<body>
   	<button>点击发送get </button>
    <button>点击发送post </button>
    <div>

    </div>
        <script>
            let btn =document.getElementsByTagName('button')[0]
				//绑定点击事件触发请求
            btn.addEventListener('click',function(){
                //1.创建对象
                let xhr =new XMLHttpRequest()
                //2.初始化 设置请求方法和url
                xhr.open('GET',url地址,false)
                //3.发送,send() 方法可将请求送往服务器。
                xhr.send()
                //4.事件绑定 处理服务器端返回的结果,onreadystatechange：存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执行。
                //readystate是xhr对象中的一个属性，存有服务器响应的状态信息,它的值状态分为0 1 2 3 4
                //0: 请求未初始化（代理被创建，但尚未调用 open() 方法）
                //1: 服务器连接已建立（open方法已经被调用）
                //2: 请求已接收（send方法已经被调用，并且头部和状态已经可获得）
                //3: 请求处理中（下载中，responseText 属性已经包含部分数据）
                //4: 请求已完成，且响应已就绪（下载操作已完成）
                xhr.onreadystatechange=function(){
                    //判断，当服务器返回所有结果时，也就是状态码等于4
                    if(xhr.readyState===4){
                        //判断响应码状态，一般2xx，2开头的响应码都是成功的
                        if(xhr.status>=200&&xhr.status<300){
                            //处理结果 行 头 空行 体
                            //1.响应行
                            console.log(xhr.status)//状态码
                            console.log(xhr.statusText)//状态字符串
                            console.log(xhr.getAllResponseHeaders())//所有响应头
                            console.log(xhr.response)//响应体，服务器端响应的数据
                        }
                    }

                }


            },false)


		    // post请求
            btn1.addEventListener('click',function(){
                //1.创建对象
                let xhr =new XMLHttpRequest()
                //2.初始化 设置请求方法和url
                xhr.open('POST','http://127.0.0.1:8000/lb')
                // 添加http头，post请求发送信息至服务器时定义内容编码类型
                  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                  //，如果要配置自定义请求头,服务器端的配置的post请求方式要改为all，并在服务器端配置配置允许所有请求头信息，
                   xhr.setRequestHeader('name','liubin')
                //3.发送,send() 方法可将请求送往服务器。post得请求参数可放在send里面
               
                xhr.send('a=1&b=2')
                // 设置响应体得类型
                xhr.responseType="json"
                //4.事件绑定 处理服务器端返回的结果,onreadystatechange：存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执行。
               
                // 响应超时设置
                xhr.timeout=2000
                // 响应超时得回调
                xhr.ontimeout=function(){
                    console.log('你的响应超时')
                }
                // 网络异常回调
                xhr.onerror=function(){
                    console.log('你的网络开小差了')
                }
                xhr.onreadystatechange=function(){
                    //判断，当服务器返回所有结果时，也就是状态码等于4
                    if(xhr.readyState===4){
                        //判断响应码状态，一般2xx，2开头的响应码都是成功的
                        if(xhr.status>=200&&xhr.status<300){
                            //处理结果 行 头 空行 体
                            //1.响应行
                            console.log(xhr.status)//状态码
                            console.log(xhr.statusText)//状态字符串
                            console.log(xhr.getAllResponseHeaders())//所有响应头
                            console.log(xhr.response)//响应体，服务器端响应的数据
                        }
                    }

                }


            },false)
            
            
        </script>
</body>

代码注释：

1.open(method, url, async) 初始化设置请求方法和url

open方法需要三个参数:

1.method：发送请求所使用的方法（GET或POST）；与POST相比，GET更简单也更快，并且在大部分情况下都能用；然而，在以下情况中，请使用POST请求：

①无法使用缓存文件（更新服务器上的文件或数据库）
②向服务器发送大量数据（POST 没有数据量限制）
③发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

2.url：规定服务器端脚本的 URL(该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）)；

3.async：规定应当对请求进行异步（true）或同步（false）处理；true是在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理；false是等待服务器响应再执行。可以省略这个参数。

2.send() 方法可将请求送往服务器。

在post的请求中，我们可以在send(‘a=1’)来携带请求参数

3.onreadystatechange回调函数

onreadystatechange：存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执行。

readyState：存有服务器响应的状态信息。

0: 请求未初始化（代理被创建，但尚未调用 open() 方法）
1: 服务器连接已建立（open方法已经被调用）
2: 请求已接收（send方法已经被调用，并且头部和状态已经可获得）
3: 请求处理中（下载中，responseText 属性已经包含部分数据）
4: 请求已完成，且响应已就绪（下载操作已完成）

4.Ajax的其他配置

setRequestHeader()：POST传数据时，用来添加 HTTP 头，然后send(data)，注意data格式；GET发送信息时直接加参数到url上就可以，比如url?a=a1&b=b1
```
 // 添加http头，post请求发送信息至服务器时内容编码类型
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
```

timeout来设置响应超时

 // 响应超时设置
  xhr.timeout=2000

ontimeout响应超时得回调

 // 响应超时得回调
 xhr.ontimeout=function(){
console.log('你的响应超时')
 }

onerror网络异常得回调

// 网络异常回调
 xhr.onerror=function(){
 console.log('你的网络开小差了')
}

responseType设置返回数据类型

 // 设置响应体得类型
xhr.responseType="json"

5.如何在响应之前终止请求

可以通过绑定事件来触发abort()方法

//可以写在事件回调函数内部，通过实例化的同一个对象调用abort（）
xhr.abort()

Ajax的原理：

Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。

XMLHttpRequest 是 ajax 的核心机制，它是在 IE5 中首先引入的，是一种支持异步请求的技术。简单的说，也就是 javascript 可以及时向服务器提出请求和处理响应，而不阻塞用户，达到无刷新的效果。