AJAX

http://blog.csdn.net/yourtommy/article/details/7564892 

Basic

AJAX = Asynchronous JavaScript and XML。它不是新的语言，而是使用现有标准的新的方式。它可以和服务器交换数据，更新网页的一部分，而不重新装载整个网页。

AJAX基于Internet标准，与平台或浏览器无关。它由以下部分组成：

• XMLHttpRequest object (与服务器异步地交换数据)

• JavaScript/DOM (与信息交互或显示信息)

• CSS (定制数据的样式)

• XML (传输数据的格式)

AJAX的工作流程是：

1、当浏览器的某个事件发生时，创建一个XHMHttpRequest对象，然后发送一个HttpRequest给服务器；

2、服务器处理HttpRequest，创建响应并返回数据给浏览器；

3、浏览器用javascript处理返回的数据，并更新网页内容。

---Basic End---

XMLHttp

AJAX的关键对象是XMLHttpRequest Object，所有当代浏览器都有内置这个对象。

它使用open和send方法向服务器发送请求。

MethodDescriptionopen(method,url,async)Specifies the type of request, the URL, and if the request should be handled asynchronously or not.

method: the type of request: GET or POST
url: the location of the file on the server
async: true (asynchronous) or false (synchronous)send(string)Sends the request off to the server.

string: Only used for POST requests

Sample

<script type="text/javascript">
function loadXMLDoc()
{
  var xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","demo_get.asp",true);
  xmlhttp.send();
}
</script>

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");  }

>open(method,url,async)

>onreadystatechange, readyState, status

>callback 

一种以参数形式传递给另一个函数的函数

$(selector).toggle(speed,callback)

$(selector).fadeTo(speed,opacity,callback)

除了GET方法，我们也可以使用POST方法。如果要传入参数，我们需要使用setRequestHeader()方法：

MethodDescriptionsetRequestHeader(header,value)Adds HTTP headers to the request.

header: specifies the header name
value: specifies the header value

同时在send方法里指定要传输的数据。

例如：

<script type="text/javascript">
function loadXMLDoc()
{
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("POST","demo_post2.asp",true);
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlhttp.send("fname=Henry&lname=Ford");
}
</script>

XMLHttpRequest对象的responseText和responseXML属性都可以得到服务器的响应。

PropertyDescriptionresponseTextget the response data as a stringresponseXMLget the response data as XML data

前面已经演示过responseText，下面是responseXML的例子：

<script type="text/javascript">
function loadXMLDoc()
{
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange=function()
  {

    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      xmlDoc=xmlhttp.responseXML;
      txt="";
      x=xmlDoc.getElementsByTagName("ARTIST");
      for (i=0;i<x.length;i++)
      {
        txt=txt + x[i].childNodes[0].nodeValue + "<br />";
      }
      document.getElementById("myDiv").innerHTML=txt;
    }
  }
  xmlhttp.open("GET","cd_catalog.xml",true);
  xmlhttp.send();
}

</script>

关于处理服务器响应的属性有：

PropertyDescriptiononreadystatechangeStores a function (or the name of a function) to be called automatically each time the readyState property changesreadyStateHolds the status of the XMLHttpRequest. Changes from 0 to 4: 
0: request not initialized 
1: server connection established
2: request received 
3: processing request 
4: request finished and response is readystatus200: "OK"
404: Page not found

---XMLHttp End---