深入理解AJAX响应信息的处理

深入理解AJAX:现代Web开发的异步数据交换技术 本文还有配套的精品资源,点击获取 简介:AJAX技术允许在不刷新网页的情况下,通过异步数据交换更新网页内容,提升用户体验。本笔记详细解释了AJAX的核心概念、工作流程、应用场景以及使用jQuery简化操作的方法。还包括了AJAX的优缺点分析以及一些进阶话题,如CORS跨域问题和WebSockets技术。掌握AJAX对于构建现代Web应用至关重要。 1. 异步通信的... 阅读详情

深入理解AJAX响应信息的处理

请求状态

  该AJAX对象的请求状态与被请求文件的HTTP状态是一样的。包含在AJAX文件中的HTTP对象处理了所有的W3C描述的HTTP状态代码定义,并把它们返回给请求方法。状态代码被分成了五个部分:

  · 信息的 1xx

  · 成功的 2xx

  · 重定向 3xx

  · 客户端错误 4xx

  · 服务器错误 5xx

  上面的数字中的最前面一位表示某种类别的状态代码。例如,成功的是2xx,它的意思是包含了200-299之间的所有状态代码。HTTP对象检查状态代码的第一位数字,并根据代码所属的类别,执行一次转换。在检测出类别之后,HTTP对象把它发送给响应方法,该方法把状态代码作为字符串的形式返回。这就是HTTP状态方法:

this.status = function(_status)
{
  var s = _status.toString().split("");
  switch(s[0])
  {
   case "1":
    return this.getInformationalStatus(_status);
    break;
   case "2":
    return this.getSuccessfulStatus(_status);
    break;
   case "3":
    return this.getRedirectionStatus(_status);
    break;
   case "4":
    return this.getClientErrorStatus(_status);
    break;
   case "5":
    return this.getServerErrorStatus(_status);
    break;
  }
}

  状态代码是通过检测该代码的第一位数字来处理的。一旦完成了代码检测,原始的状态代码就被发送到一个适当的方法中,该方法给onResponse方法发送一个字符串形式的状态代码。接着我们就可以把这条消息显示给用户,如果遇到了什么错误,她/他就知道发生了什么情况。另一方面,如果请求是成功的,那么就显示数据。

  ResponseText和ResponseXML

  响应信息的内容可能有多种不同的形式,例如XML、纯文本、(X)HTML或JavaScript对象符号(JSON)。我们可以根据所接收到的数据格式的不同,用两种不同的方法来处理:使用responseText或者responseXML。responseText方法用于那些并非基于XML的格式。它把响应信息作为字符串,返回精确的内容。纯文本、(X)HTML和JSON都使用responseText。在纯文本或HTML上使用这个方法是很简单的:

if(ajax.checkReadyState('body', 'loading...', 'loading...', 'loading...') == "OK")
{
  document.getElementById('body').innerHTML = ajax.request.responseText;
}

   它最简单不过了!一旦载入响应信息完成,我们就调用AJAX对象,用responseText来检索它的值,并把它添加到页面上。

  处理JSON响应信息比处理纯文本或(X)HTML需要多一点技巧。下面是我们分析一个JSON文件的示例:

{ 'header' : 'How to Handle the Ajax Response',
'description' : 'An in-depth explanation of how to handle the Ajax response.',
'sourceUrl' : 'http://www.krishadlock.com/clients/informit/AjaxResponse/AjaxResponse.zip'}

   数据被冒号(:)分成了两个部分:标签名称和值。附加的数据被逗号(,)分成新的名称/值对。现在我们知道了JSON的样子了,下面是我们分析它的方法:

if(ajax.checkReadyState('body', 'loading...', 'loading...', 'loading...') == "OK")
{
  eval("var response = ("+ajax.request.responseText+")");
  document.getElementById('body').innerHTML = "<b>" + response.header + "</b><br/>"
+ response.description + "<br/><br/>"
+ "<a href='" + response.sourceUrl + "'>Download the source files</a>";
}

   JSON数据首先由JavaScript来分析(使用简单的eval()过程)。一旦数据被分析好了并建立了响应信息对象,我们就可以简单地通过名字来获取它们的响应信息值。

  responseText不仅可以给页面添加内容,它在调试AJAX请求的时候也有用处。例如,你可能还没有准备好分析数据,因为你还不知道所有的标签是什么样的,是XML格式的还是JSON文件。这就要求有一种用于检测被分析数据的途径。一旦你知道了所有的标签名称,所需要做的事情就只是编写代码了。

  responseXML的使用也相当简单。但是与JSON格式类似,XML要求进行数据分析。我们需要执行的第一项事务是识别出XML响应信息中的根节点。

var response = ajax.request.responseXML.documentElement;

 下一步,我们通过名称获取所有的元素并得到它们的值:

