AJAX 高级.docx
《AJAX 高级.docx》由会员分享，可在线阅读，更多相关《AJAX 高级.docx（24页珍藏版）》请在冰豆网上搜索。
AJAX高级
AJAX请求实例
∙PreviousPage
∙NextPage
我们已看到AJAX可被用来创建更多交互性的应用程序。
AJAXSuggest实例
在下面的AJAX例子中，我们会演示当用户向一个标准的HTML表单中输入数据时网页如何与web服务器进行通信。
在下面的文本框中输入名字：
窗体顶端
FirstName：
窗体底端
Suggestions：
例子解释-HTML表单
表单的HTML代码：
Suggestions:
正如您看到的，这是一个简单的带有名为"txt1"输入域的HTML表单。
输入域的事件属性定义了一个由onkeyup事件触发的函数。
表单下面的段落包含了一个名为"txtHint"的span，这个span充当了由web服务器所取回的数据的位置占位符。
当用户输入数据时，名为"showHint（）"的函数就会被执行。
函数的执行是由"onkeyup"事件触发的。
另外需要说明的是，当用户在文本域中输入数据时把手指从键盘按键上移开时，函数showHint就会被调用。
例子解释-showHint（）函数
showHint（）函数是一个位于HTML页面head部分的很简单的JavaScript函数。
此函数包含以下代码：
functionshowHint（str）
{
if（str.length==0）
{
document.getElementById（"txtHint"）.innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject（）
if（xmlHttp==null）
{
alert（"您的浏览器不支持AJAX！
"）;
return;
}
varurl="gethint.asp";
url=url+"?
q="+str;
url=url+"&sid="+Math.random（）;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open（"GET",url,true）;
xmlHttp.send（null）;
}
每当有字符输入文本框时，此函数就会执行。
假如文本域中存在某些输入，函数就会执行：
∙定义回传数据的服务器的url（文件名）
∙使用文本框的内容向url添加参数（q）
∙添加一个随机的数字，以防止服务器使用某个已缓存的文件
∙创建一个XMLHTTP对象，并告知此对象当某个改变被触发时执行名为stateChanged的函数
∙向服务器发送一个HTTP请求
∙如果输入域为空，此函数仅仅会清空txtHint占位符的内容
例子解释-GetXmlHttpObject（）函数
上面的例子可调用名为GetXmlHttpObject（）的函数。
此函数的作用是解决为不同浏览器创建不同的XMLHTTP对象的问题。
这是此函数的代码：
functionGetXmlHttpObject（）
{
varxmlHttp=null;
try
{
//Firefox,Opera8.0+,Safari
xmlHttp=newXMLHttpRequest（）;
}
catch（e）
{
//InternetExplorer
try
{
xmlHttp=newActiveXObject（"Msxml2.XMLHTTP"）;
}
catch（e）
{
xmlHttp=newActiveXObject（"Microsoft.XMLHTTP"）;
}
}
returnxmlHttp;
}
例子解释-stateChanged（）函数
stateChanged（）函数包含下面的代码：
functionstateChanged（）
{
if（xmlHttp.readyState==4）
{
document.getElementById（"txtHint"）.innerHTML=xmlHttp.responseText;
}
}
每当XMLHTTP对象的状态发生改变时，stateChanged（）函数就会执行。
当状态变更为4（“完成”）时，txtHint占位符的内容就被响应文本来填充。
AJAX请求源代码
∙PreviousPage
∙NextPage
AJAXSuggest源代码的实例
下面的源代码属于上一节的AJAX实例。
您可以拷贝粘贴这些代码，然后亲自测试一下。
AJAXHTML页面
这是HTML页面。
它包含了一个简单的HTML表单，以及一个指向JavaScript的链接。
Suggestions:
下面列出了JavaScript代码。
AJAXJavaScript
这是JavaScript代码，存储在文件"clienthint.js"中：
varxmlHttp
functionshowHint（str）
{
if（str.length==0）
{
document.getElementById（"txtHint"）.innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject（）
if（xmlHttp==null）
{
alert（"您的浏览器不支持AJAX！
"）;
return;
}
varurl="gethint.asp";
url=url+"?
q="+str;
url=url+"&sid="+Math.random（）;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open（"GET",url,true）;
xmlHttp.send（null）;
}
functionstateChanged（）
{
if（xmlHttp.readyState==4）
{
document.getElementById（"txtHint"）.innerHTML=xmlHttp.responseText;
}
}
functionGetXmlHttpObject（）
{
varxmlHttp=null;
try
{
//Firefox,Opera8.0+,Safari
xmlHttp=newXMLHttpRequest（）;
}
catch（e）
{
//InternetExplorer
try
{
xmlHttp=newActiveXObject（"Msxml2.XMLHTTP"）;
}
catch（e）
{
xmlHttp=newActiveXObject（"Microsoft.XMLHTTP"）;
}
}
returnxmlHttp;
}
AJAX服务器页面-ASP和PHP
其实不存在什么“AJAX服务器”。
AJAX页面可以由任一因特网服务器提供服务。
在上一节的例子中被JavaScript调用的服务器页面是一个简单的名为"gethint.asp"的ASP文件。
下面我们列出了这个服务器页面代码的实例，使用ASP来编写。
AJAXASP实例
"gethint.asp"页面中的代码针对IIS使用VBScript编写。
它会检查一个名字数组，然后向客户端返回相应的名字：
<%
response.expires=-1
dima（30）
'用名字为数组赋值
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"
'从URL取得参数q
q=ucase（request.querystring（"q"））
'如果q的长度大于0，则查找所有的hint
iflen（q）>0then
hint=""
fori=1to30
ifq=ucase（mid（a（i）,1,len（q）））then
ifhint=""then
hint=a（i）
else
hint=hint&","&a（i）
endif
endif
next
endif
'如果找不到hint，则输出"nosuggestion"
'或者输出正确的值
ifhint=""then
response.write（"nosuggestion"）
else
response.write（hint）
endif
%>
AJAX数据库实例
∙PreviousPage
∙NextPage
AJAX可用来与数据库进行动态地通信。
AJAX数据库实例
在下面的AJAX例子中，我们将演示如何使用AJAX技术令网页从数据库读取信息。
在下面的框中选择一个名字
窗体顶端
请选择一位客户：
窗体底端
客户信息将在此处列出。
AJAX实例解释
上面的实例包含了一个简单的HTML表单以及执行JavaScript的链接：
客户信息将在此处列出。
升级会员 