对于readyState的五种状态的描述或者说定义,很多Ajax书(英文原版)中大都语
焉不详
在《Pragmatic Ajax A Web 2.0 Primer 》中偶然看到对readyStae状态的介绍,感
觉这个介绍很实在……
比较理想的解释方法应该以"状态:任务(目标)+过程+表现(或特征)"的表达模
式来对这几个状态进行定义

【全文】

在《Pragmatic Ajax A Web 2.0 Primer 》中偶然看到对readyStae状态的介绍,感
觉这个介绍很实在,摘译如下:

0: (Uninitialized) the send( ) method has not yet been invoked.
1: (Loading) the send( ) method has been invoked, request in progress.
2: (Loaded) the send( ) method has completed, entire response received.
3: (Interactive) the response is being parsed.
4: (Completed) the response has been parsed, is ready for harvesting.

0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法,正在发送请求
2 - (载入完成)send()方法执行完成,已经接收到全部响应内容
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成,可以在客户端调用了

对于readyState的这五种状态,其他书中大都语焉不详。像《Foundations of
Ajax》中,只在书中的表2-2简单地列举了状态的"名称"--The state of the
request. The five possible values are 0 = uninitialized, 1 = loading, 2
= loaded, 3 = interactive, and 4 = complete。而《Ajax in Action》中好像根
本就没有提到这5种状态的细节。《Professional Ajax》中虽不尽人意,但还是有可
取之处:

There are five possible values for readyState:
0 (Uninitialized): The object has been created but the open() method
hasn't been called.
1 (Loading): The open() method has been called but the request hasn't
been sent.
2 (Loaded): The request has been sent.
3 (Interactive). A partial response has been received.
4 (Complete): All data has been received and the connection has been closed.

readyState有五种可能的值:
0 (未初始化): (XMLHttpRequest)对象已经创建,但还没有调用open()方法。
1 (载入):已经调用open() 方法,但尚未发送请求。
2 (载入完成): 请求已经发送完成。
3 (交互):可以接收到部分响应数据。
4 (完成):已经接收到了全部数据,并且连接已经关闭。

在《Understanding AJAX: Using JavaScript to Create Rich Internet
Applications》中,则用下表进行了说明:

表1. readyState Levels

readyState Status Code

Status of the XMLHttpRequest Object


(0) UNINITIALIZED
未初始化

The object has been created but not initialized. (The open method has
not been called.)
(XMLHttpRequest)对象已经创建,但尚未初始化(还没有调用open方法)。


(1) LOADING
载入

The object has been created, but the send method has not been called.
(XMLHttpRequest)对象已经创建,但尚未调用send方法。


(2) LOADED
载入完成

The send method has been called, but the status and headers are not yet
available.
已经调用send方法,(HTTP响应)状态及头部还不可用。


(3) INTERACTIVE
交互

Some data has been received. Calling the responseBody and responseText
properties at this state to obtain partial results will return an error,
because status and response headers are not fully available.
已经接收部分数据。但若在此时调用responseBody和responseText属性获取部分结
果将会产生错误,因为状态和响应头部还不完全可用。


(4) COMPLETED
完成

All the data has been received, and the complete data is available in
the responseBody and responseText properties.
已经接收到了全部数据,并且在responseBody和responseText属性中可以提取到完
整的数据。


根 据以上几本书中的关于readyState五种状态的介绍,我认为还是《Pragmatic
Ajax A Web 2.0 Primer 》比较到位,因为它提到了对接收到的数据的解析问题,
其他书中都没有提到这一点,而这一点正是"(3)交互"阶段作为一个必要的转换过
程存在于"(2)载入完成"到"(4)完成"之间的理由,也就是其任务是什么。归结起
来,我觉得比较理想的解释方法应该以"状态:任务(目标)+过程+表现(或特
征)"表达模式来对这几个状态进行定义比较准确,而且让人容易理解。现试总结
如下:

表2. readyState 状态详解

readyState 状态

状态说明


