Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >XMLHttpRequest的基本使用

XMLHttpRequest的基本使用

作者头像
岳泽以
发布于 2022-10-26 09:31:47
发布于 2022-10-26 09:31:47
54500
代码可运行
举报
文章被收录于专栏:岳泽以博客岳泽以博客
运行总次数:0
代码可运行

XMLHttpRequest(简称xhr)是浏览器提供的JavaScript对象,通过它,可以请求服务器上的数据资源,jQuery中的Ajax函数就是基于xhr对象封装出来的。

使用xhr发起GET请求

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//1.创建XHR对象
var xhr = new XMLHttpRequest()
//2.调用open函数,指定请求方式与URL地址
xhr.open('GET','URL地址')
//3.调用send函数,发起Ajax请求
xhr.send()
//4.监听onreadystatechange事件
xhr.onreadystatechange = function(){
    //4.1 监听xhr对象的请求状态readyState 与服务器响应的状态 status
    if(xhr.readyState === 4 && xhr.status === 200){
        //4.2 打印服务器响应回来的数据
        console.log(xhr.responseText)
    }
}

xhr对象的readyState属性

XMLHttpRequest对象的readyState属性,用来表示当前Ajax请求所处的状态,每个Ajax请求必然处于以下状态中的一个:

状态

描述

0

UNSENT

XMLHttpRequest对象已被创建,但尚未调用open方法

1

OPEND

open()方法已经被调用

2

HEADERS_RECEIVED

send()方法已经被调用,响应头也已经被接受。

3

LOADING

数据接受中,此时response属性中已经包含部分数据

4

DONE

Ajax请求完成,这意味着数据传输已经彻底完成或失败

使用xhr发起带参数的GET请求

使用xhr对象发起带参数的GET请求时,只需要在调用xhr.open期间,为URL地址指定参数即可:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
xhr.open('GET','htttp://www.abc.com/bcd?id=1')

这种在URL地址后面拼接的参数,叫做查询字符串。

定义:查询字符串(URL参数)是指在URL的末尾加上用于向服务器发送信息的字符串(变量)。

格式:将英文的 放在URL的末尾,然后再加上参数=值,想加上多个参数的话,使用 &符号进行分隔,以这个形式,可以将想要发送给服务器的数据添加到URL中。

