Ajax与Comet-JavaScript高级程序设计第21章读书笔记(1)

Ajax(Asynchronous Javascript + XML)技术的核心是XMLHttpRequest对象,即: XHR。虽然名字中包含XML,但它所指的仅仅是这种无须刷新页面即可从服务器端获取数据的技术,其通信与数据格式无关,并不一定是XML数据。

XMLHttpRequest对象

IE7+、Firefox、Opera、Chrome 和 Safari 都支持原生的XHR对象。我们可以直接使用XMLHttpRequest构造函数来创建XHR对象。

var xhr = new XMLHttpRequest();

虽然,IE7之前版本的浏览器中,创建xhr的方法与此有所不同,但是,前端技术发展到今天,已经很少有业务需求是要支持IE7之前的版本了。因此,这里我略过这一情况。

XHR的用法

使用 XHR对象的时候,要调用的第一个方法是open(),它接受3个参数:

  1. 要发送请求的类型,如: get/post
  2. 请求的url
  3. 是否异步发送请求,这个参数是一个布尔值

xhr.open(‘get‘, ‘example.php‘, false)

注意:open()方法的调用并不会真正发送请求,仅仅是启动一个请求以备发送!

另外,只能向同一个域中使用相同端口和协议的URL发送请求,否则,会出现错误。

在执行open()方法之后,必须再调用send()方法,才会真正发起ajax请求。

xhr.open(‘get‘, ‘example.txt‘, false);xhr.send(null);

send()方法接收一个参数,即:要作为请求主体发送的数据。如果不需要发送数据,那么必须传入null,因为该参数对于部分浏览器而言是必需的。

本例中的请求是同步的,Javascript代码会等到服务器响应之后再执行。
收到响应后,响应的数据会自动填充XHR对象的属性,相关的属性有:

  1. responseText: 作为响应主体被返回的文本。
  2. responseXML: 如果响应的内容类型是"text/xml"或者"application/xml",那么这个属性中将保存着包含响应数据的XML DOM文档。
  3. status: 响应的HTTP状态
  4. statusText: HTTP状态的说明

无论内容类型是什么,响应主体的内容都会保存到responseText属性中,而对于非XML数据而言,responseXML 属性的值将会是null

收到响应后,一般来说,会先判断 status 是否为200,这是此次请求成功的标志。此时,responseText属性的内容已经就绪,而且在内容类型正确的情况下,responseXML也能够访问了。
另外,状态码status如果是304,那么表示请求的资源没有被修改,可以直接使用浏览器中的缓存,当然,这样的响应也是有效的。

if( (xhr.status >= 200 && xhr.status < 300) || xhr.status == 304 ){
    alert(xhr.responseText);
}else{
    alert(‘fail! status:‘ + xhr.status);
}

有的浏览器会错误地报告 204 的状态代码。IE中 XHR 的ActiveX版本会将204设置为1223,而IE中原生的 XHR 则会将 204 规范化为 200。Opera会在取得204时报告 status的值为0。

原文链接:http://www.4455q.com/ajax-comet-javascript-chapter21-note1.html

时间: 2024-08-10 20:58:08

Ajax与Comet-JavaScript高级程序设计第21章读书笔记(1)的相关文章

JavaScript高级程序设计第20章JSON 笔记 (学习笔记)

第二十章 JSON 1.Json 可以表示三种类型的值: 1.简单值: 表示数值:5  表示字符串:“hello wrold”注表示字符串时必须使用双引号 2.对象: {“name”:“mi”,”age”:24}与JavaScript对象有两处不同一是没有声明变量 二是没有末尾的分号json对象中属性必须带引号,对象里的值可以嵌套对象. 3.数组 Json数组表示:[25,”hi”,true]和json对象一样json里也没有分号和变量 2.json对象 1.Stringify()方法用于把ja

javascript高级程序设计第三版 读书笔记

