AJAX简单入门

1. 什么是AJAX

AJAX = Asynchronous JavaScript and XML(异步JS和xml)

作用：与服务器局部交互，避免整个页面的提交，提高交互体验与速度.

2. 实例

// JavaScript Document
var xmlHttp = null;

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 || xmlHttp.readyState == "complete")
    { 
        document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
    }
}

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

例子的解释：

showHint() 函数

每当在输入域中输入一个字符，该函数就会被执行一次。

如果文本框中有内容 (str.length > 0)，该函数这样执行：

1. 定义要发送到服务器的 URL（文件名）
2. 把带有输入域内容的参数 (q) 添加到这个 URL
3. 添加一个随机数，以防服务器使用缓存文件
4. 调用 GetXmlHttpObject 函数来创建 XMLHTTP 对象，并在事件被触发时告知该对象执行名为 stateChanged 的函数
5. 用给定的 URL 来打开打开这个 XMLHTTP 对象
6. 向服务器发送 HTTP 请求

如果输入域为空，则函数简单地清空 txtHint 占位符的内容。

stateChanged() 函数

每当 XMLHTTP 对象的状态发生改变，则执行该函数。

在状态变成 4 （或 "complete"）时，用响应文本填充 txtHint 占位符 txtHint 的内容。

GetXmlHttpObject() 函数

AJAX 应用程序只能运行在完整支持 XML 的 web 浏览器中。

上面的代码调用了名为 GetXmlHttpObject() 的函数。

该函数的作用是解决为不同浏览器创建不同 XMLHTTP 对象的问题。

服务端的代码：

gethint.asp的代码:

<?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;
?>

原理：根据request的请求参数获取名称，最后echo回reponse给ajax的httpXml请求，其中xmlHttp.responseText来截获返回的代码.

小结： Ajax是浏览器通过httpXml请求与服务端进行交互的一个技术，通常以json报文与reponseText形式返回.