var header = response.getElementsByTagName('header')[0].firstChild.data;
var description = response.getElementsByTagName('description')[0].firstChild.data;
var sourceUrl = response.getElementsByTagName('sourceUrl')[0].firstChild.data;

  最后,我们把响应信息显示在相应的div标记中:

document.getElementById('body').innerHTML = "<b>" + header + "</b><br/>"
+ description + "<br/><br/>"
+ "<a href='" + sourceUrl + "'>Download the source files</a>";

  用JavaScript的时候,JSON比XML要快一些,这是因为JSON所需要的分析代码比XML少很多,直接导致在分析大量数据的时候,JSON的速度较快。JSON不如XML的地方在于XML受到的支持更大、服务器端开发选项更多。你可以根据环境和请求的用途来做出选择。

  AJAX响应信息是AJAX通讯中的一个重要的部分。你需要处理很多方面的信息,包括就绪状态、错误处理和加载状态,并最终显示出来。有了这些信息之后,你就可以把注意力集中在响应信息上,为用户提供更多的信息。 

IC设计新手必看:如何正确使用去耦电容(decap)避免电源噪声? 本文深入探讨了IC设计中去耦电容(decap)的应用技巧,从核心原理到布局实现,帮助新手工程师有效抑制电源噪声。文章详细解析了MIM、MOM等电容类型的特性与选择策略,并提供了先进的布局技巧和验证方法,特别适用于28nm以下先进工艺的电路设计挑战。 阅读详情

相关推荐

ARM Cortex-M系列授权解析:从研发到量产的免费与付费之路

本文深入解析了ARM Cortex-M系列内核从研发到量产过程中的授权模式。研发阶段可利用ARM DesignStart等免费资源进行原型验证,但产品商业化量产则需支付授权费与版税。文章对比了采购商用MCU与自研芯片的成本差异,并探讨了RISC-V作为免费替代方案在IoT领域的应用前景与挑战,为开发者提供了清晰的选型指南。

weixin_29292431的博客 494

ajax实现读取文件内容打印,javascript结合ajax读取txt文件内容

代码很简洁,这里就不多废话了,直接上源码html代码复制代码 代码如下:请求数据function show(){Ajax('read.txt?datetime=new Date.getTime ',function(str){alert(str);},function(){alert('失败了');})};javascript代码复制代码 代码如下:function Ajax(url,fnSucc...

weixin_32519033的博客 291

多机器人编队人工势场法协同避障算法原理及实现

ROS及SLAM进阶教程(十一)多机器人编队人工势场法协同避障算法原理及实现避障算法原理避障算法仿真 多机器人协同编队需要将理论和实践紧密地结合起来,其应用包括编队队形生成、保持、变换和路径规划与避障等等都是基于图论的理论基础完成的。 详细请参考ROS及SLAM进阶教程(八)多机器人协同编队算法原理及实现 自主避障功能是机器人编队在各种环境中保持自身安全的重要功能,在编队的基础上加入避障的功能,机器人可扫描到一定范围内的障碍物(包括其他机器人),在即将与之发生冲突时提前规避冲突,以保证自身的安全性,同时

Redglass的博客 1万+

ajax中的高级请求和响应

Ajax 中的高级请求和响应 【字体:大 中 小】 【打印本稿】 2006-5-6 10:18:54 www.okajax.com ( 4250) ...

weixin_30627381的博客 161

OpenCV透视变换实战:5分钟搞定歪斜证件照矫正(附完整代码)

本文详细介绍了如何使用OpenCV的透视变换技术快速矫正歪斜证件照,包含完整的Python代码实现。通过特征检测、坐标计算和矩阵变换三个核心步骤,5分钟内即可将手机拍摄的歪斜图像自动矫正为专业级证件照,大幅提升图像处理效率。

weixin_29094979的博客 481

eDP接口信号组成认识

eDP接口信号主要由Main Link、AUXCH与HPD三部分组成,如下图所示。 Main Link:表示主通道,用来传输各类型视频数据和音频数据; AUX CH:表示辅助通道,用于传输低带宽需求的数据,以及链路管理和设备控制信号; HPD:表示热插拔检测通道。 Main Link南1~4对数据线组成,每对数据线都是一对差分线。对于一款液晶屏而言,Main Link具体需几对数据线,这取决于屏幕的分辨率和彩色位数。 在该通道中传送的信号有视频像素信号、视频定时信号、视频格式信号、比特/像素及

精诚所至 2万+

Ajax的五种接收响应头消息(常用)

学习本文你得先了解php与Ajax 我的PHP初探 Ajax的了解与应用 五种响应头消息 1. textt/plain 字符串 服务端的消息响应头:header(“Content-Type:text/plain;charset=UTF-8”); 示例: 服务端(PHP): <?php //响应消息头 header("Content-Type:text/plain;charset=UTF-8"); /* 参数名是否正确(真确前者,不正确后者) 真确:$REQUEST['参数名'](一种混合写法不管你是

weixin_45824120的博客 1151

【Linux】U盘配置Ubuntu系统 ——(Win10+Ubuntu20.04)双系统安装教程

Ubuntu系统安装

WS_Change的博客 4327

ajax关键知识点之XMLHttpRequest请求头与响应头处理实践

本文深入解析了XMLHttpRequest(XHR)的请求头与响应头处理技巧。请求头通过setRequestHeader()设置,需在send()前完成,常见如Content-Type与Authorization;响应头则通过getResponseHeader()获取。文章通过快递包裹的比喻形象说明其作用,并给出级联下拉列表的实战案例,强调跨域请求时需注意CORS预检和浏览器限制。关键点包括:头信息是前后端通信的元语言,设置获取的时序要求,以及不同数据格式对应的头值处理。通过学习这些细粒度通信控制方法,可构

2301_78506709的博客 1341

YOLOv8改进 | 独家创新篇 | 给YOLOv8增加辅助可逆分支结构(PGI,1:1改进)(全网独家创新,附视频讲解)

这张图(图3)展示了可编程梯度信息(PGI)及其相关网络架构和方法。这种网络结构主要用于改进特征融合,以提高目标检测的性能。然而,由于信息瓶颈的存在,网络中可能会丢失一些信息。这是一种旨在减少信息丢失的网络设计。它通过可逆的列结构来尝试维持信息流通不受损失,但如图中“Heavy Cost”所示,这种结构会增加计算成本。c) 深度监督:这种方法通过在网络的多个层次中插入额外的监督信号来提高学习的效率和最终模型的性能。图中显示了通过深度监督连接的各个层。

