原文: http://www.ido321.com/347.html

从网页前端输入提示范围内的字符，然后显示从后台返回的结果

   1: <html>

   2: <head>

   3: <meta http-equiv="content-type" content="text/html;charset=utf-8">

   4: <script type="text/javascript">

   5: function showHint(str)

   6: {

   7: var xmlhttp;

   8: if (str.length==0)

   9:   { 

  10:   document.getElementById("txtHint").innerHTML="";

  11:   return;

  12:   }

  13: if (window.XMLHttpRequest)

  14:   {// code for IE7+, Firefox, Chrome, Opera, Safari

  15:   xmlhttp=new XMLHttpRequest();

  16:   }

  17: else

  18:   {// code for IE6, IE5

  19:   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  20:   }

  21: xmlhttp.onreadystatechange=function()

  22:   {

  23:   if (xmlhttp.readyState==4 && xmlhttp.status==200)

  24:     {

  25:     document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

  26:     }

  27:   }

  28: xmlhttp.open("GET","ajax.php?q="+str,true);

  29: xmlhttp.send();

  30: }

  31: </script>

  32: </head>

  33: <body>

  34:  

  35: <h3>请在下面的输入框中键入字母（A - Z）：</h3>

  36: <form action=""> 

  37: 姓氏：<input type="text" id="txt1" onkeyup="showHint(this.value)" />

  38: </form>

  39: <p>建议：<span id="txtHint"></span></p> 

  40:  

  41: </body>

  42: </html>

如果输入框为空 (str.length==0)，则该函数清空 txtHint 占位符的内容，并退出函数。

如果输入框不为空，showHint() 函数执行以下任务：

  • 创建 XMLHttpRequest 对象
  • 当服务器响应就绪时执行函数
  • 把请求发送到服务器上的文件
  • 请注意我们向 URL 添加了一个参数 q （带有输入框的内容）

php：

   1: <?php

   2: // 用名字来填充数组

   3: $a[]="Anna";

   4: $a[]="Brittany";

   5: $a[]="Cinderella";

   6: $a[]="Diana";

   7: $a[]="Eva";

   8: $a[]="Fiona";

   9: $a[]="Gunda";

  10: $a[]="Hege";

  11: $a[]="Inga";

  12: $a[]="Johanna";

  13: $a[]="Kitty";

  14: $a[]="Linda";

  15: $a[]="Nina";

  16: $a[]="Ophelia";

  17: $a[]="Petunia";

  18: $a[]="Amanda";

  19: $a[]="Raquel";

  20: $a[]="Cindy";

  21: $a[]="Doris";

  22: $a[]="Eve";

  23: $a[]="Evita";

  24: $a[]="Sunniva";

  25: $a[]="Tove";

  26: $a[]="Unni";

  27: $a[]="Violet";

  28: $a[]="Liza";

  29: $a[]="Elizabeth";

  30: $a[]="Ellen";

  31: $a[]="Wenche";

  32: $a[]="Vicky";

  33:  

  34: //获得来自 URL 的 q 参数

  35: $q=$_GET["q"];

  36:  

  37: //如果 q 大于 0，则查找数组中的所有提示

  38: if (strlen($q) > 0)

  39:   {

  40:   $hint="";

  41:   for($i=0; $i<count($a); $i++)

  42:     {

  43:     if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))

  44:       {

  45:       if ($hint=="")

  46:         {

  47:         $hint=$a[$i];

  48:         }

  49:       else

  50:         {

  51:         $hint=$hint." , ".$a[$i];

  52:         }

  53:       }

  54:     }

  55:   }

  56:  

  57: // 如果未找到提示，则把输出设置为 "no suggestion"

  58: // 否则设置为正确的值

  59: if ($hint == "")

  60:   {

  61:   $response="no suggestion";

  62:   }

  63: else

  64:   {

  65:   $response=$hint;

  66:   }

  67:  

  68: //输出响应

  69: echo $response;

  70: ?>

效果

打包下载

