AJAX学习心得(二)(2)_H5之家 - 中国HTML5教程资源分享第一站

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

Try it yourself »

注意: onreadystatechange 被触发了4次, 每次都对应readyState的一次变化.

使用Callback函数

callback 函数是一个用来作为另外一个函数的参数传递的.

如果我们有不止一个任务在网站上, 我们应该创建一个标准的函数来创建XMLHttpRequest对象, 并且为每一个AJAX任务调用它.

这个函数调用应该包含URL，以及onreadystatechange（每次调用可能会不同）应该做什么 :

例子

function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementByIdx_x_x("myDiv").innerHTML=xmlhttp.responseText;
    }
});
}

Try it yourself »

AJAX 用来创建交互性更强的应用.

AJAX ASP/PHP 例子

下面的例子会解释一个网页，在用户录入字符的时候怎么和服务器通信:

例子

Start typing a name in the input field below:

Suggestions:

Try it yourself »

例子解释 - showHint() 函数

当用户在上面的输入区域打字时，函数 "showHint()" 就会被执行. 这个函数是被 "onkeyup" 事件触发的:

代码解析:

如果输入区域是空 (str.length==0), 函数清空txtHint占位符的内容，并退出函数.

如果输入区域非空, showHint() 函数执行一下操作:

AJAX 服务器页面 - ASP and PHP

服务器文件有两个个版本，一个使用asp写的，一个是用php写的.

ASP 文件

"gethint.asp" 的代码检查一个名字数组，并返回响应的名字给浏览器:

<%
response.expires=-1
dim a(30)
'Fill up array with names
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"

'get the q parameter from URL
q=ucase(request.querystring("q"))

'lookup all hints from array if length of q>0
if len(q)>0 then
hint=""
for i=1 to 30
    if q=ucase(mid(a(i),1,len(q))) then
      if hint="" then
        hint=a(i)
      else
        hint=hint & " , " & a(i)
      end if
    end if
next
end if

'Output "no suggestion" if no hint were found
'or output the correct values
if hint="" then
response.write("no suggestion")
else
response.write(hint)
end if
%>

PHP 文件

下面的是同样的代码，不过是用php写的

注意: 为了运行php的例子，需要改变url的值从"gethint.asp" 改为 "gethint.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;
?>on the server called by the JavaScript above is an ASP file called "gethint.asp". Below we have