Ajax应用实例-搜索提示

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,高可用系列 2核4GB
简介:

注意:Ajax处理文件中必须转成UTF-8后再输出,方可防止乱码。

ajax学习笔记(附搜索提示例子)

兼容问题、编码问题都已OK!

 

 

前台代码:

 


 
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 
  5. <script type="text/javascript"> 
  6. function trim(mystr){ 
  7.     while ((mystr.indexOf(" ")==0) && (mystr.length>1)){ 
  8.         mystrmystr=mystr.substring(1,mystr.length); 
  9.     }//去除前面空格 
  10.     while ((mystr.lastIndexOf(" ")==mystr.length-1)&&(mystr.length>1)){ 
  11.         mystrmystr=mystr.substring(0,mystr.length-1); 
  12.     }//去除后面空格 
  13.     if (mystr==" "){ 
  14.         mystr=""
  15.     } 
  16.     return mystr; 
  17.  
  18. function showCustomer(str){ 
  19.     str=trim(str);   
  20.     var xmlhttp;     
  21.     if (str==""){ 
  22.       document.getElementById("txtHint").innerHTML=""
  23.       return; 
  24.     } 
  25.      
  26.     if (window.XMLHttpRequest){ 
  27.       xmlhttp=new XMLHttpRequest(); 
  28.     } 
  29.     else{ 
  30.       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
  31.     } 
  32.      
  33.     xmlhttp.onreadystatechange=function(){ 
  34.       if (xmlhttp.readyState==4 && xmlhttp.status==200){ 
  35.             document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 
  36.         } 
  37.     } 
  38. xmlhttp.open("get","sql.php?key="+str,true); 
  39. xmlhttp.send(); 
  40. </script> 
  41. </head> 
  42. <body> 
  43.  
  44. <form action="">  
  45.     <input type="text" onkeyup="showCustomer(this.value)" /> 
  46.     <input type="button" value="搜索" /> 
  47. </form> 
  48. <div id="txtHint" style="border:1px solid #CCCCCC;width:150px;background:#EEEEEE"></div> 
  49.  
  50. </body> 
  51. </html> 

后台代码:sql.php

 


 
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
  2. <html xmlns="http://www.w3.org/1999/xhtml"
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 
  5. <?php 
  6. @$conn=mysql_connect("localhost","root","123456"or die ("连接数据库服务器失败"); 
  7. mysql_select_db("test",$conn); 
  8. mysql_query("set names 'GBK'"); 
  9.  
  10. $key=trim($_GET['key']); 
  11. $key=iconv("UTF-8""GBK"$key); 
  12. $sql="select `username` from `user` where `username` like '$key%' limit 0,10;"
  13. $query=mysql_query($sql,$conn); 
  14. while($row=mysql_fetch_array($query)){ 
  15.     $name=iconv("GBK""UTF-8"$row['username']); 
  16.     echo '<b style="color:#f00;font-weight:bold;font-size:20px;">'.$name.'</b><br />'
  17. ?> 

 

 


AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
AJAX = 异步 JavaScript 和 XML。
XMLHttpRequest 用于在后台与服务器交换数据。
var xmlhttp;
if (window.XMLHttpRequest){    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else{    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

向服务器发送请求:
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

onreadystatechange 这是在设置XMLHTTP对象在状态变化时候的处理动作,发送数据之前的准备动作
xmlhttp.readyState==4  这个指的是xmlhttp的交互状态.为4就是交互完成。
xmlhttp.status==200  这个0是你xmlhttp与后台交互时返回的一个状态码,关于HTTP状态码,你可以查一下百度,200指的是正常交互完成.404指的是文件未找到.500是出现内部服务器错误.一般来说这三个用得比较多.
如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

通过 AJAX,JavaScript 无需等待服务器的响应,而是:
在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理

onreadystatechange 事件

    0: 请求未初始化
    1: 服务器连接已建立
    2: 请求已接收
    3: 请求处理中
    4: 请求已完成,且响应已就绪


如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。



 


 同理:静默修改、删除等操作(不用刷新网页)


 
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=GBK" />  
  5. <script type="text/javascript">  
  6. function trim(mystr){  
  7.     while ((mystr.indexOf(" ")==0) && (mystr.length>1)){  
  8.         mystrmystrmystr=mystr.substring(1,mystr.length);  
  9.     }//去除前面空格  
  10.     while ((mystr.lastIndexOf(" ")==mystr.length-1)&&(mystr.length>1)){  
  11.         mystrmystrmystr=mystr.substring(0,mystr.length-1);  
  12.     }//去除后面空格  
  13.     if (mystr==" "){  
  14.         mystr="";  
  15.     }  
  16.     return mystr;  
  17. }  
  18.   
  19. function showCustomer(str,id){  
  20.     str=trim(str); 
  21. id=id; 
  22.     var xmlhttp;      
  23.     if (str==""){  
  24.       document.getElementById("txtHint").innerHTML="";  
  25.       return;  
  26.     }  
  27.       
  28.     if (window.XMLHttpRequest){  
  29.       xmlhttp=new XMLHttpRequest();  
  30.     }  
  31.     else{  
  32.       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
  33.     }  
  34.       
  35.     xmlhttp.onreadystatechange=function(){  
  36.       if (xmlhttp.readyState==4 && xmlhttp.status==200){  
  37.             document.getElementById("txtHint").innerHTML=xmlhttp.responseText;  
  38.         }  
  39.     }  
  40. xmlhttp.open("get","sql.php?title="+str+"&id="+id,true);  
  41. xmlhttp.send();  
  42. }  
  43. </script>  
  44. </head>  
  45. <body>  
  46.   
  47. <form action="">   
  48.     <input type="text" onChange="showCustomer(this.value,2)" />  
  49. </form>  
  50.  /><br /> 
  51. <div id="txtHint" style="border:1px solid #CCCCCC;width:200px;background:#EEEEEE"></div>  
  52.   
  53. </body>  
  54. </html>  

 

sql.php

 


 
 
  1.    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2.    <html xmlns="http://www.w3.org/1999/xhtml">  
  3.    <head>  
  4.    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />  
  5.    <?php  
  6.    @$conn=mysql_connect("localhost","root","123456"or die ("连接数据库服务器失败");  
  7.    mysql_select_db("delete",$conn);  
  8.    mysql_query("set names 'GBK'");  
  9.    $title=trim($_GET['title']);  
  10.    $title=iconv("UTF-8""GBK"$title);  
  11.    $id=$_GET['id']; 
  12. $sql="update `aa` set `title`='$title' where `id`='$id';";  
  13.    if(mysql_query($sql,$conn)){ 
  14.     echo "<span style='font-weight:bold;color:#360;'>".iconv("GBK""UTF-8""操作已成功保存")."</span>"
  15. else
  16.     echo "<span style='font-weight:bold;color:#f00;'>".iconv("GBK""UTF-8""操作失败")."</span>"
  17.    ?>  

 

今天测试出在谷歌、遨游浏览器中ajax返回的是乱码。那就判断下这两种浏览器:

 


 
 
  1.    function WhatBrowser(){ 
  2.     var str=navigator.userAgent;  
  3.     var BrowserS=['MSIE 9.0','MSIE 8.0','MSIE 7.0','MSIE6.0','Firefox','Opera','Chrome'];  
  4.         for(var i=0;i<BrowserS.length;i++){  
  5.             if(str.indexOf(BrowserS[i])>=0){return BrowserS[i].replace('MSIE','IE');}  
  6.         } 
  7.  
  8. function showcity(fid){     //省市ajax 
  9.     fid=fid; 
  10.     var xmlhttp; 
  11.     var google; 
  12.     var aoyou; 
  13.     if (window.XMLHttpRequest){   
  14.       xmlhttp=new XMLHttpRequest();   
  15.     }   
  16.     else{   
  17.       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");   
  18.     }   
  19.        
  20.     xmlhttp.onreadystatechange=function(){ 
  21.         if (xmlhttp.readyState==4 && xmlhttp.status==200){ 
  22.             document.getElementById("txtcity").innerHTML=xmlhttp.responseText;   
  23.         }   
  24.     } 
  25.      
  26.      
  27.     var navtype=navigator.appVersion;  
  28.  
  29.     if(WhatBrowser()=='Chrome'){ 
  30.         //alert('google'); 
  31.         xmlhttp.open("get","ajax.php?fid="+fid+"&google=1",true);   
  32.     } 
  33.     else if(navtype.indexOf("Maxthon") >= 0){ 
  34.         //alert('aoyou'); 
  35.         xmlhttp.open("get","ajax.php?fid="+fid+"&aoyou=1",true);   
  36.     } 
  37.     else
  38.         xmlhttp.open("get","ajax.php?fid="+fid,true); 
  39.     } 
  40.     xmlhttp.send();   

 




      本文转自许琴 51CTO博客,原文链接:http://blog.51cto.com/xuqin/953012,如需转载请自行联系原作者









相关实践学习
如何快速连接云数据库RDS MySQL
本场景介绍如何通过阿里云数据管理服务DMS快速连接云数据库RDS MySQL,然后进行数据表的CRUD操作。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
7月前
|
前端开发 JavaScript Java
使用Ajax进行异步交互:提升Java Web应用的用户体验
【4月更文挑战第3天】Ajax技术在Web开发中提升UX,通过与服务器异步交互实现页面局部更新,无需完整刷新。核心组件包括XMLHttpRequest、JavaScript、HTML/CSS及服务器端脚本。在Java Web应用中,可使用原生JavaScript或框架如jQuery、AngularJS实现Ajax请求。Ajax减少页面刷新,实现实时数据更新,即时表单验证和动态UI,显著改善用户体验,是现代Web开发不可或缺的一部分。
98 0
|
3月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
37 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
2月前
|
JSON JavaScript 前端开发
《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
21 0
|
4月前
|
前端开发 Java UED
瞬间变身高手!JSF 与 Ajax 强强联手,打造极致用户体验的富客户端应用,让你的应用焕然一新!
【8月更文挑战第31天】JavaServer Faces (JSF) 是 Java EE 标准的一部分,常用于构建企业级 Web 应用。传统 JSF 应用采用全页面刷新方式,可能影响用户体验。通过集成 Ajax 技术,可以显著提升应用的响应速度和交互性。本文详细介绍如何在 JSF 应用中使用 Ajax 构建富客户端应用,并通过具体示例展示 Ajax 在 JSF 中的应用。首先,确保安装 JDK 和支持 Java EE 的应用服务器(如 Apache Tomcat 或 WildFly)。
51 0
|
5月前
|
XML 前端开发 API
惊艳全场的秘诀!AJAX、Fetch API与Python后端,打造令人惊叹的Web应用!
【7月更文挑战第13天】构建现代Web应用的关键在于提供无缝用户体验,这涉及AJAX和Fetch API的异步数据交换以及Python(如Flask)的后端支持。Fetch API以其基于Promise的简洁接口,改进了AJAX的复杂性。例如,一个Flask应用可提供用户数据,前端利用Fetch API在不刷新页面的情况下显示信息。这种结合提升了效率,减少了服务器负载,是现代Web开发的趋势。随着技术发展,预期将有更多工具优化这一过程。
78 3
|
6月前
|
前端开发 Python
Django框架中Ajax GET与POST请求的实战应用
Django框架中Ajax GET与POST请求的实战应用
|
6月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
7月前
|
JavaScript 前端开发
node.js第四天--ajax在项目中的应用
node.js第四天--ajax在项目中的应用
64 0
|
7月前
|
设计模式 开发框架 前端开发
ajax应用设计模式,Ajax设计模式下Web开发的研究与应用
ajax应用设计模式,Ajax设计模式下Web开发的研究与应用
|
7月前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
85 0