(0)未初始化

此阶段确认XMLHttpRequest对象是否创建,并为调用open()方法进行未初始化作好
准备。值为0表示对象已经存在,否则浏览器会报错--对象不存在。


(1)载入

此阶段对XMLHttpRequest对象进行初始化,即调用open()方法,根据参数(method,
url,true)完成对象状态的设置。并调用 send()方法开始向服务端发送请求。值为
1表示正在向服务端发送请求。


(2)载入完成

此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据,并不能
直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解
析作好准备。


(3)交互

此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型
把数据转换成能通过responseBody、responseText 或responseXML属性存取的格
式,为在客户端调用作好准备。状态3表示正在解析数据。


(4)完成

此阶段确认全部数据都已经解析为客户端可用的格式,解析已经完成。值为4表示
数据解析完毕,可以通过XMLHttpRequest对象的相应属性取得数据。


概而括之,整个XMLHttpRequest对象的生命周期应该包含如下阶段:
创建-初始化请求-发送请求-接收数据-解析数据-完成

在具体应用中,明确了readyState的五个状态(XMLHttpRequest对象的生命周期各
个阶段)的含义,就可以消除对Ajax核心的神秘感(语焉不详的背后要么是故弄玄
虚,制造神秘感;要么就是"以其昏昏,使人昭昭"),迅速把握其实质,对减少学
习中的挫折感和增强自信心都极其有益。

比如,通过如下示例:

//声明数组
var states = ["正在初始化……",
"正在初始化请求……成功!<br/>正在发送请求……",
"成功!<br/>正在接收数据……",
"完成!<br/>正在解析数据……",
"完成!<br/>"];

//回调函数内部代码片段
if (xmlHttp.readyState==4)
{
var span = document.createElement("span");
span.innerHTML = states[xmlHttp.readyState];
document.body.appendChild(span);

if (xmlHttp.status == 200)
{
var xmldoc = xmlHttp.responseXML;
//其他代码
}

//别忘记销毁,防止内存泄漏
xmlHttp = null;
}else{
var span = document.createElement("span");
span.innerHTML = states[xmlHttp.readyState];
document.body.appendChild(span);
}

结果如下: 正在初始化请求……成功!
正在发送请求……成功!
正在接收数据……完成!
正在解析数据……完成!

我们很容易明白XMLHttpRequest对象在各个阶段都在做什么。因此,也就很容易对
Ajax的核心部分有一个真正简单明了的

javascript的splice

从一个数组中移除一个或多个元素,如果必要,在所移除元素的位置上插入新元素,返回所移除的元素。

arrayObj.splice(start, deleteCount, [item1[, item2[, . . . [,itemN]]]])

参数

arrayObj

必选项。一个 Array 对象。

start

必选项。指定从数组中移除元素的开始位置,这个位置是从 0 开始计算的。

deleteCount

必选项。要移除的元素的个数。

item1, item2,. . .,itemN

必选项。要在所移除元素的位置上插入的新元素。

说明

splice 方法可以移除从 start 位置开始的指定个数的元素并插入新元素,从而修改 arrayObj。返回值是一个由所移除的元素组成的新 Array 对象。

示例:

script language="javascript">
function test()
{
//var a=[1,2,3];
//alert(a);
var a=[1,2,3];
a.splice(1,1,4,6,7,8) //移除第二个,然后在第一个后插入4,6,7,8,返回:1,4,6,7,8,3
alert(a);
a.splice(0,1,3) //移除第一个,然后在第一个前插入3,返回:3,4,6,7,8,3
alert(a);

a.splice(2,0,5) //在第三个元素插入一个5,返回:3,4,5,6,7,8
alert(a);

a.splice(-1,1) //移动最后一位,类似shift方法,返回:3,4,5,6,7,8
alert(a);


}
</script>

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,它采用完全独立于语言的文本格式,可以用来在客户端和服务器端传输数据!JSON对象既可用于AJAX的开发中,也可用一般的J2EE的开发中,用于一次性向后台提交多于一条的记录!(譬如显示在页面上的table中记录)
JSON官方网站的介绍:(www.json.org)

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language.

