Ajax 学习笔记

• 创建XMLHttpRequest 对象

variable=new XMLHttpRequest();

/*老版IE(IE5,IE6)*/

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

---

• 向服务器发送请求

• xmlhttp.open("请求的类型","请求的URL","是否为异步")

/*GET请求*/

xmlhttp.open("GET","xxx.php",true);
xmlhttp.send();

/*POST请求*/

xmlhttp.open("GET","xxx.php",true);
xmlhttp.send();

---

• GET与POST请求的适用条件

• 大多数情况使用GET,因为GET请求简单快速

• 但以下情况使用POST

1. 无法使用缓存文件（更新服务器上的文件或数据库）
2. 向服务器发送大量数据（POST 没有数据量限制）
3. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

---

• 服务器响应

• 服务器响应有responseText和responseXML两种方式,常用responseXML

/*responseText,返回的是一个字符串*/

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

/*responseXML,返回的是一个XML对象*/

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("TTL");
for (i=0;i<x.length;i++)
{
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

---

• 状态响应事件

• readyState表示XMLHttpRequest对象的状态

1. 请求未初始化
2. 服务器连接已建立
3. 请求已接收
4. 请求处理中
5. 请求已完成，且响应已就绪

---

• 当状态发生改变时会触发onreadystatechange()事件

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

/*回调函数*/
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    /*另一个函数*/
        function()
    }
}

---

• 从数据库读取数据的步骤

• 客户端

• function xx(str){

  1.检查是否已选择某个数据,
  2.根据浏览器类型创建 XMLHttpRequest 对象
  3.当服务器响应就绪时执行所创建的函数
  4.把请求发送到服务器上的文件
  }

function showCustomer(str)
{
  var xmlhttp; 
  
  /*第一步*/
  if (str=="")
  {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  /*第二步*/
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // 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","/try/ajax/getcustomer.php?q="+str,true);
  xmlhttp.send();
}

• 服务端

• 查询数据库然后对客户端的请求做出回应

<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"

set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn

response.write("<table>")
do until rs.EOF
  for each x in rs.Fields
    response.write("<tr><td><b>" & x.name & "</b></td>")
    response.write("<td>" & x.value & "</td></tr>")
  next
  rs.MoveNext
loop
response.write("</table>")
%>

---

• 读取XML文件

1. 创建XMLHttpRequest对象x
2. 调用x.onreadystatechange()函数进行状态检测
3. 在x.onreadystatechange()函数中调用回调函数(如下)进行XML文档读取

function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Artist</th><th>Title</th></tr>";
  var x = xmlDoc.getElementsByTagName("CD");
  for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}

---

• 一个简单的PHP实例

/*javascipt代码*/

function showHint(str)
{
  var xmlhttp;
  if (str.length==0)
  { 
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // 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","/try/ajax/gethint.php?q="+str,true);
  xmlhttp.send();
}

/*PHP代码*/
<?php
// Fill up array with names
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";

//get the q parameter from URL
$q=$_GET["q"];

//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
  $hint="";
  for($i=0; $i<count($a); $i++)
  {
    if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
    {
      if ($hint=="")
      {
        $hint=$a[$i];
      }
      else
      {
        $hint=$hint." , ".$a[$i];
      }
    }
  }
}

// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
{
  $response="no suggestion";
}
else
{
  $response=$hint;
}

//output the response
echo $response;
?>

参考文献:http://www.runoob.com/ajax/ajax-xmlfile.html