Ajax怎么用的详解及实现

Ajax：Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

WEB开发中大量使用。

var xmlhttp;

function createXMLHttpRequest() {
		    if (window.XMLHttpRequest) { 	// 如果可以取得XMLHttpRequest
		        xmlHttp = new XMLHttpRequest();  // Mozilla、Firefox、Safari 
		    }
		    else if (window.ActiveXObject) { // 如果可以取得ActiveXObject
		        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer
		    }
		}


**//使用ajax获取服务器时间**
function getTime(){
	//设置回调函数
	xmlhttp.onreadystatechange=processRequest;
	//发送post请求true 表示异步请求 false标识同步请求
	xmlhttp.open("post","time.jsp",true);
	//如果以post方式请求，必须添加，因为
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	//发送请求，也就是参数
	xmlhttp.send(null);
}

**//回调函数**
	function handleStateChange() { // 在這邊處理非同步回應
			if (xmlHttp.readyState == 4) {
				if (xmlHttp.status == 200) {
					alert("已响应" + xmlHttp.responseText);
//装换成gson对象
			var z = eval("(" + xmlHttp.responseText + ")");
			console.log(z.name);
	document.getElementById("oo").innerHTML = (z.name);
		}
	}
}

在Ajax应用程式中，如果是Mozilla/Firefox/Safari中，可以透过XMLHttpRequest来发出非同步请求，如果是在IE6 或IE先前版本，则是使用ActiveXObject来发出非同步请求，为了各个不同浏览器间的相容性，必须进行测试可取得XMLHttpRequest 或ActiveXObject，例如：

var xmlHttp;
function createXMLHttpRequest() {
    if (window.XMLHttpRequest) { // 如果可以取得XMLHttpRequest
        xmlHttp = new XMLHttpRequest();  // Mozilla、Firefox、Safari 
    }
    else if (window.ActiveXObject) { // 如果可以取得ActiveXObject
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer
    }
}

这段程式码可以满足大部份的浏览器，您可以再进一步检查是否真正生成了物件，例如：

if(xmlHttp) {
    // do request
}
else {
    alert("您的浏览器不支援这个Ajax程式的功能");
}

在建立XMLHttpRequest之后，则可以使用以下的几种方法：

void open(string method, string url, boolean asynch//异步或者同步, string username, string password)
开启对伺服端的连结；method为请求方式（GET、POST）；url为伺服端位址，如果是GET的话，可加上请求参数与值；asynch为非同步设定，预设是true，表示使用非同步方式。

void send(content)
对伺服端传送请求，content这以放XML、输入串流、字串、JSON格式的内容，放进去会放在POST本体中发送。

void setRequestHeader(string header, string value)
为HTTP请求设定一个给定的 header 设定值。

void abort()
用来中断请求。
string getAllResponseHeaders()
传回一个字串，其中包含HTTP请求的所有回应标头。

string getResponseHeader(string header)
传回一个字串，其中包含指定的回应标头值。

XMLHttpRequest包括以下几个标准属性：

onreadystatechange
参考至callback函式，readyState每次改变时，都会呼叫onreadystatechange所参考的函式。
readyState
会有0到4的数值，分别表示不同的请求状态：
0 = 未初始化的连线（uninitialized），还没呼叫open()
1 = 载入中（loading），呼叫open()，还没呼叫send()
2 = 已载入（loaded），呼叫send()，请求header/status准备好
3 = 互动中（interactive），正在与伺服器互动中
4 = 请求完成（completed），完成请求
responseText
伺服器传来的请求回应文字，会设定给这个属性。
responseXML
伺服器传来的请求回应如果是XML，会成为DOM设定给这个属性。

status
伺服器回应的状态码，例如200是OK，404为Not Found…
statusText
伺服器回应的状态文字。

一个基本的Ajax请求可以是以下的片段：

function startRequest() {
    createXMLHttpRequest(); // 建立非同步请求物件
    xmlHttp.onreadystatechange = handleStateChange;  // 设定callback函式
    xmlHttp.open("GET", "simpleResponse.txt");  // 开启连结
    xmlHttp.send(null);  // 传送请求
}

function handleStateChange() { // 在这边处理非同步回应
    …
}

当每次readyState改变时，都会呼叫以上程式片段中设定的handleStateChange()函式，通常会在请求完成进行处理，所以您可以如以下的程式片段来处理回应：

function handleStateChange() {
   if (xmlHttp.readyState == 4) { // 测试状态是否请求完成
     if (xmlHttp.status == 200) { // 如果伺服端回应OK
          alert("伺服器回应" + xmlHttp.responseText);  // 这边只取得回应文字
     }
   }
}