什么是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状态的对应文本 |
方法：
|
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请求作了解，此处不作演示)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> window.onload=function(){ //1.获取a节点，并为其添加onclick响应函数 document.getElementsByTagName("a")[0].onclick=function(){ //3.创建一个XMLHttpRequest对象 var xmlhttp = new XMLHttpRequest(); //4.准备发送请求的数据：url var url=this.href +"?time="+new Date(); var method="GET"; //var method="POST" //5.调用xmlhttprequest对象的open方法 xmlhttp.open(method,url); //request.setRequestHeader("ContentType","application/x-www-form-urlencoded"); //6.调用xmlhttprequest对象的send方法 xmlhttp.send(null); //request.send("name='aaa'"); //7.为xmlhttprequest对象添加onreadystatechange响应函数 xmlhttp.onreadystatechange=function(){ //8.决断响应是否完成：xmlhttprequest对象的readystate属性值为4 if(xmlhttp.readyState==4){ //9.再决断响应是否可用：xmlhttprequest对象status属性值为200 if(xmlhttp.status==200){ //10.打印响应结果：responseText alert(xmlhttp.responseText); } } } //2.取消a节点的默认行为 return false; } } </script> </head> <body> <a href="helloAjax.txt">helloAjax</a> </body> </html>
Ajax数据格式之 HTML
HTML 由一些普通文本组成。如果服务器通过 XMLHttpRequest 发送 HTML， 文本将存储在 responseText 属性中。
不必从 responseText 属性中读取数据。它已经是希望的格式，可以直接将它插入到页面中。
插入 HTML 代码最简单的方法是更新这个元素的 innerHTML 属性。
一定要注意写js时尤其是循环等时注意别手抖写成int i = 0;需要写成var i = 0!!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>People at Clearleft</title> <style type="text/css"> @import url("clearleft.css"); </style> <script type="text/javascript"> window.onload = function(){ var aNodes = document.getElementsByTagName("a"); for(var i = 0;i<aNodes.length;i++){ aNodes[i].onclick = function(){ var request = new XMLHttpRequest(); var method = "GET"; var url = this.href; request.open(method,url); request.send(null); request.onreadystatechange = function(){ if(request.readyState == 4){ if(request.status == 200 || request.status == 304){ document.getElementById("details").innerHTML = request.responseText; } } } return false; } } } </script> </head> <body> <h1>People</h1> <ul> <li> <a href="files/andy.html">Andy</a> </li> <li> <a href="files/andy.html">Richard</a> </li> <li> <a href="files/andy.html">Jeremy</a> </li> </ul> <div id="details"></div> </body> </html>
//缺点：若需要通过 AJAX 更新一篇文档的多个部分，HTML 不合适
Ajax数据格式之 XML
此处不作赘述，略显麻烦，仅贴出部分代码
//结果为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;
Ajax数据格式之 JSON
什么是JSON
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 对象