菜鸟学习笔记——Ajax初体验

AJAX = 异步 JavaScript 和 XML，简单点来讲，Ajax就是浏览器端程序向服务器端程序发送请求，服务器程序返回请求结果，并在浏览器端显示的技术。它的优点在于，无需重新加载整个网页的情况下，能够更新部分网页（目前对这部分还不了解）。

1、创建对象。

    var xmlHttp;

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

   可以稍微简化一下：window.XMLHttpRequest?xmlHttp=new XMLHttpRequest():xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

2、向服务器发送请求。

    xmlHttp.open(method,url,asynchronous,user,password);

    xmlHttp.send();

    其中，method分为GET和POST；url 是所请求的服务器端程序的地址，可以为绝对地址，也可以为相对地址；asynchronous默认值是true，也就是异步，设置为false即为同

   步；user 和password为可选。

   注：1）GET和POST的区别：

           a.需要发送数据时，

              GET：直接将数据放在url中，send不发送任何数据。如：

               var qString="Name=Crizy&birthday=0131";

               var url="index.jsp?"+qString;

               xmlHttp=open("GET",url);

               xmlHttp=send();

              POST：数据统一放在url中发送，并且必须设置请求头文件。如：

               var qString="Name=Crizy&birthday=0131";

               var url="index.jsp?";

               xmlHttp=open("POST",url);

               xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

               xmlHttp=send(qSring);

           b.GET更简单更快，一般时候都能使用。但在以下几种情况下，最好用POST。

               1）无法使用缓存文件（更新服务器上的文件或数据库）；

               2）向服务器发送大量数据（post没有数据限制）；

               3）发送包括未知字符的用户输入时，post比get更稳定更可靠。

      2）url中？的含义：？后面是传递的参数，get会忽略后面的内容。

      3）所请求的url一定要是服务器端程序，如jsp，asp等，不能是html等浏览器端程序。

3、服务器响应。

     responseText：获得字符串形式的响应数据；

     responseXML：获得XML形式的响应数据。

4、若想请求被响应，还需要执行一些基于响应的任务。

    onreadystatechange：存储函数，每当readyState改变时，就会调用此函数；

    readyState：请求的状态。存有XMLHttpRequest的状态。有5种。

                         0：请求未初始化；

                         1：服务器连接以建立；

                         2：请求以接收；

                         3：请求处理中；

                         4：请求以完成，响应已就绪。

    status：服务器返回的响应状态。200－OK；404－未找到页面。

    注：一般情况下，readyState 和status都需要设置。

5、若以上均设置成功，则可以创建Ajax异步交互程序了。

     例子参照http://www.w3school.com.cn/tiy/t.asp?f=ajax_responsexml

     book.xml内容http://www.w3school.com.cn/example/xmle/books.xml