初识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 在下面的实例中,我们将演示一个实时的搜索,在您键入数据的同时即可得到搜索结 ...
随机推荐
- java第一课：环境、变量、数据类型
一.java编程注意事项1.java区分大小写2.每条语句结尾有分号3.上下级代码注意缩进4.大括号要成对出现5.标点符号要用英文半角(半角全角区别)二.eclipse1.eclipse是自编译及时编 ...
- centos最小安装 setuptools安装
centos运行不了setup?那安装setuptool吧,可以节省很多系统管理的时间. #安装setuptoolyum install setuptool#可以发现执行setup后不全,再安装一个用 ...
- Matlab划分测试集和训练集
% x是原数据集,分出训练样本和测试样本 [ndata, D] = size(X); %ndata样本数,D维数 R = randperm(ndata); %1到n这些数随机打乱得到的一个随机数字序列 ...
- PAT-乙级-1010. 一元多项式求导 (25)
1010. 一元多项式求导 (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 设计函数求一元多项式的导数.(注:xn(n为整数)的一 ...
- 团体程序设计天梯赛-练习集L1-010. 比较大小
L1-010. 比较大小 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 杨起帆(浙江大学城市学院) 本题要求将输入的任意3个整数从小 ...
- Jenkins任务启动的后台进程被自动kill
在Jenkins的使用中,遇到过的一个场景是:在web代码更改之后,能自动的部署到测试服务器,我们写了run.sh脚本来重启服务,在使用Jenkins的任务自动跑这个脚本后发现,服务没有起来.开始以为 ...
- Android Activity的切换动画
Android的Activity切换有两种方法, 第一种是用代码方式实现: Activity A跳转到Activity B,要在startActivity(intent)后面加上overridePen ...
- 如何用DELPHI编程修改外部EXE文件的版本信
右击里面有修改 点开直接修改就可以了吧. DELPHI 里程序的版本信息怎么是灰色的,无法更改 耐心读以下说明,应该能解决你的问题,如果不能解决,请Hi我~ 如何给自己的dll文件添加版本信息呢? 首 ...
- 基于SMB协议的共享文件读写
一.SMB协议 SMB协议是基于TCP-NETBIOS下的,一般端口使用为139,445. 服务器信息块(SMB)协议是一种IBM协议,用于在计算机间共享文件.打印机.串口等.SMB 协议可以用在因特 ...
- php简陋版实现微信公众号主动推送消息
推荐一个网站www.itziy.com csdn免积分下载器.pudn免积分下载器.51cto免积分下载器www.verypan.com 百度网盘搜索引擎www.94cto.com 编程相关视频教程. ...