AJAX、AJAX实例及AJAX源代码

2016-02-19 20:05 6 1 收藏

在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享AJAX、AJAX实例及AJAX源代码,希望可以对大家能有小小的帮助。

【 tulaoshi.com - Web开发 】

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)"
  
  /formpSuggestions: 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.length0)函数就执行:
  
    建立一个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
  /headbodyform
  First Name:
  input type="text" id="txt1"
  onkeyup="showHint(this.value)"
  /formpSuggestions: span id="txtHint"/span/p /body
  /htmlThe 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

来源:http://www.tulaoshi.com/n/20160219/1622705.html

延伸阅读
标签: Web开发
代码如下: /* 调用方式: 1.POST方式 var txt = escape(sender.value); //document.getElementById("%= txtName.ClientID %").value); var data = "name=" + txt + "&pwd=" + txt; var option = { "url": "handler/Handler.ashx" , "action": "POST" , "callback": function(){ if (xmlHttp.readyState == 4) {//服务器给了回应 if (x...
标签: Web开发
我们已看到 AJAX 可被用来创建更多交互性的应用程序。 AJAX Suggest实例 在下面的 AJAX 例子中,我们会演示当用户向一个标准的 HTML 表单中输入数据时网页如何与 web 服务器进行通信。 在下面的文本框中输入名字: Suggestions: 例子解释 - HTML表单 表单的 HTML 代码: form First Name:input type="text" id="txt1&qu...
标签: Web开发
index.html 代码如下: html head titlejQuery Ajax 实例演示/title /head script src="./js/jquery.js" type="text/javascript"/script script type="text/javascript" $(document).ready(function(){//这个就是jQueryready ,它就像C语言的main 所有操作包含在它里面 $("#button_login").mousedown(function(){ login(); //点击ID...
标签: Web开发
AJAX 可用来与数据库进行动态地通信。 AJAX 数据库实例 在下面的 AJAX 例子中,我们将演示如何使用 AJAX 技术令网页从数据库读取信息。 在下面的框中选择一个名字AJAX 实例解释 上面的实例包含了一个简单的 HTML 表单以及执行 JavaScript 的链接: htmlhead script src="selectcustomer.js"/script /headbody form 请选择一位...
标签: Web开发
ajax.html 程序代码 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=gb2312" / title兼容多浏览器的AJAX入门实例(超详细注释)/t...

经验教程

958

收藏

90

精华推荐

php ajax无刷新上传图片实例代码

php ajax无刷新上传图片实例代码

Five战灬魂

AJAX 请求实例

AJAX 请求实例

大海诺

AJAX教程(1):AJAX简介

AJAX教程(1):AJAX简介

任丽虎

微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部

如果您有什么好的建议或者疑问,可以联系我们。 商务合作QQ:3272218541;3282258740。商务合作微信:13319608704;13319603564。

加好友请备注机构名称。让我们一起学习、一起进步tulaoshi.com 版权所有 © 2019 All Rights Reserved. 湘ICP备19009391号-3

微信公众号