分享
 
 
 

AJAX、AJAX实例及AJAX源代码(asp)

王朝asp·作者佚名  2008-05-30
窄屏简体版  字體: |||超大  

AJAX介绍

AJAX 关键词:

JavaScript脚本和可扩展标记语言(XML)

WEB浏览器技术

开放式WEB标准

浏览器以及独立平台

更好更快的网络应用程序

XML以及HTTP请求

AJAX = 异步JavaScript和可扩展标记语言

AJAX是一种运用JavaScript和可扩展标记语言(XML),在网络浏览器和服务器之间传送或接受数据的技术。

AJAX是一种浏览器技术

AJAX是一种运用于浏览器中的技术。在浏览器和服务器之间,它使用异步数据进行转换,并允许网页向服务器索取少量信息而非整个网页。

这项技术标志着网络应用程序的微小化、迅捷化以及便捷化。

AJAX是一种不需依靠服务器软件而独立运做的浏览器技术。

AJAX是基于公共标准的

AJAX基于以下一些公共标准:

XML 可扩展标记语言

HTML 超文本标记语言

CSS 层叠样式表

运用于ALAX的公共标准被很好的定义并且得到一些主要的常用浏览器支持。ALAX应用程序是独立的浏览器和平台(交互平台,交互浏览器技术)。

AJAX事关更好的网络应用程序

网络应用程序比单机应用程序有更多的好处,它能符合更多用户的需求,更易安装且方便支持和扩展。

然而,网络应用程序并非总是像单机应用程序一样好使唤。

而运用AJAX,网络应用程序将变地更实用(更小、更快、更易于使用)。

今天就开始使用AJAX吧!

无需学习新的知识。

AJAX是基于公共标准的。这些标准已经被大多数开发人员使用多年。

大多数现存的网络应用程序可以用AJAX进行重新编写以取代传统的超文本标记语言方式。

AJAX使用可扩展语言和HTTP请求

传统的网络应用程序会将输入的信息提交给服务器(使用HTML表单)。在服务器通过代码后,将会把一个全新的完整的页面传送给用户。

由于用户每次提交输入信息的时候服务器都将传回一个新的页面,传统的网络应用程序通常运行缓慢且使用不便。

使用AJAX,网页应用程序能不经重新下载整个网页就发送并重新获得数据。这是通过发送HTTP请求和使用JS对网页进行部分修改来实现的。

联系服务器的较好的方式是发送像可扩展标记语言这样的数据(其他的方法也可以采用)。

你将在这篇引论的下一章节更多地了解到这一切是如何做到的。

AJAX实例

AJAX可以用来创建更多交互式的网络应用程序。

AJAX 实例

在以下的AJAX范例中,我们将了解到当用户以网页格式输入数据时一个网页是如何与网络服务器连接的。

在下面的框中输入姓名 *实际操作请前往W3Schools

First Name:

Suggestions:

实例解析-超文本标记语言模式

以上的范例所含超文本标记语言代码如下:

<form>

First Name:

<input type="text" id="txt1"

onkeyup="showHint(this.value)">

</form><p>Suggestions: <span id="txtHint"></span></p>

就如你看到的,它只是一个普通的表单,里面有一称为"txt1"的输入框

下一段包括了一个称做“txtHint”的SPAN。这个SPAN是用来存储从服务器重新获得的信息的。

当用户输入数据,名为“showHint()”的函数将被执行。这个函数的执行是由“onkeyup”事件触发的。换种说法:每当用户在txt1区域内触动键盘按钮,showHint的功能就被执行。

实例解析- showHint()函数

showHint()函数是一种位于HTML顶端的简单的JS函数。

函数包含以下代码:

function showHint(str)

{

if (str.length > 0)

{

var url="gethint.asp?sid="+Math.random()+"&q="+str

xmlHttp=GetXmlHttpObject(stateChanged)

xmlHttp.open("GET", url , true)

xmlHttp.send(null)

}

else

{

document.getElementById("txtHint").innerHTML=""

}

}

每当有字符被键入输入区内就会执行这个函数

如有字符被输入文字输入区(str.length>0)函数就执行:

建立一个XMLHTTP对象

发送一个HTTP请求到服务器上的"gethint.asp"上

当HTTP触发一次变动则XMLHTTP对象就会执行stateChanged()函数

实例解析 - stateChanged()函数

stateChanged()函数包含以下代码:

function stateChanged()

{

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

{

document.getElementById("txtHint").innerHTML=xmlHttp.responseText

}

}

每当XMLHTTP对象的状态发生改变stateChanged()函数就会被执行

当状态改变为4(或为"完成"),txtHint span里就会显示反馈的文字

AJAX源代码

AJAX 实例 - AJAX 源码

下面的源代码是前一个页面的。你可以将它复制并粘贴,自己来尝试。

AJAX HTML页面

这是一个HTML网页。它包括了一个简单的HTML表单和关联JS的link

<html>

<head>

<script src="clienthint.js"></script>

</head><body><form>

First Name:

<input type="text" id="txt1"

onkeyup="showHint(this.value)">

</form><p>Suggestions: <span id="txtHint"></span></p> </body>

</html>The JavaScript code is listed below.

JS代码在下面

AJAX 的 JS

这是JS代码,被保存在"clienthint.js"文件中

var xmlHttp

function showHint(str)

{

if (str.length > 0)

{

var url="gethint.asp?sid=" + Math.random() + "&q=" + str

xmlHttp=GetXmlHttpObject(stateChanged)

xmlHttp.open("GET", url , true)

xmlHttp.send(null)

}

else

{

document.getElementById("txtHint").innerHTML=""

}

}

function stateChanged()

{

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

{

document.getElementById("txtHint").innerHTML=xmlHttp.responseText

}

}

function GetXmlHttpObject(handler)

{

var objXmlHttp=null

if (navigator.userAgent.indexOf("Opera")>=0)

{

alert("This example doesnt work in Opera")

return;

}

if (navigator.userAgent.indexOf("MSIE")>=0)

{

var strName="Msxml2.XMLHTTP"

if (navigator.appVersion.indexOf("MSIE 5.5")>=0)

{

strName="Microsoft.XMLHTTP"

}

try

{

objXmlHttp=new ActiveXObject(strName)

objXmlHttp.onreadystatechange=handler

return objXmlHttp

}

catch(e)

{

alert("Error. Scripting for ActiveX might be disabled")

return

}

}

if (navigator.userAgent.indexOf("Mozilla")>=0)

{

objXmlHttp=new XMLHttpRequest()

objXmlHttp.onload=handler

objXmlHttp.onerror=handler

return objXmlHttp

}

}

AJAX 服务端页面

服务端页面被JS所调遣,是一名为"gethint.asp"的ASP文件,页面是用VBS来针对IIS所写的。它可以被轻松的写成PHP或是一些其他的服务语言,它只是检查了名字组并将相吻合的名字返回给客户端:

dim a(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"

q=request.querystring("q")if len(q)>0 then

hint=""

for i=1 to 30

x1=ucase(mid(q,1,len(q)))

x2=ucase(mid(a(i),1,len(q)))

if x1=x2 then

if hint="" then

hint=a(i)

else

hint=hint & " , " & a(i)

end if

end if

next

end if

if hint="" then

response.write("no suggestion")

else

response.write(hint)

end if

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有