原文: 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. js验证码倒计时

    var wait=59; function time(){ if(wait >= 0){ $("#buttons").val("" + wait + &q ...

  2. [转载]js 遍历数组对象

    有一个JSON数组如下 all = {"error":0,"content":[{"name":"北京","v ...

  3. hdu 4294 Multiple

    思路: 首先给出一个结论,就是最多用两个数就可以表示任何数的倍数. 证明 :对于一个数字a,可以构造出的数字有 a,aa,aaa,aaaa,aaaaa,…… 每一个数对于n都有一个余数,余数最多有n个 ...

  4. 在RedHat5.4 LINUX 安装mySQL数据库

    linux下mysql 最新版安装图解教程 1. 查看当前安装的linux版本 通过上图中的数据可以看出安装的版本为RedHat5.4,所以我们需要下载RedHat5.4对应的mysql安装包

  5. c++ 基础学习： 左值 概念cocos2d-x3.0的实际应用

    左值:概念baidu 1.2.6.2 与Cocos2d-x内存管理的结合 在2.x的使用场景中,CCArray和CCDictionary通常被分配在堆上,我们不得不需要考虑在适当的地方释放其内存.新的 ...

  6. [itint5]二叉树转换线索二叉树

    http://www.itint5.com/oj/#27 用了基于stack的中序遍历,记录一下last,就很简单了. #include <stack> /*树结点的定义(请不要在代码中定 ...

  7. ids & hdmi 原理

    http://www.taiwanwebinar.com/zh_TW/STATIC/SITE/dwc_hdmi_tx.pdf http://blog.csdn.net/g_salamander/art ...

  8. 【Lucene3.6.2入门系列】第04节_中文分词器

    package com.jadyer.lucene; import java.io.IOException; import java.io.StringReader; import org.apach ...

  9. Android 签名(1)为什么要签名

    所有的应用程序都必须有数字证书,Android系统不会安装一个没有数字证书的应用程序 签名可以: 1,用特权,2完整性鉴别,3安全保证, 1,专用权限或特权要签名 一些特权要经签名才允许.签名可用:S ...

  10. hdu 1412 (STL list)

    简单例题 题目:http://acm.hdu.edu.cn/showproblem.php?pid=1412 list 相关博客:http://www.cnblogs.com/fangyukuan/a ...