面试题11：AJAX中XMLHttpRequest使用的五大步骤【原生ajax发送请求的五大步骤】

The..Fuir

已于 2022-09-09 10:11:05 修改

阅读量1.9k

点赞数 1

分类专栏：面试 javascript 文章标签： javascript

于 2022-04-20 11:29:19 首次发布

本文链接：https://blog.csdn.net/qq_51066068/article/details/124293153

版权

面试同时被 2 个专栏收录

152 篇文章 48 订阅

订阅专栏

javascript

122 篇文章 11 订阅

订阅专栏

面试官：请说一下AJAX中XMLHttpRequest有哪五大步骤

答：

1.创建XMLhttpRequest对象

2.使用open方法设置和服务器的交互信息

3.如果默认是json格式,那就可以不设置requestHeader,默认的发送的是json格式数据

4.发送请求

5.如果请求完成，并响应完成，获取到响应数据

先上代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="getRequest()">发送请求</button>
    <script>
        function getRequest(){
            //1.创建XMLhttpRequest对象
            var request=new XMLHttpRequest();
            //2.使用open方法设置和服务器的交互信息
            request.open('get','https://api.muxiaoguo.cn/api/lishijr');
            //3.如果默认是json格式,那就可以不设置requestHeader,这是默认的发送json格式数据
            request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
            //4.发送请求
            request.send();
            //5.如果请求完成，并响应完成，获取到响应数据
            request.onreadystatechange=function (){
                if(request.readyState===4&&request.status===200){
                    console.log(JSON.parse(request.responseText));
                }
            }
        }
    </script>
</body>
</html>
详解五大步骤

XMLHttpRequest

浏览器在XMLHttpRequest类上定义了它们的HTTP API,这个类的每个实例都表示一个独立的请求/响应对，并且这个对象的属性和方法允许指定请求细节和提取响应数据。

很多年前Web浏览器就开始支持XMLHttpRequest，并且其API已经到了W3C指定标准的最后阶段。同时W3C正在指定“2级XMLHttpRequest”标准草案。

XMLHttpRequest对象是AJAX的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest。

同步编程、异步请求、局部刷新

XMLHttpRequest使用方法

原生ajax发送请求步骤:

1.创建XMLHTTPRequest对象
var request = new XMLHttpRequest();
2.使用open方法设置和服务器的交互信息

open() 参数： 1.指定HTTP方法或动作，这个字符串不区分大小写，通常大家用大写字母来匹配HTTP协议。

取值可以为：GET/POST/HEAD/DELETE/OPTIONS/PUT

GET:用于常规请求，适用于URL完全指定请求资源，请求对服务器没有任何副作用，服务器的响应是可缓存的

POST:用于HTML表单，它在请求主体中包含额外数据，且这些数据常存储到服务器上的数据库中。相同URL的重复POST请求从服务器得到的响应可能不同，同时不应该缓存使用这个方法的请求。

登录/注册 1.需要提交表单格式的数据 2.安全性要求高

2.URL,请求的主体，是相对于文档的URL。跨域请求会报错。

3.Boolean类型的值，如果值为false代表同步请求，send()方法将阻塞直到请求完成。如果这个参数是 true 或省略，请求是异步的。不传的，忽略，因为我们需要的就是ajax的异步
request.open('get','https://api.muxiaoguo.cn/api/lishijr/')
3.设置requestHeader() 添加http请求头

在AJAX中，如果需要像 HTML 表单那样 POST 数据，需要使用 setRequestHeader() 方法来添加 HTTP 头。

然后在 send() 方法中规定需要希望发送的数据：setRequestHeader()方法需要在open()和send()方法之间调用。
语法
request.setRequestHeader(属性名称, 属性值);
常用的数据格式(编码可带可不带)

发送json格式数据
request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
发送表单数据
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');
发送纯文本(不指定Content-type时，此是默认值)
request.setRequestHeader('Content-type', 'text/plain; charset=utf-8');
发送html文本
request.setRequestHeader('Content-type', 'text/html; charset=utf-8');
4.设置发送的数据，开始和服务器端交互

send()

参数：

请求主体内容，如果没有，为null，或者省略。
request.send(); //调用send()之后,请求就会发送到服务器
5.取得响应，注册事件

发送请求后，会收到响应，收到响应后，XHR对象的以下属性会被填充上数据。
responseText：作为响应体返回的文本。

responseXML：如果响应的内容类型是"text/xml"或"application/xml"，那就是包含响应数据的 XML DOM 文档。

status：响应的 HTTP 状态。

statusText：响应的 HTTP 状态描述。

readyState：返回HTTP请求状态 0 open()尚未调用 UNSENT 1 open()已调用 OPENED 2 接收到头信息 HEADERS_RECEIVED 3 接收到响应主体 LOADING 4 响应完成 DONE

readystatechange 请求状态改变事件当readyState值改变为4或服务器的响应完成时，所有的浏览器都触发该事件

if(request.readyState === 4 && request.status === 200){}

6.如果请求完成，并且响应完成，可以获取到响应数据

The..Fuir

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
面试题11：AJAX中XMLHttpRequest使用的五大步骤【原生ajax发送请求的五大步骤】

面试官：请说一下AJAX中XMLHttpRequest有哪五大步骤答：1.创建XMLhttpRequest对象2.使用open方法设置和服务器的交互信息3.如果默认是json格式,那就可以不设置requestHeader,默认的发送的是json格式数据4.发送请求5.如果请求完成，并响应完成，获取到响应数据先上代码：<!DOCTYPE html><html lang="en"><head> <meta charset=.
复制链接

扫一扫