`
yifeng
  • 浏览: 53221 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

AJAX基础与实践(二)

    博客分类:
  • Ajax
阅读更多
 

XMLHttpRequest(XHR)

Ø 浏览器可以直接从JavaScript中初始化请求并获取结果。

Ø 本质上是添加了额外的用于发送和接收XML代码功能的普通HTTP请求。

Ø 像一个 ServletRequest

XMLHttpRequest对象的属性和事件

Ø XMLHttpRequest对象的属性

属性名称

描述

onreadystatechange

指定当readyState属性改变时的事件处理句柄,只写

readyState

返回当前请求的状态,只读。

responseBody

将回应信息正文以unsigned byte数组形式返回,只读。

responseStream

Ado Stream对象的形式返回响应信息,只读

responseText

将响应信息作为字符串返回,只读

responseXML

将响应信息格式化为Xml Document对象并返回,只读

status

返回当前请求的http状态码,只读

statusText

返回当前请求的响应行状态,只读

XMLHttpRequest对象的方法

Ø XMLHttpRequest对象的方法

方法名称

描述

abort

取消当前请求

getAllResponseHeaders

获取响应的所有http

getResponseHeader

从响应信息中获取指定的http

open

创建一个新的http请求,并指定此请求的方法、URL以及验证信息(用户名/密码) //常用

send

发送请求到http服务器并接收回应 //常用

setRequestHeader

单独指定请求的某个http

XMLHttpRequest对象的readyState属性

Ø ReadyState属性

属性名称

描述

0 (未初始化)

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

1 (初始化)

对象已建立,尚未调用send方法

2 (发送数据)

send方法已调用,但是当前的状态及http头未知

3 (数据传送中)

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

4 (完成)

数据接收完毕,此时可以通过通过responseBodyresponseText获取完整的回应数据

XMLHttpRequest对象的onreadystatechange事件

Ø 每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript 函数。

Ø 语法

onreadystatechang 指定当readyState属性改变时的事件处理句柄,只写

xmlHttpObj.onreadystatechange=callback;

function callback (){

 if(xmlHttpObj.readyState==4){

    if(xmlHttpObj.stateus==200){

        alert(xmlHttpObj.responseText);

    }else{

        alert("加载失败!"n原因:"+xmlHttpObj.stateText);

    }

 }

}

XMLHttpRequest对象的responseText属性

Ø 服务器的响应,表示为一个串。

Ø 客户端接收到的HTTP响应的文本内容。

Ø readyState值为012时,responseText包含一个空字符串。

Ø readyState值为3(正在接收)时,响应中包含客户端还未完成的响应信息。

Ø readyState4(已加载)时,该responseText包含完整的响应信息。

XMLHttpRequest对象的responseXML属性

Ø 服务器的响应,表示为XML

Ø 用于当接收到完整的HTTP响应时(readyState4)描述XML响应。

Ø Content-Type头部指定MIME(媒体)类型为text/xmlapplication/xml或以+xml结尾。

Ø 如果Content-Type头部并不包含这些媒体类型之一,那么responseXML的值为null

Ø 无论何时,只要readyState值不为4,那么该responseXML的值也为null

Ø responseXML可以返回一个文档树(DOM),可以使用document.getElementsByTagNamedocument.getElementsByTagNameNSdocument.getElementById等对其操作。

XMLHttpRequest对象的status属性

Ø 长整形标准http状态码。

Ø 仅当readyState值为3(正在接收中)4(已加载)时,这个status属性才可用。

Ø readyState的值小于3时试图存取status的值将引发一个异常。

Ø 状态码如下定义:

描述

100

Continue

101

Switching protocols

200

OK

201

Created

202

Accepted

203

Non-Authoritative Information

204

No Content

205

Reset Content

206

Partial Content

300

Multiple Choices

301

Moved Permanently

302

Found

303

See Other

304

Not Modified

305

Use Proxy

307

Temporary Redirect

400

Bad Request

401

Unauthorized

402

Payment Required

403

Forbidden

404

Not Found

405

Method Not Allowed

406

Not Acceptable

407

Proxy Authentication Required

408

Request Timeout

409

Conflict

410

Gone

411

Length Required

412

Precondition Failed

413

Request Entity Too Large

414

Request-URI Too Long

415

Unsupported Media Type

416

Requested Range Not Suitable

417

Expectation Failed

500

Internal Server Error

501

Not Implemented

502

Bad Gateway

503

Service Unavailable

504

Gateway Timeout

505

HTTP Version Not Supported

XMLHttpRequest对象的statusText属性

Ø 描述了HTTP状态代码文本。

Ø 仅当readyState值为34才可用。

Ø readyState为其它值时试图存取statusText属性将引发一个异常。 

Ø 返回当前请求的响应行状态

XMLHttpRequest对象的abort()方法

Ø 暂停与一个XMLHttpRequest对象相联系的HTTP请求。

Ø 从而把该对象复位到未初始化状态。

Ø 用来中断请求,取消当前请求。

XMLHttpRequest对象的open()方法

Ø void open(string method, string url, boolean asynch, string username, string password) 建立对服务器的连接,初始化一个XHR对象的纯脚本方法。

1.         ethod参数: 是必须提供的-指定发送请求的HTTP方法(GETPOSTPUTDELETEHEAD)

2.         uri参数: 用于指定请求发送到的服务器相应的URI

3.         async参数: 指定请求是否是异步的,预设是true,表示使用非同步方式。为了发送一个同步请求,需要把这个参数设置为false

Ø 对于要求认证的服务器,提供可选的用户名和口令参数。

Ø 在调用open()方法后,XMLHttpRequest对象把readyState属性设置为1(打开)

Ø 并且把responseTextresponseXMLstatusstatusText属性复位到它们的初始值。

XMLHttpRequest对象的send()方法

Ø 向服务器发送请求。

Ø 仅当readyState值为1时,才可以调用send()方法;否则的话,XHR对象将引发一个异常。

Ø async参数为true时,send()方法立即返回,从而允许其它客户端脚本继续处理。

Ø 在调用send()方法后,XHR对象把readyState

分享到:
评论

相关推荐

    ajax基础与实践教程(含php json实例)

    在"ajax基础与实践教程(含php json实例)"中,可能包含了如何使用Ajax与PHP结合,通过JSON进行数据交换的详细步骤。例如,创建一个PHP脚本生成JSON数据,然后在JavaScript中创建Ajax请求,解析返回的JSON数据并更新...

    Ajax基础与实践教程(含源码)

    **Ajax基础与实践教程** Ajax,全称Asynchronous JavaScript and XML,是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新。Ajax的核心是...

    AJAX的综合应用,AJAX基础与实践

    **AJAX基础与实践** AJAX(Asynchronous JavaScript and XML)是一种在不重新加载整个网页的情况下,能够更新部分网页的技术。这种技术的核心在于利用JavaScript创建XMLHttpRequest对象,通过这个对象与服务器进行...

    精通Ajax 基础概念.核心技术与典型案例

    ## **一、Ajax基础概念** 1. **异步通信**:Ajax的核心是JavaScript对象XMLHttpRequest,它允许在后台与服务器进行通信,不阻塞用户对页面的操作。 2. **局部刷新**:Ajax可以只更新网页的部分区域,而不是整个页面...

    Ajax模式与最佳实践英文原版

    1. **XMLHttpRequest对象**:Ajax的基础,用于在后台与服务器通信。理解它的生命周期、方法(如open、send、onreadystatechange等)以及状态码是掌握Ajax的关键。 2. **数据格式**:虽然名字中包含XML,但现代Ajax...

    AJax与PHP基础教程.

    **第一章 - Ajax基础** 在这一章中,你将学习到Ajax的基本概念,包括异步通信的重要性、XMLHttpRequest对象的使用以及如何创建简单的Ajax请求。了解如何通过JavaScript与服务器进行交互,实现页面内容的动态加载,...

    Ajax基础实例讲解

    Ajax(Asynchronous JavaScript and XML)是一种在...Ajax是Web开发中的重要技术,理解并掌握Ajax的基本原理和实践,能帮助你构建更加动态、响应式的网页应用。通过不断练习和项目实战,你可以更好地理解和运用Ajax。

    AJAX基础.pdf

    ### AJAX基础知识点详解 #### 一、AJAX概述 **AJAX**,全称为 **Asynchronous JavaScript and XML**(异步JavaScript与XML),是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器...

    14ajax课程_AJAX基础_

    **AJAX基础详解** 在现代Web开发中,AJAX(Asynchronous JavaScript and XML)是一种核心技术,它使得网页能够实现异步数据交换,无需刷新整个页面即可更新部分内容。本教程将深入探讨AJAX的基础知识,帮助你理解其...

    AJAX基础教程

    **AJAX基础教程** 在Web开发领域,AJAX(Asynchronous JavaScript and XML)是一种不可或缺的技术,它使得网页可以在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。本教程将带您深入理解AJAX的基本...

    Ajax 基础教程中文版.pdf

    **Ajax(Asynchronous JavaScript and XML)**是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。...通过阅读"Ajax基础教程中文版",你可以深入了解Ajax的工作原理,学会如何在实践中运用它。

    JavaScript语言与Ajax应用第二版_JavaScript语言与Ajax应用_JavaScript应用_javascri

    在"JavaScript语言与Ajax应用(第二版)"这本书中,作者董宁深入探讨了这两者的核心概念和技术应用。 1. **JavaScript基础**:JavaScript语言的基础包括变量、数据类型、运算符、流程控制(条件语句、循环语句)、...

    Ajax基础与实战.jar

    这个名为“Ajax基础与实战.jar”的压缩包,很可能包含了学习和实践Ajax技术的相关资料。 在学习Ajax的基础知识时,你需要了解以下几个关键点: 1. **XMLHttpRequest对象**:这是Ajax的核心,用于在后台与服务器...

    ajax入门基础教程

    在文章的最后部分,作者分享了自己的学习经历,提到了通过与专家的互动以及多次的交流和编程实践,能够更快地深入理解AJAX技术,并掌握相关的开发技巧。这也从另一个侧面强调了实践经验对于学习编程技术的重要性。

    AJAX基础教程-5 Ajax Validate

    **标题:“AJAX基础教程-5 Ajax Validate”** 在学习Web开发时,AJAX(Asynchronous JavaScript and XML)技术是一个重要的组成部分,它允许我们在不刷新整个页面的情况下与服务器进行交互,提升用户体验。本教程...

    Ajax的入门与实践.pdf

    Ajax 入门与实践 Ajax 是基于 XML 的异步 JavaScript, 是当前 Web 创新的重要组成部分。Ajax 这个术语源自描述从基于同页的 Web 应用到基于数据应用的转换。在基于数据的应用中,用户需要的数据,如联系人列表,...

    AJAX基础到精通教程

    **AJAX基础到精通教程** AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,大大提升了用户...

    Ajax基础教程

    **Ajax基础教程** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。这种技术在现代Web开发中被广泛应用,极大地提升了用户体验,因为它允许页面在后台与服务器...

    ajax基础教程和ajax从入门到精通

    **Ajax基础教程** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,提升了用户体验,使得用户在...

    ajax框架与实践

    涵盖Web应用的发展,Ajax基础,Web通讯,XMLHttpRequest对象详解,同时详细讲解和推荐了Ajax开发工具箱,例如JSDoc,Firefox拓展,DOMInspector,JSLint等等,以及JsUnit测试等。同时为了提升前端技术,第八章详细...

Global site tag (gtag.js) - Google Analytics