ajax onkeyup 事件

最新推荐文章于 2023-02-21 10:09:55 发布

lincal2008

最新推荐文章于 2023-02-21 10:09:55 发布

阅读量612

点赞数

分类专栏： AJAX 文章标签： ajax javascript xmlhttprequest url function safari

AJAX 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

AJAX HTML 页面

这是 HTML 页面。它包含了一个简单的 HTML 表单，以及一个指向 JavaScript 的链接。

<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>

下面列出了 JavaScript 代码。

AJAX JavaScript

这是 JavaScript 代码，存储在文件 "clienthint.js" 中：

var xmlHttp

function showHint(str)
{

  if (str.length==0)
    { 
    document.getElementById("txtHint").innerHTML="";
    return;
    }

  xmlHttp=GetXmlHttpObject()

  if (xmlHttp==null)
    {
    alert ("您的浏览器不支持AJAX！");
    return;
    }

  var url="gethint.asp";
  url=url+"?q="+str;
  url=url+"&sid="+Math.random();
  xmlHttp.onreadystatechange=stateChanged;
  xmlHttp.open("GET",url,true);
  xmlHttp.send(null);
} 

function stateChanged() 
{ 
if (xmlHttp.readyState==4)
{ 
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}

function GetXmlHttpObject()
{
  var xmlHttp=null;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    }
return xmlHttp;
}

lincal2008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax onkeyup 事件

AJAX HTML 页面<br />这是 HTML 页面。它包含了一个简单的 HTML 表单，以及一个指向 JavaScript 的链接。<html><head><script src="clienthint.js"></script> </head><body><form> First Name:<input type="text" id="txt1" onkeyup="showHint(this.value)" /></form><p>Suggestions:
复制链接

扫一扫

专栏目录