AJAX - 基本知识

Ajax=异步的JavaScript和XML

     通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

一、AJAX
- 创建 XMLHttpRequest 对象

1.什么是XMLHttpRequest对象

     所有现代浏览器（IE7、Chrome、Firefox、Safari、Opera）均支持XMLHttpRequest对象，XMLHttpRequest对象用来在后台与服务器交换数据，实现页面局部刷新。

2.如何创建XMLHttpRequest对象

     一般浏览器都支持XMLHttpRequest对象，但部分IE浏览器支持的是ActiveXObject。

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

3.XMLHttpRequest对象如何与服务器交换数据

3.1 向服务器发送请求

     我们使用XMLHttpRequest的Open和Send方法：

xmlhttp.open("GET","text.txt",true);

xmlhttp.send();

3.1.1 使用GET请求

     一个简单的GET请求：

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();

     为了避免每次获得的是缓存中的内容，为了避免，可以在url中加一个唯一的时间ID：

xmlhttp.open("GET","demo_get.asp?t="+Math.random(),true);
xmlhttp.send();

     通过GET向服务器发送数据Demo：

xmlhttp.open("GET","demo_get.asp?name=heaven&age=26",true);
xmlhttp.send();

3.1.3 使用POST请求：

     一个简单的POST请求：

xmlhttp.open("POST","demo_get.asp",true);
xmlhttp.send();

     如果像html表单那样POST数据，在setRequestHeader来添加HTTP头，使用send方法中规定要发送的数据：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

     向请求添加 HTTP 头：setRequestHeader(header,value)     
          header: 规定头的名称
          value: 规定头的值

3.1.3关于异步True或False:

     对于web开发来说，发送异步请求是一个巨大的进步，因为很多在服务器执行的任务都相当费时，在Ajax出现前，这可能会引起应用程序挂起或停止。

     通过Ajax,JavaScript无需等待服务器响应，而是：

          1.在等待服务器响应期间执行其它脚本

          2.当响应就绪后对响应进行处理

当Async=True时，应设置onreadystatechange事件中处于就绪状态时的执行函数：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

当Async=False时，处于同步状态，此时JavaScript会等到服务器就绪时才执行，无需写onreadystatechange监控函数：

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

3.2 服务器的响应

如果要获得来自服务器的响应，使用XMLHttpRequest中的responseText或responseXML。

3.2.1 使用responseText

     responseText 属性返回字符串形式的响应，因此您可以这样使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

3.2.2 使用responseXML

     如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：

 请求 books.xml 文件，并解析响应：

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;

3.3 Ajax 的 onreadystatechange事件

     当请求发送到服务器的整个过程中，我们需要执行一些基于响应的任务，即每当readyState改变时都会触发onreadystatechange事件，readyState属性存有XMLHttpRequest的状态信息。

下面是XMLHttpRequest对象的三个重要属性：

当readyState=4且status=200时，表示响应已就绪：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

3.4 使用callback回调函数

     callback函数是一种以参数的形式传递给另一个函数的函数，我们在处理Ajax任务时，一般都会写一个处理Ajax请求的标准函数，这个标准函数包括请求的url和发生onreadystatechange时间所执行的任务：

< html>

     < head>

     < script type ="text/javascript" >

          var xmlhttp;

          function loadXMLDoc(url,cfunc) {

               if (window.XMLHttpRequest) { 

                    // code for IE7+, Firefox, Chrome, Opera, Safari

                 xmlhttp= new XMLHttpRequest();

              } else { 

                    // code for IE6, IE5

                 xmlhttp= new ActiveXObject( "Microsoft.XMLHTTP" );

              }

               xmlhttp.onreadystatechange=cfunc;

               xmlhttp.open( "GET",url, true );

               xmlhttp.send();

          }

          function myFunction(){

               loadXMLDoc( "/ajax/test1.txt", function (){

                 if (xmlhttp.readyState==4
&& xmlhttp.status==200){

                   document.getElementById( "myDiv" ).innerHTML=xmlhttp.responseText;

                }

              });

          }

     </ script>

     </ head>

< body>

  < div id= "myDiv" >

             < h2> Let
AJAX change this text </h2 >

  </ div>

  < button type ="button" onclick= "myFunction()"> 通过
AJAX 改变内容 </ button>

     </ body>

</ html>