AJAX介绍 AJAX 关键词: AJAX = 异步JavaScript和可扩展标记语言 AJAX是一种浏览器技术 AJAX是基于公共标准的 AJAX事关更好的网络应用程序 今天就开始使用AJAX吧! AJAX使用可扩展语言和HTTP请求 AJAX可以用来创建更多交互式的网络应用程序。 AJAX 实例 在下面的框中输入姓名 *实际操作请前往W3Schools 实例解析-超文本标记语言模式 </form><p>Suggestions: <span id=”txtHint”></span></p> 实例解析- showHint()函数 建立一个XMLHTTP对象 实例解析 – stateChanged()函数 AJAX 实例 – AJAX 源码 AJAX HTML页面 AJAX 的 JS AJAX 服务端页面
JavaScript脚本和可扩展标记语言(XML)
WEB浏览器技术
开放式WEB标准
浏览器以及独立平台
更好更快的网络应用程序
XML以及HTTP请求
AJAX是一种运用JavaScript和可扩展标记语言(XML),在网络浏览器和服务器之间传送或接受数据的技术。
AJAX是一种运用于浏览器中的技术。在浏览器和服务器之间,它使用异步数据进行转换,并允许网页向服务器索取少量信息而非整个网页。
这项技术标志着网络应用程序的微小化、迅捷化以及便捷化。
AJAX是一种不需依靠服务器软件而独立运做的浏览器技术。
AJAX基于以下一些公共标准:
XML 可扩展标记语言
HTML 超文本标记语言
CSS 层叠样式表
运用于ALAX的公共标准被很好的定义并且得到一些主要的常用浏览器支持。ALAX应用程序是独立的浏览器和平台(交互平台,交互浏览器技术)。
网络应用程序比单机应用程序有更多的好处,它能符合更多用户的需求,更易安装且方便支持和扩展。
然而,网络应用程序并非总是像单机应用程序一样好使唤。
而运用AJAX,网络应用程序将变地更实用(更小、更快、更易于使用)。
无需学习新的知识。
AJAX是基于公共标准的。这些标准已经被大多数开发人员使用多年。
大多数现存的网络应用程序可以用AJAX进行重新编写以取代传统的超文本标记语言方式。
传统的网络应用程序会将输入的信息提交给服务器(使用HTML表单)。在服务器通过代码后,将会把一个全新的完整的页面传送给用户。
由于用户每次提交输入信息的时候服务器都将传回一个新的页面,传统的网络应用程序通常运行缓慢且使用不便。
使用AJAX,网页应用程序能不经重新下载整个网页就发送并重新获得数据。这是通过发送HTTP请求和使用JS对网页进行部分修改来实现的。
联系服务器的较好的方式是发送像可扩展标记语言这样的数据(其他的方法也可以采用)。
你将在这篇引论的下一章节更多地了解到这一切是如何做到的。
AJAX实例
在以下的AJAX范例中,我们将了解到当用户以网页格式输入数据时一个网页是如何与网络服务器连接的。
First Name:
Suggestions:
以上的范例所含超文本标记语言代码如下:
<form>
First Name:
<input type=”text” id=”txt1″
onkeyup=”showHint(this.value)”>
就如你看到的,它只是一个普通的表单,里面有一称为”txt1″的输入框
下一段包括了一个称做“txtHint”的SPAN。这个SPAN是用来存储从服务器重新获得的信息的。
当用户输入数据,名为“showHint()”的函数将被执行。这个函数的执行是由“onkeyup”事件触发的。换种说法:每当用户在txt1区域内触动键盘按钮,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)函数就执行:
发送一个HTTP请求到服务器上的”gethint.asp”上
当HTTP触发一次变动则XMLHTTP对象就会执行stateChanged()函数
stateChanged()函数包含以下代码:
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState==”complete”)
{
document.getElementById(“txtHint”).innerHTML=xmlHttp.responseText
}
}
每当XMLHTTP对象的状态发生改变stateChanged()函数就会被执行
当状态改变为4(或为”完成”),txtHint span里就会显示反馈的文字
AJAX源代码
下面的源代码是前一个页面的。你可以将它复制并粘贴,自己来尝试。
这是一个HTML网页。它包括了一个简单的HTML表单和关联JS的link
<html>
<head>
<script src=”http://www.knowsky.com/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代码在下面
这是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
}
}
服务端页面被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
ajax、ajax实例及ajax源代码(asp)_ajax教程
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » ajax、ajax实例及ajax源代码(asp)_ajax教程
相关推荐
-      Jquery处理Json字符串的实例
-      ASP+Ajax实现无刷新评论简单例子
-      AJAX的阻塞及跨域名解析
-      AJAX学习资料
-      [js]一个获取页面ip的正则
-      ajax用户注册代码
-      each循环输出jquery返回的json字符串
-      Ajax技术全解之一