Ajax第一天——入门与基本概念

什么是Ajax

　　Ajax被认为是(Asynchronous JavaScript and XML的缩写）。异步的js和xml

　　异步和同步：同步->类似打电话，接完一个再接下一个；异步：->类似短信，可以接收多条短信，不会由于一条短信来了而停止接收另外一条短信。

　　现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.即无刷新的与服务器的通信。

　　典型应用就是搜索框的应用

　　Ajax与服务器端语言无关。

　　不用刷新整个页面便可与服务器通讯的办法：

　　　　Flash

　　　　Java applet

　　　　框架：如果使用一组框架构造了一个网页，可以只更新其中一个框架，而不必惊动整个页面 隐藏的iframe

　　　　XMLHttpRequest：该对象是对 JavaScript 的一个扩展，可使网页与服务器进行通信。是创建 Ajax 应用的最佳选择。

　　　　　　实际上通常把 Ajax 当成 XMLHttpRequest 对象的代名词，使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取

　　　　　　发送请求，读取结果等都是通过此对象

　　大致过程：前台（xhtml js等） —— 传输(协议:xmlhttp;格式xml,json等）—— 服务器（php,jsp等）

XMLHttpRequest概述

　　XMLHttpRequest 作为一个对象，我们对一个 对象首要的了解是了解它的一些属性和方法

　　　　　　属性：

onreadystatechange	每个状态改变时都会触发这个事件处理程序，通常会调用一个JavaScript函数
readyState	请求的状态（0.1.2.3.4）
responseText	服务器的响应，表示为一个串
responseXML	服务器的响应，表示为XML，这个对象可以解析为一个DOM对象
status	服务器的HTTP状态
statusText	HTTP状态的对应文本

　　　　　　[b]方法：[/b]

abort()	停止当前请求
getAllResponseHeaders()	把HTTP请求的所有相应首部作为键/值对返回。
getResponseHeader("header")	返回指定首部的串值。
open("method","url")	建立对服务器的调用。method参数可以是GET、POST或PUT等；url参数可以是相对URL或绝对URL。这个方法还包括3个可选参数。
send(content)	向服务器发送请求。
setRequestHeader("header","value")	把指定首部设置为所提供的值，在设置任何首部之前必须先调用open()方法。

　　XMLHttpRequest对象的创建

　　　　（为了高效省时，可以将对象的创建作为一个函数以便复用，以下不做详尽的兼容处理）

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

　　利用XMLHttpRequest 实例与服务器进行通信包含以下3个关键部分：

　　　　onreadystatechange 事件处理函数

　　　　open 方法

　　　　send 方法

　　HelloWorld实例：(发post请求作了解，此处不作演示)

//结果为xml，所以需要使用responseXML
var result = request.responseXML;
//xml不能直接使用，需要先创建节点再加入
var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
var website = result.getElementsByTagName("website")[0].firstChild.nodeValue;
var email = result.getElementsByTagName("email")[0].firstChild.nodeValue;

View Code
　　　　[b]Ajax数据格式之 JSON[/b]

[b]　　　　　　什么是JSON[/b]

　　　　　　 JSON（JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。

　　　　　　JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。

　　　　　　JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。

　　　　　　一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。

　　　　　　更轻巧，但易读性稍差。eval()函数存在风险。

　　　　　　JSON的格式请参见 http://www.cnblogs.com/SkySoot/archive/2012/04/17/2453010.html

　　　　　　如何解析JSON

　　　　　　JSON 只是一种文本字符串。它被存储在 responseText 属性中

　　　　　　为了读取存储在 responseText 属性中的 JSON 数据，需要根据 JavaScript 的 eval 语句。

　　　　　　函数 eval 会把一个字符串当作它的参数。然后这个字符串会被当作 JavaScript 代码来执行。

　　　　　　因为 JSON 的字符串就是由 JavaScript 代码构成的，所以它本身是可执行的

　　　　　　JSON提供了json.js包，下载http://www.json.org/json.js后，使用parseJSON()方法将字符串解析成 JS 对象