Node.js 搭建 web 程序之 AJAX请求服务端接口

小灰灰 2023-07-13 15:27 12阅读 0赞

在前几篇博文中，我分别介绍了`Node.js`的简单使用，本篇我将记录下`ajax`请求服务端接口，之前的博文链接分享在这里，大家前往翻阅查看。

[Node.js 搭建 web 程序 之 使用基础][Node.js _ web _ _]  
[Node.js 搭建 web 程序 之 路由配置][Node.js _ web _ _ 1]  
[Node.js 搭建 web 程序 之 连接MongoDB][Node.js _ web _ _ _MongoDB]

--------------------

#### 什么是`ajax`请求 ####

`ajax`是通过请求服务端响应，返回少量数据的一种技术，在此之前，向服务端请求数据一般使用`form`表单提交的方式，但随着时间的推移，这种方式慢慢的被淘汰掉。

--------------------

**`ajax`的优缺点**

`ajax`请求可以按需取数据，最大的减少了向服务端的请求，减轻了服务器的负担，当然在写代码的时候我们需要考虑浏览器的兼容性。

--------------------

**`ajax`的兼容性**  
可恶的`IE`在`IE5`及其之前，`ajax`请求是这样的

var xhr = new ActiveXObject('Microsoft.XMLHTTP')

但是`W3C`的标准是这样的

var xhr = new XMLHttpRequest()

**兼容性写法**

var xhr;
    if(window.XMLHttpRequest){ 
        xhr = new XMLHttpRequest()
    }else{ 
        xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }

--------------------

##### 绑定监听事件 #####

xhr.onreadystatechange = function(){ 
        console.log(xhr)
    }

xhr对象里记录着状态码`readyState`、响应码`status`和服务器返回的内容`responseText`

--------------------

**状态码readyState**  
状态码`readyState`记录者`ajax`请求的状态，从`0`到`4`，`0`代表着没有建立链接，`4`代表着`ajax`请求完成

**响应码`status`**  
响应码`status`记录着响应完成后的状态

<table> 
 <thead> 
  <tr> 
   <th>响应码</th> 
   <th>描述</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1xx</td> 
   <td>信息类错误</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>2xx</td> 
   <td>响应成功</td> 
   <td>200</td> 
  </tr> 
  <tr> 
   <td>3xx</td> 
   <td>重定向</td> 
   <td>304</td> 
  </tr> 
  <tr> 
   <td>4xx</td> 
   <td>客户端错误</td> 
   <td>404</td> 
  </tr> 
  <tr> 
   <td>5xx</td> 
   <td>服务端错误</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

**当状态码为4时，响应码为200时，请求成功**

xhr.onreadystatechange = function(){ 
        if(xhr.readyState == 4){ 
            if(xhr.status == 200){ 
                console.log(xhr.responseText)
            }
        }
    }

##### 发送请求 #####

xhr.open('GET','/jsonp',true)
    xhr.send(null)

#### 模拟登录注册接口 ####

**`html`样式**

**登录点击事件**

**node服务端接口**

**数据库里的数据**  
![在这里插入图片描述][20200313132718516.png]  
**账号密码正确**

![在这里插入图片描述][20200313132607553.png_pic_center]  
**账号密码错误**

![在这里插入图片描述][20200313132654857.png_pic_center]  
好了，一个简单完整的模拟接口完成了，Node.js 搭建web程序的记录就到这里结束了，我们直接向文件上到到自己的云主机上面就可以实现在线访问了，感兴趣的话还可以完善下增删改查。

[Node.js _ web _ _]: https://blog.csdn.net/qq_39157944/article/details/104711134
[Node.js _ web _ _ 1]: https://blog.csdn.net/qq_39157944/article/details/104789305
[Node.js _ web _ _ _MongoDB]: https://blog.csdn.net/qq_39157944/article/details/104796136
[20200313132718516.png]: /images/20230529/3926e8b8885d4cfd8430a8a2a4d922f7.png
[20200313132607553.png_pic_center]: /images/20230529/98db89d6347a4a5695b4425c6132b8d0.png
[20200313132654857.png_pic_center]: /images/20230529/7078ccd0e18f4568ad84f61f99818f32.png