|
 |
栏目导栏 |
|
| |
|
|
|
|
|
资料搜索 |
|
| |
|
|
|
|
|
热门文章 |
|
| |
|
|
|
|
|
最新文章 |
|
| |
|
|
|
| |
| |
|
|
|
|
AJAX介绍 VjfLinux联盟
VjfLinux联盟
AJAX 关键词： VjfLinux联盟
JavaScript脚本和可扩展标记语言(XML) VjfLinux联盟
WEB浏览器技术 VjfLinux联盟
开放式WEB标准 VjfLinux联盟
浏览器以及独立平台 VjfLinux联盟
更好更快的网络应用程序 VjfLinux联盟
XML以及HTTP请求 VjfLinux联盟
VjfLinux联盟
AJAX = 异步JavaScript和可扩展标记语言 VjfLinux联盟
AJAX是一种运用JavaScript和可扩展标记语言(XML)，在网络浏览器和服务器之间传送或接受数据的技术。 VjfLinux联盟
VjfLinux联盟
AJAX是一种浏览器技术 VjfLinux联盟
AJAX是一种运用于浏览器中的技术。在浏览器和服务器之间，它使用异步数据进行转换，并允许网页向服务器索取少量信息而非整个网页。 VjfLinux联盟
这项技术标志着网络应用程序的微小化、迅捷化以及便捷化。 VjfLinux联盟
AJAX是一种不需依靠服务器软件而独立运做的浏览器技术。 VjfLinux联盟
VjfLinux联盟
AJAX是基于公共标准的 VjfLinux联盟
AJAX基于以下一些公共标准： VjfLinux联盟
XML 可扩展标记语言 VjfLinux联盟
HTML 超文本标记语言 VjfLinux联盟
CSS 层叠样式表 VjfLinux联盟
运用于ALAX的公共标准被很好的定义并且得到一些主要的常用浏览器支持。ALAX应用程序是独立的浏览器和平台（交互平台，交互浏览器技术）。 VjfLinux联盟
VjfLinux联盟
AJAX事关更好的网络应用程序 VjfLinux联盟
网络应用程序比单机应用程序有更多的好处，它能符合更多用户的需求，更易安装且方便支持和扩展。 VjfLinux联盟
然而，网络应用程序并非总是像单机应用程序一样好使唤。 VjfLinux联盟
而运用AJAX，网络应用程序将变地更实用（更小、更快、更易于使用）。 VjfLinux联盟
VjfLinux联盟
今天就开始使用AJAX吧！ VjfLinux联盟
无需学习新的知识。 VjfLinux联盟
AJAX是基于公共标准的。这些标准已经被大多数开发人员使用多年。 VjfLinux联盟
大多数现存的网络应用程序可以用AJAX进行重新编写以取代传统的超文本标记语言方式。 VjfLinux联盟
VjfLinux联盟
AJAX使用可扩展语言和HTTP请求 VjfLinux联盟
传统的网络应用程序会将输入的信息提交给服务器（使用HTML表单）。在服务器通过代码后，将会把一个全新的完整的页面传送给用户。 VjfLinux联盟
由于用户每次提交输入信息的时候服务器都将传回一个新的页面，传统的网络应用程序通常运行缓慢且使用不便。 VjfLinux联盟
使用AJAX，网页应用程序能不经重新下载整个网页就发送并重新获得数据。这是通过发送HTTP请求和使用JS对网页进行部分修改来实现的。 VjfLinux联盟
联系服务器的较好的方式是发送像可扩展标记语言这样的数据（其他的方法也可以采用）。 VjfLinux联盟
你将在这篇引论的下一章节更多地了解到这一切是如何做到的。 VjfLinux联盟
VjfLinux联盟
VjfLinux联盟
AJAX实例 VjfLinux联盟
VjfLinux联盟
AJAX可以用来创建更多交互式的网络应用程序。 VjfLinux联盟
VjfLinux联盟
AJAX 实例 VjfLinux联盟
在以下的AJAX范例中，我们将了解到当用户以网页格式输入数据时一个网页是如何与网络服务器连接的。 VjfLinux联盟
VjfLinux联盟
在下面的框中输入姓名 *实际操作请前往W3Schools VjfLinux联盟
First Name: VjfLinux联盟
Suggestions: VjfLinux联盟
VjfLinux联盟
实例解析-超文本标记语言模式 VjfLinux联盟
以上的范例所含超文本标记语言代码如下： VjfLinux联盟
<form> VjfLinux联盟
First Name: VjfLinux联盟
<input type="text" id="txt1" VjfLinux联盟
onkeyup="showHint(this.value)"> VjfLinux联盟
VjfLinux联盟
</form><p>Suggestions: <span id="txtHint"></span></p> VjfLinux联盟
就如你看到的，它只是一个普通的表单，里面有一称为"txt1"的输入框 VjfLinux联盟
下一段包括了一个称做“txtHint”的SPAN。这个SPAN是用来存储从服务器重新获得的信息的。 VjfLinux联盟
当用户输入数据，名为“showHint()”的函数将被执行。这个函数的执行是由“onkeyup”事件触发的。换种说法：每当用户在txt1区域内触动键盘按钮，showHint的功能就被执行。 VjfLinux联盟
VjfLinux联盟
实例解析- showHint()函数 VjfLinux联盟
showHint()函数是一种位于HTML顶端的简单的JS函数。 VjfLinux联盟
函数包含以下代码： VjfLinux联盟
function showHint(str) VjfLinux联盟
{ VjfLinux联盟
if (str.length > 0) VjfLinux联盟
{ VjfLinux联盟
var url="gethint.asp?sid="+Math.random()+"&q="+str VjfLinux联盟
xmlHttp=GetXmlHttpObject(stateChanged) VjfLinux联盟
xmlHttp.open("GET", url , true) VjfLinux联盟
xmlHttp.send(null) VjfLinux联盟
} VjfLinux联盟
else VjfLinux联盟
{ VjfLinux联盟
document.getElementById("txtHint").innerHTML="" VjfLinux联盟
} VjfLinux联盟
} VjfLinux联盟
每当有字符被键入输入区内就会执行这个函数 VjfLinux联盟
如有字符被输入文字输入区(str.length>0)函数就执行： VjfLinux联盟
VjfLinux联盟
建立一个XMLHTTP对象 VjfLinux联盟
发送一个HTTP请求到服务器上的"gethint.asp"上 VjfLinux联盟
当HTTP触发一次变动则XMLHTTP对象就会执行stateChanged()函数 VjfLinux联盟
VjfLinux联盟
实例解析 - stateChanged()函数 VjfLinux联盟
stateChanged()函数包含以下代码： VjfLinux联盟
function stateChanged() VjfLinux联盟
{ VjfLinux联盟
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") VjfLinux联盟
{ VjfLinux联盟
document.getElementById("txtHint").innerHTML=xmlHttp.responseText VjfLinux联盟
} VjfLinux联盟
} VjfLinux联盟
每当XMLHTTP对象的状态发生改变stateChanged()函数就会被执行 VjfLinux联盟
当状态改变为4(或为"完成"),txtHint span里就会显示反馈的文字 VjfLinux联盟
VjfLinux联盟
VjfLinux联盟
AJAX源代码 VjfLinux联盟
VjfLinux联盟
AJAX 实例 - AJAX 源码 VjfLinux联盟
下面的源代码是前一个页面的。你可以将它复制并粘贴，自己来尝试。 VjfLinux联盟
VjfLinux联盟
AJAX HTML页面 VjfLinux联盟
这是一个HTML网页。它包括了一个简单的HTML表单和关联JS的link VjfLinux联盟
<html> VjfLinux联盟
<head> VjfLinux联盟
<script src="http://img.sxsky.net/it/clienthint.js"></script> VjfLinux联盟
</head><body><form> VjfLinux联盟
First Name: VjfLinux联盟
<input type="text" id="txt1" VjfLinux联盟
onkeyup="showHint(this.value)"> VjfLinux联盟
</form><p>Suggestions: <span id="txtHint"></span></p> </body> VjfLinux联盟
</html>The JavaScript code is listed below. VjfLinux联盟
JS代码在下面 VjfLinux联盟
VjfLinux联盟
AJAX 的 JS VjfLinux联盟
这是JS代码，被保存在"clienthint.js"文件中 VjfLinux联盟
var xmlHttp VjfLinux联盟
function showHint(str) VjfLinux联盟
{ VjfLinux联盟
if (str.length > 0) VjfLinux联盟
{ VjfLinux联盟
var url="gethint.asp?sid=" + Math.random() + "&q=" + str VjfLinux联盟
xmlHttp=GetXmlHttpObject(stateChanged) VjfLinux联盟
xmlHttp.open("GET", url , true) VjfLinux联盟
xmlHttp.send(null) VjfLinux联盟
} VjfLinux联盟
else VjfLinux联盟
{ VjfLinux联盟
document.getElementById("txtHint").innerHTML="" VjfLinux联盟
} VjfLinux联盟
} VjfLinux联盟
function stateChanged() VjfLinux联盟
{ VjfLinux联盟
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") VjfLinux联盟
{ VjfLinux联盟
document.getElementById("txtHint").innerHTML=xmlHttp.responseText VjfLinux联盟
} VjfLinux联盟
} VjfLinux联盟
function GetXmlHttpObject(handler) VjfLinux联盟
{ VjfLinux联盟
var objXmlHttp=null VjfLinux联盟
if (navigator.userAgent.indexOf("Opera")>=0) VjfLinux联盟
{ VjfLinux联盟
alert("This example doesnt work in Opera") VjfLinux联盟
return; VjfLinux联盟
} VjfLinux联盟
if (navigator.userAgent.indexOf("MSIE")>=0) VjfLinux联盟
{ VjfLinux联盟
var strName="Msxml2.XMLHTTP" VjfLinux联盟
if (navigator.appVersion.indexOf("MSIE 5.5")>=0) VjfLinux联盟
{ VjfLinux联盟
strName="Microsoft.XMLHTTP" VjfLinux联盟
} VjfLinux联盟
try VjfLinux联盟
{ VjfLinux联盟
objXmlHttp=new ActiveXObject(strName) VjfLinux联盟
objXmlHttp.onreadystatechange=handler VjfLinux联盟
return objXmlHttp VjfLinux联盟
} VjfLinux联盟
catch(e) VjfLinux联盟
{ VjfLinux联盟
alert("Error. Scripting for ActiveX might be disabled") VjfLinux联盟
return VjfLinux联盟
} VjfLinux联盟
} VjfLinux联盟
if (navigator.userAgent.indexOf("Mozilla")>=0) VjfLinux联盟
{ VjfLinux联盟
objXmlHttp=new XMLHttpRequest() VjfLinux联盟
objXmlHttp.onload=handler VjfLinux联盟
objXmlHttp.onerror=handler VjfLinux联盟
return objXmlHttp VjfLinux联盟
} VjfLinux联盟
} VjfLinux联盟
VjfLinux联盟
AJAX 服务端页面 VjfLinux联盟
服务端页面被JS所调遣，是一名为"gethint.asp"的ASP文件，页面是用VBS来针对IIS所写的。它可以被轻松的写成PHP或是一些其他的服务语言，它只是检查了名字组并将相吻合的名字返回给客户端： VjfLinux联盟
dim a(30) VjfLinux联盟
a(1)="Anna" VjfLinux联盟
a(2)="Brittany" VjfLinux联盟
a(3)="Cinderella" VjfLinux联盟
a(4)="Diana" VjfLinux联盟
a(5)="Eva" VjfLinux联盟
a(6)="Fiona" VjfLinux联盟
a(7)="Gunda" VjfLinux联盟
a(8)="Hege" VjfLinux联盟
a(9)="Inga" VjfLinux联盟
a(10)="Johanna" VjfLinux联盟
a(11)="Kitty" VjfLinux联盟
a(12)="Linda" VjfLinux联盟
a(13)="Nina" VjfLinux联盟
a(14)="Ophelia" VjfLinux联盟
a(15)="Petunia" VjfLinux联盟
a(16)="Amanda" VjfLinux联盟
a(17)="Raquel" VjfLinux联盟
a(18)="Cindy" VjfLinux联盟
a(19)="Doris" VjfLinux联盟
a(20)="Eve" VjfLinux联盟
a(21)="Evita" VjfLinux联盟
a(22)="Sunniva" VjfLinux联盟
a(23)="Tove" VjfLinux联盟
a(24)="Unni" VjfLinux联盟
a(25)="Violet" VjfLinux联盟
a(26)="Liza" VjfLinux联盟
a(27)="Elizabeth" VjfLinux联盟
a(28)="Ellen" VjfLinux联盟
a(29)="Wenche" VjfLinux联盟
a(30)="Vicky" VjfLinux联盟
q=request.querystring("q")if len(q)>0 then VjfLinux联盟
hint="" VjfLinux联盟
for i=1 to 30 VjfLinux联盟
x1=ucase(mid(q,1,len(q))) VjfLinux联盟
x2=ucase(mid(a(i),1,len(q))) VjfLinux联盟
if x1=x2 then VjfLinux联盟
if hint="" then VjfLinux联盟
hint=a(i) VjfLinux联盟
else VjfLinux联盟
hint=hint & " , " & a(i) VjfLinux联盟
end if VjfLinux联盟
end if VjfLinux联盟
next VjfLinux联盟
end if VjfLinux联盟
if hint="" then VjfLinux联盟
response.write("no suggestion") VjfLinux联盟
else VjfLinux联盟
response.write(hint) VjfLinux联盟
end if VjfLinux联盟
Linux联盟收集整理 ,转贴请标明原始链接,如有任何疑问欢迎来本站Linux论坛讨论 |
|
|
|
|
|
