ajax基礎（1）

1. 如需獲得來自服務器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。
   responseText 獲得字符串形式的響應數據。
   responseXML 獲得 XML 形式的響應數據。

//將服務器響應內容顯示到指定id處
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

1. onreadystatechange 事件
   當請求被髮送到服務器時，我們需要執行一些基於響應的任務。
   每當 readyState 改變時，就會觸發 onreadystatechange 事件。
   readyState 屬性存有 XMLHttpRequest 的狀態信息。
   下面是 XMLHttpRequest 對象的三個重要的屬性：
   onreadystatechange 存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
   readyState 存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
   0: 請求未初始化
   1: 服務器連接已建立
   2: 請求已接收
   3: 請求處理中
   4: 請求已完成，且響應已就緒
   status 200: “OK”
   404: 未找到頁面

當 readyState 等於 4 且狀態爲 200 時，表示服務器處理已完成並且響應已就緒：
相關代碼：

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

1. 在輸入框輸入字符串時可以發送ajax請求，實時給出輸入提示

<input type="text" id="txt1" οnkeyup="showHint(this.value)" />

function showHint(str)
{
var xmlhttp;
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML="";
  return;
  }
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=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/gethint.asp?q="+str,true);
xmlhttp.send();
}

4.根據下拉框選項實時更新內容，使用的觸發函數是

<select name="customers" οnchange="showCustomer(this.value)" 
xmlhttp.open("GET","/ajax/getcustomer.asp?q="+str,true); //創建一個新的http請求，並指定此請求的方法、URL以及驗證信息
xmlhttp.send();//可以調用send方法向服務器發送數據

5.解決爲不同瀏覽器創建不同的 XMLHTTP 對象的問題

function GetXmlHttpObject()
{
  var xmlHttp=null;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    }
  return xmlHttp;
}

function showHint(str)//根據輸入框內容進行提示的函數
{

  if (str.length==0)
    { 
    document.getElementById("txtHint").innerHTML="";
    return;
    }

  xmlHttp=GetXmlHttpObject()

  if (xmlHttp==null)
    {
    alert ("您的瀏覽器不支持AJAX！");
    return;
    }

var url="gethint.asp";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged() //狀態改變觸發的函數
{ 
  if (xmlHttp.readyState==4)
  { 
  document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
  }
}

以上內容來自http://www.w3school.com.cn/example/ajax_examples.asp 的總結