悠悠楠杉
网站页面
WebForm使用AJAX访问后端接口的两种方法小结
06/11
1.1 简介
XMLHttpRequest（XHR）是一个用于在后台与服务器交换数据的技术，它使得Web页面可以发送异步请求并接收响应，而不会干扰用户的浏览器体验。
1.2 实现步骤
创建 XMLHttpRequest 对象：
javascript var xhr = new XMLHttpRequest();配置请求：
javascript xhr.open('GET', 'backend-url/api', true); // 第三个参数为异步请求的标志，true为异步设置回调函数：
onreadystatechange：当请求状态改变时调用。
javascript xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { // 处理响应数据 console.log(xhr.responseText); } };
发送请求：
javascript xhr.send(); // 发送请求，如果是GET请求则不需要携带任何数据；如果是POST等请求，需在send前设置xhr.setRequestHeader()来指定Content-Type等头部信息。
1.3 优缺点
- 优点：不依赖任何外部库，直接使用原生的JavaScript实现，兼容性好。
- 缺点：代码相对繁琐，需要手动处理多种状态和错误处理，且只能处理JSON或纯文本等简单数据格式。
2. jQuery AJAX 方法
2.1 简介
jQuery的AJAX方法是一个更高级、更简洁的接口，它封装了XMLHttpRequest对象，简化了AJAX编程。jQuery的$.ajax()方法、$.get()、$.post()等都是基于原生的XHR对象实现的，但提供了更多的功能和更简单的语法。
2.2 实现步骤
- 引入jQuery库：首先需要在HTML文件中引入jQuery库。
```html
```
- 发送AJAX请求：使用jQuery的
$.ajax()方法。
javascript $.ajax({ url: 'backend-url/api', // 后端接口地址 type: 'GET', // 请求类型，如GET、POST等 success: function(data) { // 请求成功时的回调函数，data为服务器返回的数据 console.log(data); // 处理数据... }, error: function(xhr, status, error) { // 请求失败时的回调函数 console.error(error); // 处理错误... } });
或者使用更简单的$.get()或$.post()方法：
javascript $.get('backend-url/api', function(data) { // GET请求示例，第二个参数为回调函数处理返回的数据。不适用POST时使用POST的情况类似，只需替换为$.post()并传递第三个参数作为POST数据即可。 console.log(data); // 处理数据... });
