ajax原理

经验:使用Ajax制作网页,同样要求主流浏览器之间显示的效果基本一致,通常做法是编写Ajax,JavaScript代码,一边在两个不同的浏览器上进行预览,并及时地调整细节,
Ajax 原理
现在，我们可能已经吊起了你的胃口，一个典型的Ajax交互究竟是什么样的呢？示例图展示了Ajax应用中的标准交互范型。

与标准Web客户端中的标准请求/响应方式相比，Ajax应用的做法有一点儿不同。

(1) 一个客户端事件会触发一个Ajax事件。

很多事情都可以触发Ajax事件，从简单的
onchange事件到某些特殊的用户操作。

代码可能如下：
(2) 创建XMLHttpRequest对象的一个实例。

使用open方法建立好对请求的调用。

然后
再设置好URL参数以及希望使用的HTTP方法，后者通常是GET或POST。

对send 方法的调用会真正发出这个请求。

这部分代码可能如下：
(3) 请求被发送到了服务器。

它可能是对任何服务器端脚本（比如用PHP或 编写的脚本）的调用。

(4) 服务器可以做任何事情，包括访问数据存储，或者甚至访问其他系统（比如账单系统或人力资源系统）。

(5) 请求被返回给浏览器。

Context-Type设置为text/xml——因为XMLHttpRequest对象只能处理text/xml类型的结果。

在更复杂的情况下，响应可能涉及并包含JavaScript、DOM操作或其他相关技术。

注意，还需要设置首部，使其不会在本地缓存结果。

如下代码可以做到这些：
(6) 在本例中，我们配置XMLHttpRequest对象，使其处理结果时调用函数callback()。

后者检查XMLHttpRequest对象的readyState属性，然后查看从服务器返回的状态码。

如果一切正常，callback()函数就会在客户端上做一些有趣的事情。

典型的callback()方法如下所示：
正如所见到的那样，这和普通的请求/响应模式不太一样，但还不至于令Web开发人员感到太陌生。

显然，在创建并设置XMLHttpRequest对象以及在“回调”中检查状态时，我们会进行一些操作。

二．Ajax异步交互
1.XMLHttpRequest对象
XMLHttpRequest是Ajax技术的核心。

在IE5.5中，该对象以ActiveX对象
的方式引入，被称为XMLHTTP。

后来，其他主流浏览器都提供了XMLHttpRequest
类。

以ActiveX对象方式出现的XMLHTTP与正统的XMLHttpRequest类创建
的方式并不一样，但创建之后所生成的对象的使用方式却是一样的
后台写入System.Web.HttpUtility.UrlEncode(strValue,Encoding.UTF8); 前台JS读取使用decodeURIComponent(值)解码显示
∙1. "名称/值"对的集合不同语言中，它被理解为对象(object)，
记录(record)，结构(struct)，字典(dictionary)，哈希表
(hash table)，键列表(keyed list)等
∙2. 值的有序列表多数语言中被理解为数组(array)
JSON使用：
JSON以一种特定的字符串形式来表示JavaScript 对象。

如果将具有这样一种形式的字符串赋给任意一个JavaScript 变量，那么该变量会变成一个对象引用，而这个对象就是字符串所构建出来的，好像有点拗口，我们还是用实例来说明。

这里假设我们需要创建一个User对象，并具有以下属性
∙用户ID
∙用户名
∙用户Email
您可以使用以下JSON形式来表示User对象：
{"UserID":11, "Name":"tht", "Email":"18039010◎"};
然后如果把这一字符串赋予一个JavaScript变量，那么就可以直接使用对象的任一属性了。

完整代码:
<script>
var User = {"UserID":11, "Name":"tht", "Email":"18039010◎"}; alert();
</script>
实际使用时可能更复杂一点，比如我们为Name定义更详细的结构，使它具有FirstName 和LastName：
{"UserID":11, "Name":{"FirstName":"tht","LastName":"Tang"}, "Email":"18039010@"}
完整代码:
<script>
var User = {"UserID":11,
"Name":{"FirstName":"tht","LastName":"Tang"},
"Email":"18039010@"};
alert(.FirstName);
</script>
现在我们增加一个新的需求，我们某个页面需要一个用户列表，而不仅仅是一个单一的用户信息，那么这里就需要创建一个用户列表数组。

下面代码演示了使用JSON形式定义这个用户列表：
[
{"UserID":11, "Name":{"FirstName":"tht","LastName":"Tang"}, "Email":"18039010@"},
{"UserID":12, "Name":{"FirstName":"aa","LastName":"bb"}, "Email":"xxx◎"},
{"UserID":13, "Name":{"FirstName":"cc","LastName":"dd"}, "Email":"xxx2◎"}
]
完整代码:
<script>
var UserList = [
{"UserID":11, "Name":{"FirstName":"tht","LastName":"Tang"}, "Email":"18039010@"},
{"UserID":12, "Name":{"FirstName":"aa","LastName":"bb"}, "Email":"xxx◎"},
{"UserID":13, "Name":{"FirstName":"cc","LastName":"dd"}, "Email":"xxx2◎"}
];
alert(UserList[0].Name.FirstName);
</script>
事实上除了使用"."引用属性外，我们还可以使用下面语句：
alert(UserList[0]["Name"]["FirstName"]); 或者
alert(UserList[0].Name["FirstName"]);
现在读者应该对JSON的使用有点认识了，归纳为以下几点：
∙对象是属性、值对的集合。

一个对象的开始于“{”，结束于“}”。

每一个属性名和值间用“:”提示，属性间用“,”分隔。

∙数组是有顺序的值的集合。

一个数组开始于"["，结束于"]"，值之间用","分隔。

∙值可以是引号里的字符串、数字、true、false、null，也可以是对象或数组。

这些结构都能嵌套。

∙字符串和数字的定义和C或C#基本一致。

小节：
本文通过一个实例演示，初步了解了JSON 的强大用途。

可以归结如下：
∙JSON 提供了一种优秀的面向对象的方法，以便将元数据缓存到客户机上。

∙JSON 帮助分离了验证数据和逻辑。

∙JSON 帮助为Web 应用程序提供了Ajax 的本质。