原生Ajax五个基本步骤（面试题）

最新推荐文章于 2022-08-30 22:23:17 发布

原创最新推荐文章于 2022-08-30 22:23:17 发布 · 592 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #js

面试和理论知识同时被 2 个专栏收录

55 篇文章

订阅专栏

前端

25 篇文章

订阅专栏

本文介绍原生Ajax实现的基本步骤，包括创建XMLHttpRequest对象、设置请求方式与URL、发送请求等，并提供了一个简单的GET请求示例。

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

原生Ajax五个基本步骤（面试题）

参考网址:

https://blog.csdn.net/weixin_39218464/article/details/108680750?ops_request_misc=%25257B%252522request%25255Fid%252522%25253A%252522160854074716780299033272%252522%25252C%252522scm%252522%25253A%25252220140713.130102334.pc%25255Fall.%252522%25257D&request_id=160854074716780299033272&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allfirst_rank_v2~rank_v29-3-108680750.first_rank_v2_pc_rank_v29&utm_term=%E5%8E%9F%E7%94%9Fajax%E6%A8%A1%E6%9D%BF

在这里插入图片描述

1.五个步骤

AJAX = Asynchronous JavaScript and XML（异步 JavaScript 和 XML）。

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

XmlHttpRequest 是 ajax 的核心机制，它是在 IE5 中首先引入的，是一种支持异步请求的技术。

详细版本

1、创建ajax对象
var xhr = new XMLHttpRequest();
2、用ajax对象的open方法设置连接服务器的参数
xhr.open( method,url,async);
method:请求类型，post或get
url：请求文件的具体地址
async:：是否异步（true为异步，false为同步）
3、设置发送数据的头部，一般用来说明数据格式，如：
xhr.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
注： multipart/form-data（一般在发送文件时使用，以二进制形式发送）和application/json（发送json格式数据）
4、发送请求，xhr.send(数据)
方法参数中get方法时添null或不添，推荐用post方法
5、判断通讯状态或接收返回数据，这个是写在第三个步骤回调函数里边的

精简版本

创建 XMLHttpRequest 对象；

注册回调函数；

设置连接信息；

发送数据，与服务器开始交互；

接受服务器返回数据。

2.原生ajax的入门案例

后端使用的springmvc

NativeAjaxController

/**
 * @Auther: shaoming
 * @Date: 2020/12/21 16:41
 * @Description: 测试原生的ajax
 */
@RestController
public class NativeAjaxController {
    //1.测试原生的ajax-get请求-无参数
    @GetMapping("/nativeajaxnoparam")//get请求
    @ApiOperation(value = "", notes = "", httpMethod = "")
    public String nativeajaxnoparam() {
        return "1.测试原生的ajax-get请求-无参数";
    }
}

前端

nativeajax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试原生的ajax</title>
</head>
<body>
<button type="button" onclick="nativeajaxnoparam()">1.测试原生的ajax-get请求-无参数</button>
<script>
function nativeajaxnoparam(){
    //1、创建ajax对象
    var xhr = new XMLHttpRequest();
    // 2、绑定监听--监听服务器是否已经返回对应数据（回调函数)
    xhr.onreadystatechange=function () {
        alert(xhr.readyState);
        if(xhr.readyState==4&&xhr.status==200){
            //5、判断通讯状态或接收返回数据，这个是写在第三个步骤回调函数里边的
            var res=xhr.responseText;
            console.log(res);
        }
    }
    //3、绑定地址,及配置其他参数
    xhr.open("GET","http://localhost:8081/nativeajaxnoparam",true);
    //4、发送请求
    xhr.send();
}
</script>
</body>
</html>