使用xhr发起POST请求

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//1.创建XHR对象
var xhr = new XMLHttpRequest()
//2.调用open函数
xhr.open('POST','URL地址')
//3.设置Content-Type属性(固定写法)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencodee')
//4.调用send(),同时将数据以查询字符串的形式,提交给服务器
xhr.send('bookname=三国演义&author=罗贯中')
//5.监听onreadystatechange事件
xhr.onreadystatechange = function(){
    //5.1 监听xhr对象的请求状态readyState 与服务器响应的状态 status
    if(xhr.readyState === 4 && xhr.status === 200){
        //5.2 打印服务器响应回来的数据
        console.log(xhr.responseText)
    }
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022 年 09 月,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
原生AJAX请求教程
ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用。本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信.
老马
2018/07/31
2.8K0
异步编程Ajax的详解,并对其进行封装整理
对于Ajax,肯定很多小伙伴都听过甚至用过了,那么没听过的也不用着急,本文会对Ajax进行讲解,其次,一定还有一些人只用过JQuery封装好了的Ajax却对原生的Ajax并不了解,那么也不用着急,本文从最基本的Ajax开始讲起,然后最后会尽可能得模仿JQuery对其进行封装,让我刚才提到的两类人能对Ajax有进一步的了解。
@零一
2021/01/29
1.9K0
XMLHttpRequest
1. get请求 const xhr = new XMLHttpRequest() xhr.open('GET', '/api', false) xhr.onreadystatechange = () => { if (xhr.readyState === 4) { if (xhr.status === 200) { console.log(xhr.responseText) } } } xhr.send(null) 2. post请求 const xhr = new XML
愤怒的小鸟
2020/12/27
6870
AJAX 中创建 XMLHttpRequest 对象的方法和常用属性、方法
AJAX(Asynchronous JavaScript and XML)是一种用于在网页上进行异步数据交互的技术。通过 AJAX,我们可以在不重新加载整个网页的情况下,与服务器进行数据交换并更新部分页面内容。在实现 AJAX 的过程中,创建一个 XMLHttpRequest 对象是必不可少的。
网络技术联盟站
2023/07/07
9380
AJax(XHR+Get和Post+AJax的封装)
Ajax 技术核心是 XMLHttpRequest 对象(简称 XHR), Ajax指向服务器请求额外的数据而无须卸载页面(即刷新)
刘大猫
2025/05/29
1830
Ajax清晰请求步骤与代码
异步请求ajax的使用在前后台传递数据,优化用户体验起着至关重要的角色,那么下面给大家简单罗列了一下ajax请求的步骤与代码。
全栈程序员站长
2022/08/29
5680
原生——ajax
什么是Ajax?(前后端数据交互) Asynchronous JavaScript and XML(异步JavaScript和XML)
FinGet
2019/06/28
2.1K0
重走Ajax之路2
前一篇已经简单介绍了下Ajax的用法了(只是简单的GET请求),下面就来捣鼓下Ajax的其他内容
赤蓝紫
2023/03/16
7690
重走Ajax之路2
XMLHttpRequest对象的Get请求和Post请求的用法
XMLHttpRequest对象是一种用于发起HTTP请求的JavaScript API,它可以执行GET请求和POST请求,用于与服务器交换数据。这两种请求方法在用法上有一些区别,下面将详细介绍它们。
Power
2025/03/30
3230
原生JS实现一个Ajax跨域请求
Asynchronous JavaScript + XML(异步 JavaScript 和 XML), 其本身不是一种新技术,而是一个在 2005 年被 Jesse James Garrett 提出的新术语,用来描述一种使用现有技术集合的‘新’方法。
Dreamy.TZK
2020/09/01
3.6K0
Ajax与Comet
Ajax(Asynchronous JavaScript + XML的简写)可以向服务器请求数据而无需卸载(刷新)页面,带来更好的用户体验。 Ajax技术的核心是XMLHttpRequest对象(简称XHR)。
奋飛
2019/08/15
7890
Web前端-Ajax基础技术(上)
ajax是浏览器提供一套的api,用于向服务器发出请求,接受服务端返回的响应,通过javascript调用,实现通过代码控制请求与响应,实现网络编程。
达达前端
2019/07/03
1.6K0
Web前端-Ajax基础技术(上)
Ajax 的简介与使用
Ajax 的全称是 Asynchronous JavaScript and XML(即异步的 JavaScript 和 XML),是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术
Leophen
2019/08/23
1K0
javascript实现Ajax
文章目录 1. javascript实现Ajax 1.1. 定义 2. 实现的步骤 2.1. 创建XMLHttpRequest 2.2. 打开 2.3. 发送请求 2.4. 接收服务器响应数据 3. 实例 javascript实现Ajax 定义 异步的javascript和XML,实现异步提交功能的技术(XMLHttpRequest) 不响应页面的前提下,服务器可以响应其中的一小部分数据到页面上 实现的步骤 创建XMLHttpRequest 解决浏览器兼容问题 function getXHR(){ v
爱撒谎的男孩
2019/12/31
6960
AJAX 与跨域通信(一):AJAX
在远古时代,如果浏览器需要从服务器请求资源,其交互模式为 “客户端发出请求 -> 服务端接收请求并返回相应 HTML 文档 -> 页面刷新,客户端加载新的 HTML文档”,很显然,在这种情况下,即使只是为了更新部分数据,我们也不得不重新加载整个重绘的页面。而 AJAX 的出现解决了这个问题。
Chor
2019/11/08
1K0
AJAX 与跨域通信(一):AJAX
js异步处理方案
回调函数是最早的解决异步编程方法 原生ajax和setTimoue都是利用回调函数,在未来某一时刻执行指定方法
刘嘿哈
2022/10/25
3.1K0
重走Ajax之路1
Ajax:Asynchronous JavaScript+XML(异步 JavaScript+XML)的技术。它可以向服务器请求数据,而不刷新页面,即能够局部刷新,可以让用户有更好的用户体验。
赤蓝紫
2023/03/16
4250
重走Ajax之路1
2、原生AJAX
********************************** ajax *********************************
打不着的大喇叭
2024/03/11
1810
AJAX——百闻不如一见
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
泰斗贤若如
2019/06/18
6620
面试热门问题总结
基本在简历中若写到会用vue就会被问到这个问题,附上答案链接:剖析Vue原理&实现双向绑定MVVM - 前端足迹 - SegmentFault 思否
EchoROne
2022/08/15
3600
面试热门问题总结
相关推荐
原生AJAX请求教程
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档