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

  • 华为手环7有nfc功能吗(华为手环7有nfc功能在哪里设置)

    华为手环7有nfc功能吗(华为手环7有nfc功能在哪里设置)

  • 苹果怎么隐藏视频(苹果怎么隐藏视频和照片)

    苹果怎么隐藏视频(苹果怎么隐藏视频和照片)

  • iwatch电量怎么显示(iwatch的电量在哪看)

    iwatch电量怎么显示(iwatch的电量在哪看)

  • 退款售后记录删除不了(退款售后记录删除了怎么恢复)

    退款售后记录删除不了(退款售后记录删除了怎么恢复)

  • 淘宝怎么加入阿里爱心助农平台(淘宝怎么加入阿里客服)

    淘宝怎么加入阿里爱心助农平台(淘宝怎么加入阿里客服)

  • 智慧团建名字错了怎么修改(智慧团建名字错了有什么影响)

    智慧团建名字错了怎么修改(智慧团建名字错了有什么影响)

  • 安卓手机总是弹广告怎么关闭(安卓手机总是弹出拼多多广告)

    安卓手机总是弹广告怎么关闭(安卓手机总是弹出拼多多广告)

  • 微信怎么满屏小心心(微信怎么满屏小兔子头像)

    微信怎么满屏小心心(微信怎么满屏小兔子头像)

  • 话费充错了怎么追回来(话费充错了怎么追回来中国移动)

    话费充错了怎么追回来(话费充错了怎么追回来中国移动)

  • 剪映怎么录制视频(剪映怎么录制视频长短)

    剪映怎么录制视频(剪映怎么录制视频长短)

  • 网上展览设计原则是什么??(网上展览设计原则)

    网上展览设计原则是什么??(网上展览设计原则)

  • oppo曲面屏手机有几款(oppo曲面屏手机贴什么膜)

    oppo曲面屏手机有几款(oppo曲面屏手机贴什么膜)

  • 华为手机电池鼓包能免费更换吗(华为手机电池鼓了怎么办)

    华为手机电池鼓包能免费更换吗(华为手机电池鼓了怎么办)

  • 618家电活动力度大吗(618家电活动力度如何)

    618家电活动力度大吗(618家电活动力度如何)

  • 怎样清理手机运行内存(怎样清理手机运存)

    怎样清理手机运行内存(怎样清理手机运存)

  • 什么是身份动态识别码(身份证动态监控是什么意思)

    什么是身份动态识别码(身份证动态监控是什么意思)

  • 华为升降摄像头是哪一款(华为升降摄像头黑屏)

    华为升降摄像头是哪一款(华为升降摄像头黑屏)

  • 卡贴机重启要激活吗(卡贴机是不是每次开机都要激活)

    卡贴机重启要激活吗(卡贴机是不是每次开机都要激活)

  • 在闲鱼买东西付款了不发货怎么办(在闲鱼买东西付款了会不会不给发货)

    在闲鱼买东西付款了不发货怎么办(在闲鱼买东西付款了会不会不给发货)

  • 路由器电源开关在哪(路由器电源开关自动跳)

    路由器电源开关在哪(路由器电源开关自动跳)

  • wps表格怎么筛选关键字(wps表格怎么筛选指定内容)

    wps表格怎么筛选关键字(wps表格怎么筛选指定内容)

  • 苹果xr快充伤电池吗(xr用快充对电池耗电变快了)

    苹果xr快充伤电池吗(xr用快充对电池耗电变快了)

  • 华为畅享9e和9的区别(华为畅享9e和9的对比)

    华为畅享9e和9的区别(华为畅享9e和9的对比)

  • uniapp scroll-view基础用法

    uniapp scroll-view基础用法

  • 增值税专用发票抵扣期限
  • 小规模进项可以收专票吗
  • 普票也要盖发票专用章吗
  • 酒类许可证过期了去哪里换证
  • 服务业按什么结算工资
  • 坏账准备计入营业外支出还是资产减值损失
  • 发票采集即征即退怎么填
  • 不得抵扣的进项税额转出会计分录
  • 会务费账务处理
  • 企业哪些费用属于重要费用
  • 特许权使用费个税计算公式
  • 文化事业建设费征收对象
  • 差额开票扣除额可以大概数
  • 增值税进项大于销项月末需要结转吗
  • 拍卖所得房产计税依据
  • 对方已认证的发票在哪里
  • 小规模纳税人增值税超过30万怎么纳税
  • 公转私限额多久自动解冻
  • 高新企业研发项目
  • 鸿蒙系统通知栏和控制
  • edge浏览器总是打开新的网页
  • 生产企业出口退税全部流程
  • 消防工程改造需要什么资质
  • redis使用php
  • 如何在win11上安装旧版ie
  • 出差环境补贴怎么算
  • 公司出售已经提完折旧的机器
  • 世界十大销量书
  • php后端开发流程教程
  • 销售过程的主要内容
  • 进项税额不得抵扣的情况有哪些
  • 稿酬所得怎么交所得税
  • php连接mysql数据库的几种方式及区别
  • web渗透实战
  • 会计政策变更累计数
  • 其他债权投资减值可以转回吗
  • 微信小程序web-view 添加悬浮按钮
  • 文化事业建设费减免政策
  • vue使用scss报错
  • vue环境搭建的几种方法
  • 视同销售的增值税怎么申报
  • 研发费用大于收入
  • 工程公司项目管理部管理制度
  • mongodb进阶与实战下载
  • mongodb数据库的层次结构
  • 补发以前年度工资
  • 当月利息发票未开可以先入账吗
  • 个人社保信息变更流程
  • 两个公司发工资公司会发现吗
  • 税法税前扣除
  • 已认证进项税转出口退税怎么处理
  • 直接私募如何纳税
  • 开立银行承兑汇票利率
  • 车辆购置税退税申请表
  • 研发费用辅助账模板 税务局
  • 企业筹建期的开办费后期怎么算
  • 有销项税额转出吗
  • sqlserver查询语句大全讲解
  • freebsd版本选择
  • debian安装zsh
  • win7系统怎么查看
  • 怎么检测软件有没有毒
  • centos查看inode
  • vc精华氧化变黄
  • 写出linux安装的详细步骤
  • windows7 运行
  • win1021h2版本怎么样
  • windows7更新补丁后蓝屏
  • 批处理系统的应用场景
  • js 仿真
  • unity 更新
  • #vr#
  • python语言文件
  • jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
  • python django运行
  • 河南电子税务局官网app
  • 吉林省国家税务局官网
  • 党日活动与专业建设结合
  • 广州车船税每年交多少
  • 进出口货物的报关时限
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设