位置: IT常识 - 正文

JS XMLHttpRequest对象详解

编辑:rootadmin
JS XMLHttpRequest对象详解 概念创建XMLHttpRequest对象建立连接发送get请求发送post请求异步响应状态readyState终止请求abort()获取XML数据获取和设置头部信息概念

推荐整理分享JS XMLHttpRequest对象详解,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

XMLHttpRequest对象,顾名思义:是基于XML的HTTP请求,是一个浏览器接口,XMLHttpRequest 用于在后台与服务器交换数据。

我们通过XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL获取数据。

创建XMLHttpRequest对象var xhr = new XMLHttpRequest();建立连接

在 JavaScript 中,使用 XMLHttpRequest 对象的 open() 方法可以建立一个 HTTP 请求。

xhr.open(method, url, async, username, password);

open方法包含5个参数:

method:HTTP 请求方法,必须参数,值包括 POST、GET 和 HEAD,大小写不敏感。url:请求的 URL 字符串,必须参数,大部分浏览器仅支持同源请求。async:指定请求是否为异步方式,默认为 true。如果为 false,当状态改变时会立即调用 onreadystatechange 属性指定的回调函数。username:可选参数,如果服务器需要验证,该参数指定用户名,如果未指定,当服务器需要验证时,会弹出验证窗口。password:可选参数,验证信息中的密码部分,如果用户名为空,则该值将被忽略。

建立连接后,可以使用 send() 方法发送请求。用法如下:

xhr.send(body);

参数 body 表示将通过该请求发送的数据,如果不传递信息,可以设置为 null 或者省略。

发送请求后,可以使用 XMLHttpRequest 对象的 responseBody、responseStream、responseText 或 responseXML 属性等待接收响应数据。

简单演示:

var xhr = creatXHR(); //实例化XMLHttpRequest 对象xhr.open ("GET", "server.txt", false"); //建立连接xhr.send(null); //发送请求console.log(xhr.responseText); //接收数据发送get请求

在 JavaScript 中,发送 GET 请求简单、方便,适用于简单字符串,不适用于大容量或加密数据。

实现方法:将包含查询字符串的 URL 传入 open() 方法,设置第 1 个参数值为 GET 即可。服务器能够通过查询字符串接收用户信息。

示例:

<input name="submit" type="button" id="submit" value="向服务器发出请求" /><script>var xhr = new XMLHttpRequest() //实例化XMLHttpRequest 对象 var b = document.querySelector("#submit"); //给b绑定事件 b.onclick = function (){ //这里使用php进行测试 // "server.php?callback=functionName"查询字符串通过问号?作为前缀附加在 URL 的末尾,发送数据是以连字符&连接的一个或多个名值对。 xhr.open("GET", "server.php?callback=functionName", false); //open方法的async参数如果为false,表示要求同步响应,当状态改变时会立即调用onreadystatechange 属性指定的回调函数。 xhr.send(null); //发送请求 console.log(xhr.responseText); //接收数据 }</script>发送post请求

在 JavaScript 中,POST 请求允许发送任意类型、长度的数据,多用于表单提交,以 send() 方法进行传递,而不以查询字符串的方式进行传递。 POST 字符串与 GET 字符串的格式相同。格式如下:

send("name1=value1&name2=value2...");JS XMLHttpRequest对象详解

示例:

<input name="submit" type="button" id="submit" value="向服务器发出请求" /><script>var xhr = new XMLHttpRequest() //实例化XMLHttpRequest 对象 var b = document.querySelector("#submit"); b.onclick = function () { xhr.open("POST", "server.php", false); //建立连接,要求同步响应 xhr.setRequestHeader ('Content-type', 'application/x-www-form-urlencoded'); //设置为表单方式提交 xhr.send("callback=functionName"); //发送请求 console.log(xhr.responseText); //接收数据 }</script>

在 open() 方法中,设置第一个参数为 POST,然后使用 setRequestHeader() 方法设置请求消息的内容类型为“application/x-www-form-urlencoded”,它表示传递的是表单值.

一般使用 POST 发送请求时都必须使用setRequestHeader()方法将请求消息的内容类型设置为表单类型,否则服务器无法识别传递过来的数据。

异步响应状态readyState

在 JavaScript 中,使用 readyState 属性可以实时跟踪异步响应状态。当该属性值发生变化时,会触发 readystatechange 事件,调用绑定的回调函数。readyState 属性值说明如表所示。 考虑到各种特殊情况,更安全的方法是同时监测 HTTP 状态码,只有当 HTTP 状态码为 200 并且readyState属性值为4时,说明 HTTP 响应顺利完成,那么就可以顺利的安全的读取响应数据。

HTTP状态码: status 0 代表请求未完成 status 200 代表一个成功的请求.

示例:

