`
JavaCrazyer
  • 浏览: 3008930 次
  • 性别: Icon_minigender_1
  • 来自: 河南
社区版块
存档分类

AJAX基础学习(5)——XMLHttpRequest 对象

阅读更多

 

AJAX - 更多有关 XMLHttpRequest 对象的知识

 

在向服务器发送数据之前,我们有必要解释一下 XMLHttpRequest 对象的三个重要的属性。

 

onreadystatechange 属性

onreadystatechange 属性存有处理服务器响应的函数。下面的代码定义一个空的函数,可同时对 onreadystatechange 属性进行设置:

 

xmlHttp.onreadystatechange=function()
  {
  // 我们需要在这里写一些代码
  }

 readyState 属性

readyState 属性存有服务器响应的状态信息。每当 readyState 改变时,onreadystatechange 函数就会被执行。

这是 readyState 属性可能的值
状态 描述
0 请求未初始化(在调用 open() 之前)
1 请求已提出(调用 send() 之前)
2 请求已发送(这里通常可以从响应得到内容头部)
3 请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)
4 请求已完成(可以访问服务器响应并使用它)

我们要向这个 onreadystatechange 函数添加一条 If 语句,来测试我们的响应是否已完成(意味着可获得数据):


xmlHttp.onreadystatechange=function()
  {
  if(xmlHttp.readyState==4)
    {
    // 从服务器的response获得数据
    }
  }
 responseText 属性
可以通过 responseText 属性来取回由服务器返回的数据。

在我们的代码中,我们将把时间文本框的值设置为等于 responseText:
xmlHttp.onreadystatechange=function()
  {
  if(xmlHttp.readyState==4)
    {
    document.myForm.time.value=xmlHttp.responseText;
    }
  }
 下一节,我们会介绍如何向服务器请求数据!


 

 

分享到:
评论

相关推荐

    XHR——XMLHttpRequest对象 - gaojun - 博客园1

    总结,XMLHttpRequest对象是JavaScript实现异步数据交换的核心工具,其创建、使用以及响应处理的理解是进行前端开发尤其是Ajax编程的基础。理解并熟练掌握XHR对象的使用,对于提升Web应用的性能和用户体验至关重要。

    全面剖析 Ajax XMLHttpRequest对象

    总之,XMLHttpRequest对象是Ajax技术的基础,它的属性和方法提供了与服务器进行异步交互的能力,极大地丰富了Web应用的动态性和用户体验。开发者深入理解和掌握XMLHttpRequest的使用,对于构建高效、交互性强的Web...

    学习ajax的文档——ajax基础文档

    Ajax的核心是创建一个`XMLHttpRequest`对象,它是浏览器内置的对象,负责与服务器进行异步通信。通过这个对象,我们可以发送HTTP请求,并接收服务器返回的数据。使用Ajax的主要优点是提高了用户体验,因为页面可以在...

    Atlas/ajax基础教程——范例源码

    1. **Ajax基础**:理解Ajax的工作原理,包括XMLHttpRequest对象的使用,以及如何创建、发送和处理HTTP请求。 2. **Atlas API**:熟悉Atlas提供的各种函数和方法,如`atlas.ajax.send()`,用于发起Ajax请求,以及`...

    全面剖析XMLHttpRequest对象

    本文将深入探讨AJAX的核心组件——XMLHttpRequest对象,并结合实际应用场景来分析其工作原理和技术细节。 #### AJAX概述 AJAX是一种用于创建快速动态网页的技术,它通过在后台与服务器进行少量数据交换,使网页...

    XMLHttpRequest对象的介绍和实现

    通过本文档的学习,读者不仅了解了XMLHttpRequest对象的基本概念和使用方法,还掌握了如何利用它进行简单的页面更新和数据处理。此外,我们还讨论了如何创建一个更加健壮和灵活的ServerAccessObject模块,以方便在...

    ajax学习——自学文件

    1. **创建XMLHttpRequest对象**:在JavaScript中,首先需要创建一个XMLHttpRequest对象,这是Ajax的基础。现代浏览器通常都内置了这个对象,老版本的IE则需要通过ActiveXObject来创建。 2. **建立连接**:使用...

    Ajax学习——DWR的参考书和实用案例学习总结

    DWR简化了Ajax应用的复杂性,使得开发者无需关注底层XMLHttpRequest对象的细节。它通过动态生成JavaScript库,将服务器端的对象暴露给JavaScript,使得开发者能够更专注于业务逻辑,而不是网络通信。 ### DWR与...

    Ajax征服——Ajax小偷模块 源码

    1. **XMLHttpRequest对象**:这是Ajax的基础,用于在后台与服务器进行通信。通过创建XMLHttpRequest实例,我们可以打开到服务器的连接,并发送HTTP请求。当服务器响应时,我们可以处理返回的数据。 2. **异步请求**...

    web学习笔记 —— javascript基础

    XMLHttpRequest对象是实现AJAX的核心。 10. ES6及后续版本的新特性:包括类(Class)、模块(Module)、Promise(异步编程解决方案)、模板字符串(Template literals)、解构赋值、箭头函数、Map和Set等。 这个...

    Ajax功能 实现许愿墙 —— wish

    Ajax的核心是JavaScript的XMLHttpRequest对象,它提供了在后台与服务器端通信的能力。当用户触发某个操作(如点击按钮),JavaScript会创建一个XMLHttpRequest实例,然后通过这个实例向服务器发送异步请求。服务器...

    Ajax征服——留言本

    总结来说,“Ajax征服——留言本”是Ajax技术在实际应用中的一个经典示例,通过它,我们可以学习到如何利用Ajax实现实时、无刷新的数据交互,提高Web应用的用户体验。这个实例不仅涵盖了Ajax的基本用法,还涉及到...

    Ajax征服——相册模块 源码

    1. 创建XMLHttpRequest对象。 2. 使用open()方法初始化请求,指定请求类型(GET或POST)、URL以及是否异步执行。 3. 发送请求,对于GET请求,直接调用send();对于POST请求,需要先设置requestHeader,再传入数据。 ...

    Ajax教程 AJAX——新手快车道

    AJAX的核心是JavaScript的XMLHttpRequest对象,它允许在后台与服务器进行通信。通过创建XMLHttpRequest实例,然后利用其方法发送HTTP请求,服务器响应后,再处理返回的数据。这种异步交互方式使得页面可以在用户无...

    Ajax实战——深入理解AJAX

    Ajax通过创建XMLHttpRequest对象来实现异步通信。当用户触发某个事件(如点击按钮),JavaScript代码会启动一个HTTP请求,向服务器发送数据。服务器处理请求后,将结果返回给JavaScript,然后JavaScript动态修改DOM...

    精通Ajax——基础概念、核心技术与典型案例之 书中源码

    《精通Ajax——基础概念、核心技术与典型案例》是一本深入探讨Ajax技术的专业书籍,旨在帮助读者掌握Ajax的基础知识,理解其核心技术,并通过实际案例提升应用能力。Ajax,全称Asynchronous JavaScript and XML,是...

    Ajax基础学习资料

    ### Ajax基础学习资料知识点解析 #### 一、Ajax概述 **定义:** Ajax(Asynchronous JavaScript and XML)是一种创建交互式网页应用的技术组合,通过在后台与服务器进行少量数据交换,使得网页能够异步更新。这...

    Ajax征服——聊天室开发 源码

    4. **Ajax通信**:使用XMLHttpRequest对象或者更现代的Fetch API进行异步请求,向服务器发送消息,同时接收服务器返回的新消息。 5. **JSON数据交换**:虽然Ajax名称中有XML,但在实际应用中,JSON格式的数据交换更...

    AJAX——新手快车道

    **AJAX——新手快车道** 在当今的网页开发领域,AJAX(Asynchronous JavaScript and XML)已经成为不可或缺的...通过阅读《AJAX——新手快车道》PDF,你将深入学习AJAX的各个方面,并能将其有效地应用于实际项目中。

Global site tag (gtag.js) - Google Analytics