第三章   基本概念 1.在JavaScript中是区分大小写的,第一个字符是字母 _ 或者$,其他字符可以试数字 字母 _ 或者$,命名格式要求是驼峰式书写(第一个字母小写,剩下的每个有意义的单词开头大写  比如fontSize) 2.单行注释//  块级注释为/*多行 内容*/ 不得使用关键字和保留字 3.在JavaScript中变量是松散型的   可以为任何一种类型 4.用var操作符定义的变量成为定义该变量的作用域中的局部变量. function test(){ var i = 'hi'

JS高级程序设计第3章读书笔记

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> <script> //一元加和减操作符 var s1='01'; var s2='1.1'; var s3='z'; var b=fal

javascript高级程序设计 第十三章--事件

javascript高级程序设计 第十三章--事件js与HTML的交互就是通过事件实现的,事件就是文档或浏览器窗口中发生的一些特定的交互瞬间. 事件流:事件流描述的是从页面中接收事件的顺序,IE的是事件冒泡流,Netscape的是事件捕获流,这个两个是完全相反的事件流概念. 事件冒泡:由最具体的元素接收,然后逐级向上传播到更高级的节点,即事件沿DOM树向上传播,直到document对象. 事件捕获:不大具体的节点应该更早接收到事件,相当于沿DOM节点树向下级传播直到事件的实际目标,在浏览器中,是

javascript高级程序设计 第十一章--DOM扩展

javascript高级程序设计 第十一章--DOM扩展DOM最主要的扩展就是选择符API.HTML5和Element Traversal Selectors API:定义了两个方法 querySelector() 和 querySelectorAll(),能够基于CSS选择符从DOM中取得元素.querySelector()方法接收一个CSS选择符,返回该模式匹配的第一个元素,querySelectorAll()接收的参数一样,但是返回NodeList实例: matchesSelector()

Javascript高级程序设计——第三章:基本概念

javascript高级程序设计——第三章:基本概念 一.语法 EMCA-262通过叫做ECMAScript的“伪语言”为我们描述了javascript实现的基本概念 javascript借鉴了C的语法,区分大小写,标示符以字母.下划线.或美元符号($)开头,注释可以用 // 或者/* */ 严格模式: ECMAScript 5引入了严格模式,在严格模式下不确定的行为将得到处理,通过在顶部添加 “use strict”来启用严格模式: function fuc(){ "use strict&qu

《JavaScript高级程序设计第五章--引用类型》之Object对象和array对象

这一章主要就是介绍各种内置对象的用法,认识其经常用到的属性和方法. 5.1Object类型 创建objec的方式,一种是new Object(),一种是对象字面量(简化创建包含大量属性的对象的过程) var person = { name = "Nicholas"; age = 27 };//最后一个属性不必添加逗号,ie7等会导致错误 //在使用对象字面量语法时,属性名也可以使用字符串.这里的数值属性会自动转字符串. var person = { "name" :

《JavaScript》高级程序设计第21章:Ajax和Comet

Ajax的技术核心是XMLHttpRequest对象(简称XHR) 一.创建XMLHttpRequest对象 1 function createXHR(){ 2 if(typeof XMLHttpRequest != "undefined"){ 3 //IE7, FireFox, Opera, Chrome, Safari都支持原生的XHR对象,这些浏览器中可以使用XMLHttpRequest构造函数 4 return new XMLHttpRequest(); 5 } else if

《JAVASCRIPT高级程序设计》第一章

在使用调制解调器的时代,频繁的表单验证对客户端来说是一个很大的负担,javascript,作为一种专门进行表单验证的客户端脚本语言诞生了.到今天,javascript早已超越了当初设定的角色.Javascript由以下三部分组成: 核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模式(BOM) 一.ECMAScript ECMAScript是对Javascript这门语言的描述,它规定了这门语言的这些组成部分:语法.类型.语句.关键字.保留字.操作符.对象.Web浏览器是ECMA