ajax & json

AJAX技术是由Jesse James Garrett于2005年2月在一篇文章中提出来，是Asynchronous JavaScript XML(异步JavaScript 和XML)的简称，Ajax提供与服务器异步通信的能力，一个最简单的应用是无需刷新整个页面而在网页中更新一部分数据。

设计的初衷是用传统的Web技术也能达到FLASH的效果。后来我在实践中发现，可以把JavaScript 和 XML 这两种传统的Web技术让来实现。

Google应该是AJAX最主要推动者，Google Map、Gmail都在应用AJAX，但是对Google最主要业务搜索来说，AJAX的支持并不好，因为搜索引擎主要是抓取静态的网页，而无法抓取态的AJAX技术。


Ajax包括：
XHTML和CSS
使用DOM(DocumentObjectModel,i.e.文档对象模型)作动态显示和交互
使用XML和XSLT做数据交互和操作
使用XMLHttpRequest进行异步数据接收
使用JavaScript将它们绑定在一起

一个Ajax交互从一个称为XMLHttpRequest的JavaScript对象开始。如同名字所暗示的，它允许一个客户端脚本来执行HTTP请求，并且将会解析一个XML格式的服务器响应。Ajax处理过程中的第一步是创建一个XMLHttpRequest实例。使用HTTP方法（GET或POST）来处理请求，并将目标URL设置到XMLHttpRequest对象上
在JavaWeb服务器上，到达的请求与任何其它HttpServletRequest一样。在解析请求参数后，servlet执行必需的应用逻辑，将响应序列化到XML中，并将它写回HttpServletResponse

JavaScript 代码完成非常基本的任务：
## 从 Web 表单中获取需要的数据。JavaScript 代码很容易从 HTML 表单中抽取数据并发送到服务器。
## 修改表单上的数据：更新表单也很简单，从设置字段值到迅速替换图像。
## 建立要连接的 URL; 打开到服务器的连接。
## 设置服务器在完成后要运行的函数。
## 发送请求。

XMLHttpRequest 几个方法和属性。
open()：建立到服务器的新请求。
该方法有五个参数：
request-type：发送请求的类型。典型的值是 GET 或 POST，但也可以发送 HEAD 请求。
url：要连接的 URL。
asynch：如果希望使用异步连接则为 true，否则为 false。该参数是可选的，默认为 true。
username：如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值。
password：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值。

通常使用其中的前三个参数

send()：向服务器发送请求。
abort()：退出当前请求。
readyState：提供当前 HTML 的就绪状态。 onreadystatechange 属性允许指定一个回调函数。回调允许服务器反向调用 Web 页面中的代码
responseText：服务器返回的请求响应文本。
E.g.:
// --- html code, which calls callServer whenever the input box is changed ---
<form>
<p>City: <input type="text" name="city" id="city" size="25"
onChange="callServer();" /></p>
<p>State: <input type="text" name="state" id="state" size="25"
onChange="callServer();" /></p>
<p>Zip Code: <input type="text" name="zipCode" id="city" size="5" /></p>
</form>

// --- javascript ---
// --- create XMLHttpRequest on a browser (MSIE/opera/etc) ---
/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
@end @*/
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}


function callServer() {
// Get the city and state from the web form
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
// Only go on if there are values for both fields
if ((city == null) || (city == "")) return;
if ((state == null) || (state == "")) return;
// Build the URL to connect to
var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);
// Open a connection to the server
xmlHttp.open("GET", url, true);
// Setup a function for the server to run when it's done
xmlHttp.onreadystatechange = updatePage; //-> call updatePage when response is received (i.e. onreadystatechange)
// Send the request
xmlHttp.send(null);
}

// --- process server's response
function updatePage() {
if (xmlHttp.readyState == 4) {
var response = xmlHttp.responseText;
document.getElementById("zipCode").value = response;
}
}
// escape(): 它用于转义不能用明文正确发送的任何字符。比如，电话号码中的空格将被转换成字符 %20，从而能够在 URL 中传递这些字符

其中, 下面的"true" 表明这是一个异步连接, 这时表单将不等待服务器响应,用户可以继续访问表单.
>> xmlHttp.open("GET", url, true);



JSON:
JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串，然后就可以在函数之间轻松地传递这个字符串，或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。
JSON 用 hash结构 ({}包围的) 来定义一个数据, 用 [] 包围的多个数据来 定义一个数组.

用[index]来访问数组的某个元素，"."来访问数据的key, 如:
>> people.programmers[0].lastName
要把json数据转换为字符串
>> String newJSONtext = people.toJSONString();
利用 POST 请求发送 JSON 数据
>> var url = "organizePeople.php?timeStamp=" + new Date().getTime();
>> request.open("POST", url, true);
>> request.onreadystatechange = updatePage;
>> request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
>> request.send(people.toJSONString());
如果通过GET方法通过url直接发送JSON数据，需用escape(people.toJSONString()) 以避免url错误

在服务器上解释 JSON
在服务器端处理 JSON 基本上就需要两个步骤。
1. 针对编写服务器端程序所用的语言，找到相应的 JSON 解析器/工具箱/帮助器 API。
2. 使用 JSON 解析器/工具箱/帮助器 API 取得来自客户机的请求数据并将数据转变成脚本能理解的东西。

比如，假设为 PHP 使用的是 JSON-PHP 模板
require_once('JSON.php');
$json = new Services_JSON();
// accept POST data and decode it
$value = $json->decode($GLOBALS['HTTP_RAW_POST_DATA']);
// Now work with value as raw PHP