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

  • 怎样增加微博的关注量?(怎样增加微博的权重)

    怎样增加微博的关注量?(怎样增加微博的权重)

  • 新iphone和旧iphone一键换机(新iphone和旧iphone一键换机需要多久)

    新iphone和旧iphone一键换机(新iphone和旧iphone一键换机需要多久)

  • 长春坐公交怎么用微信支付(长春坐公交怎么刷码)

    长春坐公交怎么用微信支付(长春坐公交怎么刷码)

  • word如何删除整页(word如何删除整个页面)

    word如何删除整页(word如何删除整个页面)

  • 苹果8怎么给应用加密码(苹果8怎么给应用上密码锁屏)

    苹果8怎么给应用加密码(苹果8怎么给应用上密码锁屏)

  • p30如何升级到EMUI10(p30怎么升级)

    p30如何升级到EMUI10(p30怎么升级)

  • 小米8怎么拍出长曝光照片(小米8怎么拍出星星)

    小米8怎么拍出长曝光照片(小米8怎么拍出星星)

  • oppo指纹解锁特效怎么设置(oppo手机指纹锁)

    oppo指纹解锁特效怎么设置(oppo手机指纹锁)

  • 美图秀秀怎么换白底(美图秀秀怎么换头p图)

    美图秀秀怎么换白底(美图秀秀怎么换头p图)

  • 华为p30是几g手机(p30是几g的)

    华为p30是几g手机(p30是几g的)

  • 抖音号搜不到对方是被拉黑了吗(抖音搜不到对方抖音号)

    抖音号搜不到对方是被拉黑了吗(抖音搜不到对方抖音号)

  • 鼠标属于什么设备(鼠标属于什么设置)

    鼠标属于什么设备(鼠标属于什么设置)

  • 投诉状态已抢单是什么意思(投诉成立的订单还可以撤诉吗)

    投诉状态已抢单是什么意思(投诉成立的订单还可以撤诉吗)

  • 微信etc是从零钱扣费的吗(微信etc零钱不够咋办)

    微信etc是从零钱扣费的吗(微信etc零钱不够咋办)

  • 单片机的组成(单片机的组成有哪些)

    单片机的组成(单片机的组成有哪些)

  • imessage信息删了能找回吗

    imessage信息删了能找回吗

  • web安全与网络安全的区别(web安全与网络安全哪个好)

    web安全与网络安全的区别(web安全与网络安全哪个好)

  • word怎么改变行数(word怎么调行与行之间的距离)

    word怎么改变行数(word怎么调行与行之间的距离)

  • 华为荣耀手环3怎么开蓝牙(华为荣耀手环3屏幕不亮怎么办)

    华为荣耀手环3怎么开蓝牙(华为荣耀手环3屏幕不亮怎么办)

  • p30pro耳机怎么用(华为p30pro如何使用耳机)

    p30pro耳机怎么用(华为p30pro如何使用耳机)

  • p30有没有线性马达(华为p30支持一线通吗)

    p30有没有线性马达(华为p30支持一线通吗)

  • 魅族小溪设置(魅族小溪有什么功能)

    魅族小溪设置(魅族小溪有什么功能)

  • 微信种树的在哪里(微信种树领水果怎么打开)

    微信种树的在哪里(微信种树领水果怎么打开)

  • 云电脑怎么打字(云电脑打字怎么弄)

    云电脑怎么打字(云电脑打字怎么弄)

  • 幽鹤国家公园的翡翠湖, 加拿大不列颠哥伦比亚省 (© Cavan Images/Offset)(斯卡伊保安公司怎么样)

    幽鹤国家公园的翡翠湖, 加拿大不列颠哥伦比亚省 (© Cavan Images/Offset)(斯卡伊保安公司怎么样)

  • win10桌面没有我的电脑怎么办(win10桌面没有我的电脑图标怎么办)

    win10桌面没有我的电脑怎么办(win10桌面没有我的电脑图标怎么办)

  • 网赚项目——Youtube获取高流量的技巧

    网赚项目——Youtube获取高流量的技巧

  • 最新版本 Stable Diffusion 开源 AI 绘画工具之使用篇(最新版本金铲铲强势阵容)

    最新版本 Stable Diffusion 开源 AI 绘画工具之使用篇(最新版本金铲铲强势阵容)

  • mren命令  更改文件或目录(命令行修改mbr)

    mren命令 更改文件或目录(命令行修改mbr)

  • 软件产品即征即退条件
  • 交通运输印花税怎么申报
  • 税务申报差额征收 服务减除清单
  • 计提个人所得税怎么计提
  • 投资子公司亏损如何入账
  • 中药材适用税率是多少
  • 打印社保缴费凭证需要什么证件
  • 企业一直亏损但是汇算清缴调增
  • 存货计提减值准备是什么原则
  • 收款费用明细表
  • 医院减免医药费后还可以报保险吗
  • 股东投资款是否可以现金支付
  • 行车记录仪怎么开发票
  • 税收预测表怎么填写
  • 发生广告费用会计分录
  • 对账单回复函
  • 政府补助专项资金账务处理
  • mac怎么查询是不是正品
  • 用盈余公积弥补职工福利费是什么类型
  • u盘启动器安装系统
  • macbook截图快捷键没反应
  • 冲减增值税进项税怎么处理
  • 分公司打货款怎么做账
  • windows11怎么设置默认应用
  • windows11测试版升级正式版
  • system占用cpu过高怎么解决
  • 电脑pin码忘了开不了机,且鼠标失灵
  • 存货毁损账务处理
  • 公司交会费有什么用
  • Win11 Build 22471 Dev版更新推送(附更新修复已知问题汇总)
  • 营改增建筑企业增值税
  • 魅族路由器怎么样
  • 经验模态分解和变分模态分解
  • js中reduce用法
  • css设置3d
  • 存货报废如何处理方案
  • 以前年度损益调整借贷方向
  • 软件企业会计账务处理
  • 招待费的进项税必须认证后转出吗
  • 个体户查账征收个人所得税税率
  • 哪些是生产企业
  • sqlserver2005安装失败
  • sql2005服务无法启动sql安装方法
  • 暂估和冲暂估分录
  • 发票一直没验旧会有什么影响
  • 软件退税款会计如何处理
  • 低值易耗品的金额
  • 发票丢了能做账吗
  • 企业买车购置税可以抵增值税吗
  • 报关单填制的运费怎么算
  • 福利费的范畴
  • 劳务派遣服务怎么做会计分录
  • 分公司独立核算和非独立核算哪个好
  • docker mysql 数据
  • sql server 数据
  • centos6.9开启ssh服务
  • ubuntu怎么建立文件
  • win10 win8.1双系统
  • 苹果公司joz
  • ubuntu12安装教程
  • 360安全卫士windows7
  • win7系统关机很慢什么原因
  • WIN10系统英文怎么改中文?
  • 微软商城会员
  • win7旗舰版u盘在电脑上读不出来
  • w8系统文件夹怎么设置密码
  • win10登录界面壁纸
  • android模块开发
  • android开发中遇到的问题
  • unity rp
  • JAVAscript字符串类型单引号和双引号意一样吗
  • jquery监听span内容的变化
  • jquery原理解析
  • jquery网页
  • bootstrap js插件
  • 税务机关一案双查管理办法
  • 江苏税务局开票在哪看的
  • 中国海关化妆品关税
  • 广西电子税务局登陆入口
  • 在水贝买的黄金
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设