Snu77的博客 3743

【数据集】米级别热红外卫星合集:SDGSAT-1、HotSat-1等

米级别热红外卫星合集:SDGSAT-1、HotSat-1等

WW、forever的博客 1249

Ajax的响应信息ResponseText和ResponseXML

用Jquery写一了一段小代码提交ajax请求道servlet,返回选定省份的所有城市,实现省市和城市的联动效果,本来觉得一段简单的小代码很容易搞定,结果一直运行不正确,用firebug调试js脚本之后,发现返回的data为document类型,而我代码中需要返回的是字符串类型。 在网络监控中发现返回的响应信息中response的类型为xml然后就一直报错...

a961550527的博客 518

SPI为什么不需要加上拉电阻

大家好,我是记得诚。I2C因为其开漏的结构,无法输出高电平,所以外部加上拉电阻。我们在使用SPI的时候,发现是不需要加上拉电阻的。主要因为SPI多为推挽的结构,推挽电路,高低电平都可以输出,所以外部不需要加上拉电阻。推挽电路可以用2个三极管或者2个MOS管搭建而成。

记得诚 2623

深入理解AJAX响应信息处理

 请求状态   该AJAX对象的请求状态与被请求文件的HTTP状态是一样的。包含在AJAX文件中的HTTP对象处理了所有的W3C描述的HTTP状态代码定义,并把它们返回给请求方法。状态代码被分成了五个部分:   · 信息的 1xx   · 成功的 2xx   · 重定向 3xx   · 客户端错误 4xx   · 服务器错误 5xx   上面的数字中的最前面一位表示某种类别的状态代码。例如,成

溺水的鱼 - Later equals never. 982

SIMATIC S7-1200, S7-1500 PID 控制[手册]

SIMATIC S7-1200, S7-1500 PID 控制[手册]

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

Ajax及其应用

Ajax技术会让客户端和服务器之间多出一个Ajax引擎,本来客户端是直接传输HTTP请求给服务器,然后接受服务器返回的HTML,CSS数据,加入Ajax引擎之后客户端先发送JS调用给引擎引擎转换成HTTP请求发送给服务器,接收也变成服务器返回XML数据给引擎,引擎在转换成HTML,CSS数据来渲染客户端。本来在客户端发送HTTP请求之后应该进入暂停状态,直到服务器返回HTML,CSS数据才能发送下一条HTTP请求,Ajax可以在客户端发送JS调用后没接收到返还信息就能发出下一条JS调用,实现异步。

repay_LYZ的博客 1016

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

Ajax以及应用

Ajax即异步JavaScript和XML,它是一种用于创建快速动态网页的技术。

kubuto的博客 754

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

原生php ajax post_php下的原生ajax请求用法实例分析

本文实例讲述了php下的原生ajax请求用法。分享给大家供大家参考,具体如下:浏览器中为我们提供了一个JS对象XMLHttpRequet,它可以帮助我们发送HTTP请求,并接受服务端的响应。意味着我们的浏览器不提交,通过JS就可以请求服务器。ajax(Asynchronous Javascript And XML)其实就是通过XHR对象,执行HTTP请求。1、创建XHR对象var xhr = ne...

weixin_30856775的博客 291
上一篇: 详解如何实现最基本的AJAX框架
下一篇: 利用AJAX技术开发应用程序实战
SmartJavaer
博客等级 码龄21年 13粉丝 37原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值