<input name="submit" type="button" id="submit" value="向服务器发出请求" /><script>var xhr = new XMLHttpRequest() //实例化XMLHttpRequest 对象 var b = document.querySelector("#submit"); b.onclick = function () { xhr.open("POST", "server.php", true); //建立连接,要求异步响应 xhr.setRequestHeader ('Content-type', 'application/x-www-form-urlencoded'); //设置为表单方式提交 xhr.send("callback=functionName"); //发送请求 xhr.onreadystatechange = function () { //绑定响应状态事件监听函数 if (xhr.readyState == 4 && xhr.status == 200) { //监听readyState状态和HTTP状态码 console.log(xhr.responseText); //接收数据 } } }</script>终止请求abort()

使用 abort() 方法可以终止正在进行的请求。用法为:

xhr.abort(); //终止请求//当一个请求被终止,它的 readyState 将被置为0,并且请求的 status 置为 0。获取XML数据

XMLHttpRequest 对象通过 responseText、responseBody、responseStream 或 responseXML 属性获取响应信息,说明如下表所示,它们都是只读属性。 在实际应用中,一般将格式设置为 XML、HTML、JSON 或其他纯文本格式。 具体使用哪种响应格式,可以参考下面几条原则。

如果向页面中添加大块数据,选择 HTML 格式会比较方便。如果需要协作开发,且项目庞杂,选择 XML 格式会更通用。如果要检索复杂的数据,且结构复杂,那么选择 JSON 格式更加轻便。获取和设置头部信息

HTTP 请求和响应都包含一组头部消息。

获取头部消息可以使用下面两个方法。

getAllResponseHeaders():获取响应的 HTTP头部消息。getResponseHeader(“Header-name”):获取指定的 HTTP 头部消息。

示例:

var xhr = new XMLHttpRequest;xhr.open("GET", "server.txt", true);xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.getAllResponseHeaders()); }}xhr.send(null);

如果要获取指定的某个头部消息.

示例:获取 Content-Type 头部的值,可以这样设计。

console.log(xhr.getResponseHeader("Content-Type"));

设置头部信息使用setResponseHeader()方法

用法如下:

xhr.setResponseHeader("Header-name", "value");

示例:使用 POST 方法传递表单数据,可以设置如下头部消息。

xhr.setResponseHeader("Content-Type", "application/x-www-form-urlencoded");
本文链接地址:https://www.jiuchutong.com/zhishi/292983.html 转载请保留说明!

上一篇:小程序 getActivePinia was called with no active Pinia. Did you forget to install pinia?(小程序开发一个多少钱啊)

