初识Ajax---简单的Ajax应用实例
原文: 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应用实例的更多相关文章
- 简单的Ajax实例
由于刚刚接触Ajax,所以在网上搜了一下如何实现简单的Ajax,在此写下来,也方便自己以后学习 什么是Ajax? 通过在后台与服务器进行少量的数据交换,Ajax可以使网页实现异步更新,这意味着可以在不 ...
- thinkphp5最最最最简单的ajax实例
thinkphp5最最最最简单的ajax实例 一.总结 一句话总结:页面端使用$.get()方法传递ajax请求,服务器端判断是不是ajax请求,是的话接受参数,进行逻辑处理之后向客户端返回值. 1. ...
- Ajax 简单的实例代码
<!DOCTYPE HTML><html><head><script src="http://libs.baidu.com/jquery/2.0.0 ...
- 原生AJAX入门讲解（含实例）
相对于jQuery.YUI以及其他一些类库的AJAX封装,原生JS的AJAX显得那么的尴尬,兼容性不好,要记很多的方法属性,调用不便捷,代码臃肿...但我还是想说,原生JS才是最根本最底层的知识(虽然 ...
- Ajax获得站点文件内容实例
一个简单的Ajax实例:选择一部著作,会通过 Ajax 实时获得相关的名字. 把4个html文件放到 web站点 的同一个文件下. index.html <html> <head&g ...
- Ajax得知（两）—— 一个简单的Ajax示例
通过部分博客认识Ajax之后,我们通过一个简单的实例来消化消化理论知识,一睹Ajax的庐山真面目. 1.实例功能: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZ ...
- AJAX 简单归纳 -- 前端知识
什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味 ...
- input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年，我们被耍过的bug——has
input屏蔽历史记录 设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处 ;(function($){$.ex ...
- Jquery Ajax简单封装(集中错误、请求loading处理)
Jquery Ajax简单封装(集中错误.请求loading处理) 对Jquery Ajax做了简单封装,错误处理,请求loading等,运用到项目中集中处理会很方便. 技术层面没有什么好说的,请求是 ...
- PHP 实例 - AJAX 实时搜索-AJAX Live Search
PHP 实例 - AJAX 实时搜索 AJAX 可为用户提供更友好.交互性更强的搜索体验. AJAX Live Search 在下面的实例中,我们将演示一个实时的搜索,在您键入数据的同时即可得到搜索结 ...
随机推荐
- OnlineJudge大集合
什么是OJ Online Judge系统(简称OJ)是一个在线的判题系统.用户可以在线提交程序源代码,系统对源代码进行编译和执行,并通过预先设计的测试数据来检验程序源代码的正确性. 一个用户提交的程序 ...
- Visual Studio 中TODO List的使用
http://msdn.microsoft.com/en-us/library/txtwdysk.aspx 工欲善其事,必先利其器 When the Task List is open, you ca ...
- 1056: [HAOI2008]排名系统 - BZOJ
Description 排名系统通常要应付三种请求:上传一条新的得分记录.查询某个玩家的当前排名以及返回某个区段内的排名记录.当某个玩家上传自己最新的得分记录时,他原有的得分记录会被删除.为了减轻服务 ...
- 1022: [SHOI2008]小约翰的游戏John - BZOJ
Description 小约翰经常和他的哥哥玩一个非常有趣的游戏:桌子上有n堆石子,小约翰和他的哥哥轮流取石子,每个人取的时候,可以随意选择一堆石子,在这堆石子中取走任意多的石子,但不能一粒石子也不取 ...
- Nginx 禁止访问某个目录或文件的设置方法
如果基于WEB根目录下,要禁止用户访问/config目录,或者要禁止用户访问/config.ini(ZF常用INI,不过建议还是放到WEB目录以外的地方),可以通过location进行配置,返回403 ...
- 极客范：如何使用 Cloud Insight 来监控闭路电视？
最近新上线支持 Windows 系统及其组件 监控功能的 Cloud Insight,在系统监控领域基本囊括了对所有主流和部分非主流平台的支持.但是这还不够,Cloud Insight 可不仅仅是一个 ...
- codeforces #305 div1 done
总算搞定了这一场比赛的题目,感觉收获蛮大 其中A,B,C都能通过自己的思考解决掉 D题思路好神,E题仔细想想也能想出来 以后坚持每两天或者一天做一场CF的div1的全套题目 除非有实在无法做出来的题目 ...
- html元素elem.style.top.left始终为空
有如下元素: <div id="div1" >div1</div> #div1{ width:100px; height:100px; position ...
- #error作用与举例
2013-09-05 14:32:17 #error命令是C/C++语言的预处理命令之一,当预处理器预处理到#error命令时将停止编译并输出用户自定义的错误消息. 语法: #error [用 ...
- 各开源协议BSD,GPL,LGPL,Apache 2.0,mit等简介＊
快速阅读 分类 子分类 开源约定 BSD original BSD license.FreeBSD license.Original BSD license 为所欲为 Apache Licence 2 ...