位置: 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页面)

  • 抖店退货地址在哪里设置(抖店退货地址在哪里查看)

    抖店退货地址在哪里设置(抖店退货地址在哪里查看)

  • vivox30网速卡的原因是什么(vivo手机网速卡了怎么办)

    vivox30网速卡的原因是什么(vivo手机网速卡了怎么办)

  • 智学网打不开怎么办(智学网打不开是什么原因)

    智学网打不开怎么办(智学网打不开是什么原因)

  • 戴尔笔记本亮度被锁了(戴尔笔记本亮度调节没反应,一直最暗)

    戴尔笔记本亮度被锁了(戴尔笔记本亮度调节没反应,一直最暗)

  • 微信怎样设置别人不能加我好友(微信怎样设置别人看不到手机号码)

    微信怎样设置别人不能加我好友(微信怎样设置别人看不到手机号码)

  • iphone从安卓设备转移数据在哪里(iphone手机的“从安卓设备转移数据”)

    iphone从安卓设备转移数据在哪里(iphone手机的“从安卓设备转移数据”)

  • qq实名认证为什么还是未成年(qq实名认证为什么王者荣耀还是未成年)

    qq实名认证为什么还是未成年(qq实名认证为什么王者荣耀还是未成年)

  • 手机qq密保手机号怎么改(手机qq密保手机号怎么更换)

    手机qq密保手机号怎么改(手机qq密保手机号怎么更换)

  • 微信更换实名认证后果(微信更换实名认证需要绑定银行卡吗)

    微信更换实名认证后果(微信更换实名认证需要绑定银行卡吗)

  • ipv4地址中a类b类c类地址分别是如何定义的(ipv4地址中a类b类c类的网络号是)

    ipv4地址中a类b类c类地址分别是如何定义的(ipv4地址中a类b类c类的网络号是)

  • 喷雾器充电器一直绿灯怎么修(喷雾器充电器一直亮红灯怎么回事)

    喷雾器充电器一直绿灯怎么修(喷雾器充电器一直亮红灯怎么回事)

  • 美图t9上市时间(美图t9发售价多少)

    美图t9上市时间(美图t9发售价多少)

  • ipad充电几个小时充满(ipad充电几个小时最好)

    ipad充电几个小时充满(ipad充电几个小时最好)

  • 华为数据线叫什么(华为数据线叫什么头)

    华为数据线叫什么(华为数据线叫什么头)

  • 三星note10电池耐用吗(三星note10电池容量多少)

    三星note10电池耐用吗(三星note10电池容量多少)

  • 今日头条怎么取消点赞(今日头条怎么取消关注)

    今日头条怎么取消点赞(今日头条怎么取消关注)

  • iphonex换电池影响手机吗(苹果x换电池性能会提升吗)

    iphonex换电池影响手机吗(苹果x换电池性能会提升吗)

  • airpods序列号怎么查(airpods序列号怎么看是不是国行)

    airpods序列号怎么查(airpods序列号怎么看是不是国行)

  • 华为怎么关闭旁白(华为怎么关闭旁边那页)

    华为怎么关闭旁白(华为怎么关闭旁边那页)

  • 苹果7忘记锁屏密码(苹果7忘记锁屏密码刷机)

    苹果7忘记锁屏密码(苹果7忘记锁屏密码刷机)

  • ImageDrive.exe进程什么文件 ImageDrive是什么进程(image driver)

    ImageDrive.exe进程什么文件 ImageDrive是什么进程(image driver)

  • 大学毕业后,送了2个月外卖,哭了一整晚(大学毕业后送快递)

    大学毕业后,送了2个月外卖,哭了一整晚(大学毕业后送快递)

  • pwconv命令  开启用户的投影密码(pwcorr_a命令)

    pwconv命令 开启用户的投影密码(pwcorr_a命令)

  • bootstrap的基础使用(bootstrapstandby)

    bootstrap的基础使用(bootstrapstandby)

  • 投资性房地产在建
  • 金税盘数据迁移失败
  • 研发活动计入当期损益怎么计算
  • 综合所得减除费用标准
  • 发票必须用完才可以购买吗
  • 个体商户多少钱需要报税
  • 三栏式明细账月结
  • 单位部分承担个人借款利息个税的计算
  • 无偿赠送他人货物交增值税吗
  • 未开发票收入交增值税怎么做账?
  • 应付职工薪酬社保
  • 补充医疗保险 个人账户可以报销吗
  • 公司多久不做账会被注销?
  • 股权转让个人所得税
  • 原材料投资入股协议约定价值公允价值
  • 银行代收费业务会计分录
  • 财务物料消耗都有哪些
  • 公司注册资金未实缴可以申请破产吗
  • 防暑降温费如何做账
  • 多计提的冲回如何记账?
  • 怎么判断分红前已提取足够法定公积金?
  • 自有房屋的装修费计入长期待摊
  • 企业发工资扣缴个人承担部分如何做账?
  • 超市一般纳税人账务处理
  • php问卷调查系统课程设计
  • 谷歌第球
  • win10任务栏颜色怎么调
  • 非货币性资产交换补价大于25%的会计处理
  • php模板引擎执行时间
  • 通往海滩的木板有什么用
  • 建安企业账务处理 工程施工
  • linux中web服务器的安装,配置与测试
  • nvm安装教程
  • ZED2跑ORB-SLAM3+双目相机、IMU联合标定+显卡驱动与cuda/cudnn安装
  • pytorch新手入门
  • php curl_init
  • 负数发票的销售成本怎么做?
  • 帝国cms模板文件在哪
  • discuz去除底部
  • vuepress plugin
  • 进口增值税抵扣期限
  • 对附属单位补助的资金性质是财政预算资金
  • 应付职工薪酬账户期末余额可能是
  • 企业贷款利息可以开发票吗
  • 计提坏账准备对企业的影响
  • sqlserver存储过程if语句
  • SQL Server 2008 数据库有哪些版本?
  • Windows2003 SQL2005添加系统用户修改系统登录密码
  • centos执行sh
  • 新办公司实收资本怎么算
  • 以前年度损益调整借贷方向
  • 购买办公用品属于什么凭证类型
  • 报关单未申报做账怎么办
  • 购买货物运输费计入什么科目
  • 印花税的其他凭证指的是什么
  • 查定征收在哪一章
  • 股东注入资金转出股权
  • 固定资产清理包括什么会计科目
  • mysql 高效分页
  • 重装机兵
  • mysql 5.7.11 winx64.zip安装配置方法图文教程
  • linux系统基本指令
  • wdcp面板
  • windows xp操作
  • win8.1 升级
  • unetbootin教程
  • win7桌面图标变成了lnk
  • linux常用命令find
  • windows10用法
  • pdf在电脑上打开
  • win8电脑键盘全部失灵怎么办
  • 初学excel零基础教学视频
  • 批处理统计文件夹内文件大小
  • css选择器类选择器
  • 链接符怎么删除
  • javascript初级教程
  • 贵州税务机关
  • 湖南省国家税务局历任局长
  • 审计如何聚焦主责主业
  • 铁力杯四省冠军
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设