初识Ajax---简单的Ajax应用实例的更多相关文章

  1. 简单的Ajax实例

    由于刚刚接触Ajax,所以在网上搜了一下如何实现简单的Ajax,在此写下来,也方便自己以后学习 什么是Ajax? 通过在后台与服务器进行少量的数据交换,Ajax可以使网页实现异步更新,这意味着可以在不 ...

  2. thinkphp5最最最最简单的ajax实例

    thinkphp5最最最最简单的ajax实例 一.总结 一句话总结:页面端使用$.get()方法传递ajax请求,服务器端判断是不是ajax请求,是的话接受参数,进行逻辑处理之后向客户端返回值. 1. ...

  3. Ajax 简单的实例代码

    <!DOCTYPE HTML><html><head><script src="http://libs.baidu.com/jquery/2.0.0 ...

  4. 原生AJAX入门讲解（含实例）

    相对于jQuery.YUI以及其他一些类库的AJAX封装,原生JS的AJAX显得那么的尴尬,兼容性不好,要记很多的方法属性,调用不便捷,代码臃肿...但我还是想说,原生JS才是最根本最底层的知识(虽然 ...

  5. Ajax获得站点文件内容实例

    一个简单的Ajax实例:选择一部著作,会通过 Ajax 实时获得相关的名字. 把4个html文件放到 web站点 的同一个文件下. index.html <html> <head&g ...

  6. Ajax得知（两）—— 一个简单的Ajax示例

    通过部分博客认识Ajax之后,我们通过一个简单的实例来消化消化理论知识,一睹Ajax的庐山真面目. 1.实例功能: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZ ...

  7. AJAX 简单归纳 -- 前端知识

    什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味 ...

  8. input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年，我们被耍过的bug——has

    input屏蔽历史记录   设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处   ;(function($){$.ex ...

  9. Jquery Ajax简单封装(集中错误、请求loading处理)

    Jquery Ajax简单封装(集中错误.请求loading处理) 对Jquery Ajax做了简单封装,错误处理,请求loading等,运用到项目中集中处理会很方便. 技术层面没有什么好说的,请求是 ...

  10. PHP 实例 - AJAX 实时搜索-AJAX Live Search

    PHP 实例 - AJAX 实时搜索 AJAX 可为用户提供更友好.交互性更强的搜索体验. AJAX Live Search 在下面的实例中,我们将演示一个实时的搜索,在您键入数据的同时即可得到搜索结 ...

随机推荐

  1. qwt 6.1.0集成进Qt creator 2.8.1步骤

    环境准备与文件编译 ·关于Qt 发现一个Qt正确安装的教程,非常棒!http://www.wikihow.com/Install-Qt-SDK-on-Ubuntu-Linux Qt版本是4.8.5,在 ...

  2. PD name 和 comment 互换

    1 PowerDesigner中批量根据对象的name生成comment的脚本 执行方法:Open PDM -- Tools -- Execute Commands -- Run Script --- ...

  3. Web Api 入门

    http://www.cnblogs.com/developersupport/p/WebAPI-Security.html http://www.cnblogs.com/r01cn/archive/ ...

  4. Linux系统下如何配置SSH？如何开启SSH？

    SSH作为Linux远程连接重要的方式,如何配置安装linux系统的SSH服务,如何开启SSH?下面来看看吧(本例为centos系统演示如何开启SSH服务). 查询\安装SSH服务 1.登陆linux ...

  5. Qt：QT右键菜单

    Qt QTableView 上加右键弹出菜单, 并复制选中的单元格内容到剪贴板中 http://wenku.baidu.com/view/c51cfb63cf84b9d528ea7a29.html h ...

  6. jQuery 的 $("someobjectid”).event() 的绑定

    经验证,jquery 的 $("someobjectid”).event()事件绑定,如果放在某个会被重新初始化的对象里,就会被多次绑定. 如下 <div id="divID ...

  7. 基于http.sys来开发的，真的是非常稳定

    真正的WEB服务器是不会用Indy写的.因为它是基于每连接每线程的. 其实真正的服务器需要下很多功夫,无法快速开发的.比如说,字符串处理.玩服务器基本上就是玩内存.举个例子: var str:Ansi ...

  8. 不同VLAN之间互相通信

    前话 我们经常到机房上课,想必对机房后面那层叠的跟DVD一样的机器有印象吧,那些就是交换机. 交换机作用是什么? 我这里度娘一下: 交换机(Switch)意为"开关"是一种用于电( ...

  9. 数据库存储安全之（MD5+盐）加密

    一般系统数据库密码加密方式: MD5后存入数据库 SHA1 Hash后存入数据库 缺点:黑客可以通过密码暴力破解获取密码信息,具体做法是将常用密码进行Hash后做成一个字典, 破解的时候,只需要查字典 ...

  10. 学习笔记-[Maven实战]-第三章:Maven使用入门(3)

    这里说一下在建测试工程里遇到的问题 1.第一次建工程,junit依赖始终没有成功,最后删除现在工程,新建了一个工程就好了 2.使用junit4的问题.工程默认的依赖是junit3.8.1,我改成了4. ...