AJAX

http://blog.youkuaiyun.com/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方法向服务器发送请求。

Method	Description
open(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()方法：

Method	Description
setRequestHeader(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属性都可以得到服务器的响应。

Property	Description
responseText	get the response data as a string
responseXML	get 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>

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

Property	Description
onreadystatechange	Stores a function (or the name of a function) to be called automatically each time the readyState property changes
readyState	Holds 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 ready
status	200: "OK" 404: Page not found

---XMLHttp End---