MST
星途 面试题库

面试题:JavaScript中AJAX请求的基本步骤

请描述在JavaScript Web编程中,使用原生XMLHttpRequest对象实现一个简单的AJAX GET请求的基本步骤,并解释每个步骤的作用。
34.4万 热度难度
编程语言JavaScript

知识考点

AI 面试

面试题答案

一键面试
  1. 创建XMLHttpRequest对象
    const xhr = new XMLHttpRequest();
    
    • 作用:初始化一个新的XMLHttpRequest实例,这个实例将用于后续操作来发送HTTP请求和处理响应。
  2. 设置请求
    xhr.open('GET', 'your - url - here', true);
    
    • open方法的第一个参数指定请求方法,这里是GETGET用于从服务器获取数据。
    • 第二个参数是请求的URL,即要获取数据的服务器地址。
    • 第三个参数表示是否异步请求,true表示异步,这意味着在请求发送后,JavaScript代码不会等待响应返回就继续执行后续代码。
  3. 设置响应处理函数
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            const response = xhr.responseText;
            console.log(response);
        }
    };
    
    • onreadystatechange事件在readyState属性值发生变化时触发。readyState有不同的值,代表请求的不同阶段。
    • readyState === 4表示请求已完成,并且响应已准备好。xhr.status === 200表示服务器成功响应请求,状态码200是HTTP成功状态码。
    • 当满足上述条件时,xhr.responseText包含了服务器返回的文本数据,可以进行进一步处理,这里只是简单地打印到控制台。
  4. 发送请求
    xhr.send();
    
    • 作用:将请求发送到服务器。对于GET请求,send方法通常不传递参数。如果是POST请求,参数会作为send方法的参数传递。