Ajax 和 JSON 助理解性概念图论说明

---

AJAX 技术

---

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
Ajax 是JavaScript、XML、CSS、DOM等多种已有技术的组合，可以实现客户端的异步请求操作。
从而可以实现在不需要刷新页面的情况下与服务器进行通信，减少了用户的等待时间，减轻了服务器和带宽的负担，提供更好的服务响应。
传统的Web应用采用同步交互的形式,即用户向服务器发送一个请求，服务器都会将一个整体的页面进行刷新，并重新生成代码。
采用了AJAX技术之后，就可以实现局部的内容变更，而不用再进行整体的页面刷新，显然处理的性能要比前者高很多。

局部刷新

同步和异步交互

---

AJAX 实现步骤

---

Ajax使用的技术中，最核心的技术就是XMLHttpRequest，它是一个具有应用程序接口的JavaScript对象，能够使用超文本传输协议（HTTP）连接一个服务器。
通过XMLHttpRequest对象，Ajax可以像桌面应用程序一样只同服务器进行数据层面的交换，
而不用每次都刷新页面，也不用每次都将数据处理的工作交给服务器来完成，这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。

1. 创建 XMLHttpRequest 对象
var xhr = new ActiveXObject(“Microsoft.XMLHTTP”); IE低版本浏览器

var xhr = new XMLHttpRequest(); 适用于现在的大多数版本

2. 和服务器建立连接

XMLHttpRequest对象的open()方法来完成

open(“method”,“URL”[,asyncFlag[,“userName”[, “password”]]])

3. 设置回调函数

XMLHttpRequest对象的onreadystatechange属性来完成
onreadystatechange属性用于指定状态改变时所触发的事件处理器。在Ajax中，每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数。
xhr.onreadystatechange = getResult;
readyState属性用于获取请求的状态。

XMLHttpRequest对象的属性
responseText属性用于获取服务器的响应，表示为字符串。
status属性用于返回服务器的HTTP状态码。

4. 向服务器发送请求

向服务器发送请求。XMLHttpRequest对象的send()方法可以实现向服务器发送请求，该方法需要传递一个参数，如果发送的是GET请求，可以将该参数设置为null status属性用于返回服务器的HTTP状态码。

xhr.send(null);

如果发送的是POST请求，可以通过该参数指定要发送的请求参数，例如下面的代码：

var param="user="+form1.user.value+"&pwd=
"+form1.pwd.value+"&email="+form1.email.value;    //组合参数
xhr.send(param);		//向服务器发送请求

需要注意的是：在发送POST请求前，还需要设置正确的请求头，即需要在 xhr.send(param);语句之前添加以下代码：

xhr.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);

---

处理服务器响应

---

在向服务器发送请求时，需要通过XMLHttpRequest对象的onreadystatechange属性指定一个回调函数，用于处理服务器响应。在这个回调函数中，首先需要判断服务器的请求状态，保证请求已完成，然后再根据服务器的HTTP状态码，判断服务器对请求的响应是否成功，如果成功，则获取服务器的响应反馈给客户端。
XMLHttpRequest对象提供了两个用来访问服务器响应的属性，一个是responseText属性，返回字符串响应，另一个是responseXML属性，返回XML响应。

function getResult() {
    if (xhr.readyState == 4) {     		// 判断请求状态
        if (xhr.status == 200) {     		// 请求成功，开始处理返回结果
            alert(xhr.responseText);	// 显示判断结果
        } else {     				// 请求页面有错误
            alert("您所请求的页面有错误！");
        }
    }
}

如果需要将响应结果显示到页面的指定位置，也可以先在页面的合适位置添加一个

或 标记，将设置该标记的id属性（如div_result），然后在回调函数中应用以下代码显示响应结果。

document.getElementById("div_result").innerHTML= xhr.responseText;

一个完整的实例——用户注册时检测用户名是否唯一

---

JSON 格式数据

---

如果JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式
JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
JSON 具有自我描述性，更易理解

{key1 : value1, key2 : value2, ... keyN : valueN } 

var json = {sid:1,sname:"zs",sex:"男" };
var json2 = {"sid":1,"sname":"zs","sex":"男" };
var json3 = [{"sid":1,"sname":"zs1","sex":"男"},{"sid":2,"sname":"zs2","sex":"男"}]
alert(json2.sname);
alert(json3[1].sname);

---

JSON 格式数据

---