下一篇:uniapp h5跳转微信小程序(wx-open-launch-weapp)(uniapp打开h5页面)

  • 网络发帖推广技巧(网上发帖做推广怎么发)

    网络发帖推广技巧(网上发帖做推广怎么发)

  • windows11安全中心怎么关闭(windows11安全中心实时保护关不了)

    windows11安全中心怎么关闭(windows11安全中心实时保护关不了)

  • oppor11怎么录屏(oppor11怎么录屏教程)

    oppor11怎么录屏(oppor11怎么录屏教程)

  • e5 2660相当于是什么cpu(e5 2660v4相当于)

    e5 2660相当于是什么cpu(e5 2660v4相当于)

  • 微信如何调为深色模式(微信如何调深色模式华为)

    微信如何调为深色模式(微信如何调深色模式华为)

  • bose无线蓝牙左耳不响(bose蓝牙左耳连不上)

    bose无线蓝牙左耳不响(bose蓝牙左耳连不上)

  • 华为深色模式在哪(华为深色模式在哪设置)

    华为深色模式在哪(华为深色模式在哪设置)

  • 电视奇异果怎么看卫视(电视奇异果怎么开弹幕)

    电视奇异果怎么看卫视(电视奇异果怎么开弹幕)

  • 荣耀30有没有呼吸灯(荣耀30有没有呼吸道灯)

    荣耀30有没有呼吸灯(荣耀30有没有呼吸道灯)

  • 笔记本进水了怎么办(笔记本进水了怎么办拯救者)

    笔记本进水了怎么办(笔记本进水了怎么办拯救者)

  • 荣耀品牌是华为系列吗(荣耀是品牌吗)

    荣耀品牌是华为系列吗(荣耀是品牌吗)

  • Word行距25磅怎么调(word文档行距25磅怎么设置)

    Word行距25磅怎么调(word文档行距25磅怎么设置)

  • 抖音直播间在哪里看(抖音直播间在哪里找)

    抖音直播间在哪里看(抖音直播间在哪里找)

  • se和11的区别(iphone se和11哪个好)

    se和11的区别(iphone se和11哪个好)

  • 小米手机无线充电充不进电(小米手机无线充电有哪几款?)

    小米手机无线充电充不进电(小米手机无线充电有哪几款?)

  • 计算机的应用领域有哪些(计算机的应用领域极为广泛但其应用最早的领域是)

    计算机的应用领域有哪些(计算机的应用领域极为广泛但其应用最早的领域是)

  • iphone11闪光灯上面是什么(iphone11闪光灯上面的麦克风没有)

    iphone11闪光灯上面是什么(iphone11闪光灯上面的麦克风没有)

  • 苹果x前置呼吸灯会闪么(苹果x前置呼吸灯不亮)

    苹果x前置呼吸灯会闪么(苹果x前置呼吸灯不亮)

  • 荣耀手环4怎么连接手机(荣耀手环4怎么开机)

    荣耀手环4怎么连接手机(荣耀手环4怎么开机)

  • 网易云怎么调音质(网易云怎么调音乐倍速)

    网易云怎么调音质(网易云怎么调音乐倍速)

  • 一嗨租车怎么申请双免(一嗨租车操作流程)

    一嗨租车怎么申请双免(一嗨租车操作流程)

  • qq看点图片社图片点进去显示不了(qq看点图标图片高清)

    qq看点图片社图片点进去显示不了(qq看点图标图片高清)

  • 红米怎样格式化(怎么格式化红米手机)

    红米怎样格式化(怎么格式化红米手机)

  • 小米8如何设置定时开关机(小米8如何设置不熄灭屏幕)

    小米8如何设置定时开关机(小米8如何设置不熄灭屏幕)

  • C盘垃圾太多?系统盘瘦身帮你解决(c盘垃圾太多需要重装系统嘛)

    C盘垃圾太多?系统盘瘦身帮你解决(c盘垃圾太多需要重装系统嘛)

  • JetBrains 官宣:2022.3 版本开始必须 Java 17!!(jetbrainsnews)

    JetBrains 官宣:2022.3 版本开始必须 Java 17!!(jetbrainsnews)

  • 企业所得税中资产折旧调整明细表中提示折旧年限
  • 旅游交什么税
  • 报废汽车增值税税率
  • 税务人员岗位有哪些
  • 增值税交多少怎么查询
  • 普通发票附注一般填什么
  • 供热管道属于什么经营范围内
  • 新准则金融资产科目名称
  • 上期留抵税额会计分录
  • 换出交易性金融资产入账价值
  • 小规模缴纳增值税税控系统可以抵扣么
  • 房地产开发企业预收款预缴增值税
  • 销售自产设备税率
  • 借款转资本公积怎么算税
  • 专用发票可以开安装费吗?
  • 报刊杂志广告文案写作
  • 未认证的增值税发票如何开具红字发票
  • 发票反写是什么时候
  • 租赁农民土地应该开发票吗
  • 我的初级备考经验--付出才有回报
  • 企业报税网上申报好了怎么导入
  • 收到代收款怎么做分录
  • win11如何修改任务栏颜色
  • 华为鸿蒙系统网速慢怎么解决
  • 何为小规模
  • 银行余额调节表例题和答案
  • 开房租发票交的税,因优惠政策退税,怎么账务处理
  • 电脑医生怎么卸载
  • windowsserver2019安装教程
  • Win11错误提示"the pc must support secure boot"怎么解决
  • 计提本月所得税费会计分录
  • php编程入门指南
  • 固定资产清理的审计目标不包括
  • echarts css
  • 零星分布的意思
  • php返回函数值的关键字
  • php中get_magic_quotes_gpc()函数说明
  • 详解16型人格
  • php调用微信扫描二维码
  • 达摩院 2021
  • 怎么搭建本地ota
  • 专票认证期限多长时间
  • 织梦相关文章调用
  • SQL SERVER 2000 9003错误的解决方法(只适用于SQL2000)
  • sqlserver的replace
  • 收到发票未收到货物
  • 增值税申报表填写顺序
  • 应该免税的增值税是什么
  • 一般纳税人增值税结转账务处理
  • 购入固定资产怎么抵扣企业所得税
  • 购进固定资产没有发票怎么入账
  • 增值税的专用发票金额含税吗
  • 购买原材料保险费分录
  • 费用报销单填写标准
  • 房屋租赁产生的税费叫什么
  • 赠送油卡需要代理吗
  • 怎么样打印自己想要的内容
  • 基金账户托管
  • 办公家具可以一次性抵扣吗?
  • 物流到付如何做账务处理
  • 自动软件脚本
  • centos调出命令行
  • vmware12安装教程图解
  • warning bios upgrade
  • 电脑出windows
  • linux中python命令
  • 恢复window
  • mac登录apple id一直转圈
  • centos为什么没有桌面
  • windows10总是提醒更新
  • bootstrap导航都有哪些
  • 浅谈特殊儿童的融合教育论文
  • android中使用md5后报非法延续字节
  • 接入hpool
  • ftp批量下载文件命令
  • linux读出文件
  • 防止重复调用接口
  • shell函数库
  • python消息队列感知消息被消费
  • 税控系统技术维护费每年都要交吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设