蓝派网(www.lan27.com)-精选网络资源,分享和交流! 文章首页站内搜索在线手册广告代码酷站欣赏万年历
您现在的位置: 蓝派网 >> 文章中心 >> 网络编程 >> AJAX >> 正文

AJAX、AJAX实例及AJAX源代码

作者:佚名    文章来源:网络转载    更新时间:2007-11-26 0:58:24
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="http://img.sxsky.net/it/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 >

[1] [2] 下一页


发表评论】【打印此文】【关闭窗口】【点击数:
★好玩的休闲小游戏★