原文: 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. Spark 1.60的executor schedule

    第一次看源码还是Spark 1.02.这次看新源码发现调度方式有了一些新的特征,在这里随便写一下. 不变的是,master还是接收Appclient和worker的消息,并且在接收RegisterAp ...

  2. 想要上市，SaaS 企业应该重点关注什么？（下）

    前言:那些非常期待能在纳斯达克敲钟的 SaaS 服务提供商们,希望能从已经上市的「前辈」身上学到一些东西.对企业的销售主管来说,他们控制着影响整个公司长期收益的多个因素,同时,他们也对潜在投资者和金融 ...

  3. Howto: Deploy VC2008 apps without installing vcredist_x86.exe

    There are several reasons for xcopy deployment of an application (also known as application local). ...

  4. oracle 增加字段

    之前很多表增加很多相同的字段,一个一个添加太慢烦了,于是用了以下的方法alter table t_xmlc_batch_out_head_bak add ( SENDRECEIVEFLAG ) , S ...

  5. 在Oracle 11g r2中，EXP无法导出个别空的表

    在Oracle 11g r2中,发现传统的exp无法不能导出空的表,上网搜索了一下找到了原因. 主要是Oracle 11g 新增了一个参数:deferred_segment_creation,含义是段 ...

  6. PHP实现浏览历史记录

    http://www.3a88.com/service/206.html http://www.1360.cc/ZhanChangJiaoCheng/6831.html http://www.osch ...

  7. 【Java】JTable组件的构造函数和设置列宽

    使用JTable组件 类层次结构图: java.lang.Object --java.awt.Component --java.awt.Container --javax.swing.JCompone ...

  8. Linux/Unix 系统分析命令速查手册

    1.Hardware CPU information: cat /proc/cpuinfo 物理core个数: 统计core 逻辑CPU个数:统计processor Memory informatio ...

  9. 【HDOJ】4305 Lightning

    1. 题目描述当一个结点lightning后,可以向其周围距离小于等于R的结点传播lightning.然后以该结点为中心继续传播.以此类推,问最终形成的树形结构有多少个. 2. 基本思路生成树级数模板 ...

  10. sed找到重复的行

    sed之仅打印相邻重复的行 cat file  aaa bbb bbb ccc ddd eee eee fff   只显示重复的行: bbb bbb eee eee   sed -n ':a;N;/\ ...