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

AJAX 技术

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


局部刷新

同步和异步交互

AJAX 实现步骤

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


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

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

2. 和服务器建立连接

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

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

3. 设置回调函数

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

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

4. 向服务器发送请求

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

xhr.send(null);

如果发送的是POST请求&＃xff0c;可以通过该参数指定要发送的请求参数&＃xff0c;例如下面的代码&＃xff1a;

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


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

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

处理服务器响应

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

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


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

document.getElementById("div_result").innerHTML&＃61; xhr.responseText;


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

JSON 格式数据

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

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


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


JSON 格式数据