JSON is built on two structures:


* A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.

* An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.



These are universal data structures. Virtually all modern programming languages support them in one form or another. It makes sense that a data format that is interchangable with programming languages also be based on these structures.

简单的示例:
1。var jsonObj={person1:{name:"jack",age:"12"},
person2:{name:"kate",age:"23"},
person3:{name:"jim",age:"14"}
};
调用JSON对象的属性,
1)jsonObj.person1.name
2)jsonObj["person1"].name
可以通过for循环的方式调用JSON对象中的每一个子对象
for(var p in jsonStr){
//alert(typeof p); alert(p);//返回的是string
str+=jsonObj[p].name+","+jsonObj[p].age+"<br>";
}

2。var jsonObj2={persons:[{name:"jordan",sex:"m",age:"40"},
{name:"bryant",sex:"m",age:"28"},
{name:"McGrady",sex:"m",age:"27"}
]};

调用JSON对象的属性,
1)jsonObj2.persons[0].name;
2)for循环调用方法,
var persons=jsonObj2.persons;//返回的值是一个数组object
for(var i=0;i<persons.length;i++){
cur_person=persons[i];
str+=cur_person.name+"'sex is "+cur_person.sex+" and age is "+cur_person.age+"<br>";
}
向jsonObj2的persons数组中插入,删除,更新 数据,
此处,可以利用javascript的Array对象的方法进行操作,如
var person={name:"yaoMing",sex:"m",age:"26"};
jsonObj2.persons.push(person);//数组最后加一条记录
jsonObj2.persons.pop();//删除最后一项
jsonObj2.persons.shift();//删除第一项
jsonObj2.persons.unshift(person);//数组最前面加一条记录
只要适合Javascript的方法都是可以用在JSON对象的数组中的!所以还有另外的方法splice( )进行crud操作!
//删除
jsonObj2.persons.splice(0,1);//开始位置,删除个数
//替换不删除
var self={name:"tom",sex:"m",age:"24"};
var brother={name:"Mike",sex:"m",age:"29"};
jsonObj2.persons.splice(1,0,self,brother);//开始位置,删除个数,插入对象
//替换并删除
var self={name:"tom",sex:"m",age:"24"};
var brother={name:"Mike",sex:"m",age:"29"};
jsonObj2.persons.splice(0,1,self,brother);//开始位置,删除个数,插入对象

二,知道了在Javascript中JSON的基本操作,但这还不能与后台进行交互,在着之前还需要把它转化为 String!

方法有两个,1)引入一个方法 :

function obj2str(o){
var r = [];
if(typeof o =="string") return "\""+o.replace(/([\'\"\\])/g,"\\$1").replace(/(\n)/g,"\\n").replace(/(\r)/g,"\\r").replace(/(\t)/g,"\\t")+"\"";
if(typeof o == "object"){
if(!o.sort){
r[0]="{"
for(var i in o){
r[r.length]=i;
r[r.length]=":";
r[r.length]=obj2str(o[i]);
r[r.length]=",";
}
if(!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)){
r[r.length]="toString:"+o.toString.toString();
r[r.length]=",";
}
r[r.length-1]="}"
}else{
r[0]="["
for(var i =0;i<o.length;i++){
r[r.length]=obj2str(o[i]);
r[r.length]=",";
}
r[r.length-1]="]"
}
return r.join("");
}
return o.toString();
}

网上找的,还蛮好用地!!在此对原创者表示感谢啦!!

2)JSON官方网站提供的一个开源的JSON解析器和字符串转换 器,json.js

到此为止的话,就可以顺利的将客户端这边的记录传到后台!!

下面还有 一个服务器端如何处理的过程,下会接着进行总结!!

 
Copyright 2005-2007. Hello Wiki designed by Fen, Blogger Templates by Blogcrowds.