`
反求诸己
  • 浏览: 543276 次
  • 性别: Icon_minigender_1
  • 来自: 湖南娄底
社区版块
存档分类
最新评论

初步认识XMLHttpRequest

 
阅读更多

首先,我们先来看看XMLHttpRequest这个对象的属性。

它的属性有:

onreadystatechange 每次状态改变所触发事件的事件处理程序。

responseText     从服务器进程返回数据的字符串形式。

respon***ML   从服务器进程返回的DOM兼容的文档数据对象。

status           从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)

status Text       伴随状态码的字符串信息

readyState       对象状态值

0 (未初始化对象已建立,但是尚未初始化(尚未调用open方法)

1 (初始化对象已建立,尚未调用send方法

2 (发送数据) send方法已调用,但是当前的状态及http头未知

3 (数据传送中已接收部分数据,因为响应及http头不全,这时通过responseBodyresponseText获取部分数据会出现错误,

4 (完成数据接收完毕,此时可以通过通过respon***mlresponseText获取完整的回应数据

但是,由于各浏览器之间存在差异,所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。下面是一个比较标准的创建XMLHttpRequest对象的方法。

 

六、 定制加载和错误处理消息

   你为onreadystatechange方法创建的事件处理器正是集中进行加载和处理错误的场所。现在到了考虑用户并针对他们与之交互的内容的状态提 供反馈的时候了。在这个实例中,我针对所有的装载状态代码提供反馈,并且也对最经常发生的错误处理状态代码提供一些基本的反馈。为了显示请求对象的当前状 态,readyState属性包括显示在下表中的一些值。

  值 描述

  0 未初始化,对象没有用数据进行初始化。

  1 装载中,对象正在装载它的数据。

  2 装载结束,对象完成了它的数据的装载。

  3 可交互,用户能与对象交互了,尽管它还没有装载结束。

  4 完成,对象已经完全被初始化。

  W3C中有很长的一串有关HTTP状态代码的定义。我选择了两个状态代码:

  ?200:请求成功了。

  ?404:服务器没有找到与所请求的文件相匹配的任何东西。

   最后,我检查任何另外的状况代码-它们将生成一个错误并提供一个一般错误信息。下面是一个代码示例-你可以用之来处理这些情况。注意,我在定位我们前面 在HTML文件的主体中创建的div ID并且对它应用装载和/或错误信息-通过innerHTML方法-这个方法用于设置在div对象的开始和结束标签之间的HTML:

  if(obj.readyState == 0) 
  { document.getElementById('copy').innerHTML = "Sending Request..."; }
  if(obj.readyState == 1)
  { document.getElementById('copy').innerHTML = "Loading Response..."; }
  if(obj.readyState == 2)
  { document.getElementById('copy').innerHTML = "Response Loaded..."; }
  if(obj.readyState == 3)
  { document.getElementById('copy').innerHTML = "Response Ready..."; }
  if(obj.readyState == 4){
  if(obj.status == 200){ return true; }
  else if(obj.status == 404)
  {
  // 添加一个定制消息或把用户重定向到另外一个页面
  document.getElementById('copy').innerHTML = "File not found"; 
  }
  else
  {document.getElementById('copy').innerHTML = "There was a problem retrieving the XML."; }
  }

  当状况代码为200时,这意味着请求成功。下面开始进行响应了。

分享到:
评论

相关推荐

    对ajax的初步认识及实例

    Ajax的核心是利用JavaScript和XMLHttpRequest对象来实现后台通信。 1. XMLHttpRequest对象: XMLHttpRequest(XHR)是Ajax的基础,它允许JavaScript在后台与服务器进行通信。通过创建XMLHttpRequest实例,我们可以...

    XMLHttpRequest中文参考手册(10)

    通过本章的学习,我们不仅了解了 `statusText` 属性的基本用法,还对 `XMLHttpRequest` 的其他重要组成部分有了初步的认识。 --- 以上内容涵盖了 `XMLHttpRequest` 的 `statusText` 属性以及相关的属性和方法,...

    关于ajax的初步认识

    2. **创建XMLHttpRequest对象**:Ajax的核心是XMLHttpRequest对象,所有与服务器的通信都通过这个对象完成。 3. **打开连接**:XMLHttpRequest对象的`open()`方法用来建立与服务器的连接,指定请求类型(GET或POST)...

    ajax视频教程1

    这个视频可能涵盖了Ajax的初步介绍,包括如何创建XMLHttpRequest对象,发送GET请求,以及处理简单的响应。观看此视频,学习者可以对Ajax有一个基本的认识,并开始动手实践。 综上所述,Ajax视频教程将涵盖Ajax的...

    ajax简单入门讲解

    通过上述介绍,你已经对Ajax有了初步的认识。观看提供的SWF格式视频教程,将有助于你更深入地理解和掌握Ajax的实践应用。记住,实践是最好的老师,尝试在自己的项目中使用Ajax,不断提升技能水平。

    AJAX操作XML

    在上一章节的学习过程中,我们对AJAX的工作原理有了初步的认识,但上一章节的例子并未涉及到AJAX中一个重要的组成部分——XML。因此,本章节将详细介绍如何利用AJAX来操作XML数据。 #### 创建XMLHttpRequest对象 ...

    五日学会js教程(很不错)

    10. **前端框架预览**:虽然五日学会js教程可能不会深入到具体框架,但会简要介绍React、Vue或Angular等流行的JavaScript前端框架,以便学员对整个Web开发生态有初步认识。 通过这五天的学习,你将具备基本的...

    ajaxnotes:CS1520 的作业 3

    【标题】"ajaxnotes:CS1520 的作业 3" 涉及到的主要知识点是关于使用JavaScript实现AJAX(异步JavaScript和XML)技术。...同时,这也是对前端性能优化和用户体验设计的初步认识,是现代Web开发中不可或缺的一部分。

    《web程序设计》课件 陶飞飞等著

    4. **第4章 客户端动态脚本JavaScript**:JavaScript是实现网页动态效果的关键,本章讲解了JavaScript的基础语法、DOM操作、事件处理,以及Ajax(异步JavaScript和XML)的初步概念,为学习Web2.0技术铺平道路。...

    最新前端的价值149元js面试技巧视频

    通过这一部分的学习,学员可以对接下来要掌握的核心内容有一个初步的认识,并且能够明确自己通过这门课程能够获得哪些具体技能。 ### 二、JS基础知识(上) 这一部分重点讲解JavaScript的基础概念和技术要点,包括...

    lab1:第一个网络实验室

    在“lab1:第一个网络实验室”中,我们主要探讨的是网络基础和JavaScript在...通过这个实验,学习者将有机会掌握DOM操作、事件处理、AJAX请求等核心技术,并对HTTP协议有初步认识,为后续的网络编程学习打下坚实基础。

    JQuery 学习笔记01 JQuery初接触

    ### jQuery概述 jQuery是一个快速、...通过这个基础的入门,我们对jQuery有了初步的认识,这将为深入学习后续的高级功能打下坚实的基础。随着对jQuery的进一步探索,我们会发现它在Web开发中带来的便利和强大功能。

    利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法

    在Web开发领域,异步传输技术是实现网页无刷新更新内容的关键技术之...需要注意的是,虽然ThinkPHP官方文档未直接提供ThinkAjax的使用示例,但通过上述内容,初学者可以对ThinkAjax有一个初步的认识和使用方法的了解。

    shopping-cart-prototype

    然而,随着技能的积累和经验的提升,开发者会逐渐认识到代码的整洁性和可维护性的重要性。尽管现在看起来可能有些混乱,但能够运行并实现预期功能已经是一个重要的里程碑,这代表了开发者在JavaScript编程上的初步...

    我的第一网:第一网

    【标题】"我的第一网:第一网"是一个与Web...通过"我的第一网"项目,学习者将有机会实践这些JavaScript知识点,并建立起对Web开发的初步认识。无论是初学者还是有经验的开发者,这样的项目都是巩固和提升技能的好途径。

    仿360搜索首页 v1.0

    通过这个项目,初学者可以锻炼到网页开发的全面技能,从后端逻辑处理到前端界面设计,对整个Web开发流程有一个初步的认识。同时,也可以借此机会学习360搜索首页的设计理念,提高自己的项目实践能力。 在解压后的...

    Soft166网站:PROTOTYPE

    在软件开发过程中,原型是一个功能不完全但能展示核心概念的模型,它允许开发者和用户在实际开发前对产品的外观和交互有一个初步的认识。 【标签】"JavaScript" 提示我们这个网站可能主要使用JavaScript语言进行...

    紅皮書初級編程C#2008年版

    - **章节介绍**:第一章介绍了C#的基础概念及其历史背景,让读者对C#有一个初步的认识。 - **知识点**: - C# 的发展历程与版本迭代。 - C# 在.NET框架中的地位。 - C# 语言的基本语法特点。 #### 1.2 编写C# ...

Global site tag (gtag.js) - Google Analytics