欢迎光临爱时尚女性网
 

AJAX实例

2012-7-19 编辑:knwz 来源:爱时尚女性网 阅读次数:1095
  导读:   AJAX可以用来创建更多交互式的网络应用程序。   AJAX 实例   在以下的AJAX范例中,我们将了解到当用户以网页格式输入数据时一个网页是如何与网络服务器连接的。   在下面的框中输入姓名 *实际操作请前往W3Schools First Name: Suggestions: ...

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

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

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

  实例解析-超文本标记语言模式
  以上的范例所含超文本标记语言代码如下:


First Name:
onkeyup="showHint(this.value)">

Suggestions:


  就如你看到的,它只是一个普通的表单,里面有一称为"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里就会显示反馈的文字

文章出自:爱时尚女性网www.aspjc.com,尊重版权是美德,转载请保留原地址,感谢合作!

上一篇:Ajax介绍
下一篇:AJAX源代码
 
 
链接交换请联系:QQ:790646582 首页链接要求百度快照在一周以内,不符合以上要求的各站,我们将定期把友情连接转入内页,谢谢合作。
Copyright @ 2012-2015 爱时尚女性网 保留所有权利吉ICP备14005127号-1 服务QQ:175529508 e-mail:zk8312@163.com
本站部分资源来自网友上传,如果无意之中侵犯了您的版权,请联系本站,本站将在3个工作日内删除。