开发者社区> 技术小胖子> 正文

Ajax应用实例-搜索提示

简介:
+关注继续查看

注意: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,如需转载请自行联系原作者









版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
窗口子类化-实例应用
所谓窗口子类化:改变一个已经存在的窗口实例的性质:消息处理与其他实例属性。   通常在SDK中所谓的窗口子类化就是改变一个窗口函数(如GetWindowLong()和SetWindowLong())通过这两个函数来设置窗口的属性等;   而今天我们主要内容是介绍MFC中的子类化,它跟SDK中的子类化不太一样: 所有MFC窗口有相同的窗口函数,由该窗口函数根据窗口句柄查找窗口实例,在把消息映射到该窗口类(class)得消息处理函数上。
980 0
php封装json通信接口详解及实例
php创建JSON数据详解: ``` <?php //创建一个字符数组 $arr=array( 'id'=>1, 'name'=>'david' ); echo json_encode($arr);//这个是创建JSON的关键函数 ?> ...
1661 0
ExpandableListView简单应用及listview模拟ExpandableListView
<p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:Arial; font-size:14px; line-height:26px">   首先我们还是来看一些案例,还是拿搜狐新闻客户端,因为我天天上下班没事爱看这个东东,上班又没时间看新闻,上下班路途之
1288 0
Json.Net系列教程 1.Json.Net介绍及实例
原文 Json.Net系列教程 1.Json.Net介绍及实例 本系列教程假设读者已经对Json有一定的了解,关于Json在这里不多说.本系列教程希望能对读者开发涉及到Json的.Net项目有一定的帮 助.本系列教程是根据官方文档资料和自己项目应用汇总而成.如果觉得本系列对你有用,望多多关注.本人还只是个未毕业的学生,水平有限,尽请指正. 一.Json.Net有什么用?   Json.Net是一个读写Json效率比较高的.Net框架.Json.Net 使得在.Net环境下使用Json更加简单。
1171 0
Bootstrap实例(实习第3天)
&lt;!DOCTYPE html&gt; &lt;html lang="zh-cn"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;meta name="viewport" content="width=device
992 0
轻松搭建基于 Serverless 的 ThinkPHP 应用
首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传。函数计算准备计算资源,并以弹性伸缩的方式运行用户代码,而用户只需根据实际代码运行所消耗的资源进行付费。
2747 0
21117
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载