Ajax应用实例-搜索提示-阿里云开发者社区

Ajax应用实例-搜索提示

2017-11-09 1058

版权

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

本文涉及的产品

云数据库 RDS MySQL，集群系列 2核4GB

RDS MySQL Serverless 基础系列，0.5-2RCU 50GB

云数据库 RDS MySQL，高可用系列 2核4GB

简介：

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

ajax学习笔记（附搜索提示例子）

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

前台代码：


 
 

  
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

  
  <html xmlns="http://www.w3.org/1999/xhtml"> 

  
  <head> 

  
  <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 

  
  <script type="text/javascript"> 

  
  function trim(mystr){ 

  
      while ((mystr.indexOf(" ")==0) && (mystr.length>1)){ 

  
          mystrmystr=mystr.substring(1,mystr.length); 

  
      }//去除前面空格 

  
      while ((mystr.lastIndexOf(" ")==mystr.length-1)&&(mystr.length>1)){ 

  
          mystrmystr=mystr.substring(0,mystr.length-1); 

  
      }//去除后面空格 

  
      if (mystr==" "){ 

  
          mystr=""; 

  
      } 

  
      return mystr; 

  
  } 

  
   

  
  function showCustomer(str){ 

  
      str=trim(str);   

  
      var xmlhttp;     

  
      if (str==""){ 

  
        document.getElementById("txtHint").innerHTML=""; 

  
        return; 

  
      } 

  
       

  
      if (window.XMLHttpRequest){ 

  
        xmlhttp=new XMLHttpRequest(); 

  
      } 

  
      else{ 

  
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 

  
      } 

  
       

  
      xmlhttp.onreadystatechange=function(){ 

  
        if (xmlhttp.readyState==4 && xmlhttp.status==200){ 

  
              document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 

  
          } 

  
      } 

  
  xmlhttp.open("get","sql.php?key="+str,true); 

  
  xmlhttp.send(); 

  
  } 

  
  </script> 

  
  </head> 

  
  <body> 

  
   

  
  <form action="">  

  
      <input type="text" onkeyup="showCustomer(this.value)" /> 

  
      <input type="button" value="搜索" /> 

  
  </form> 

  
  <div id="txtHint" style="border:1px solid #CCCCCC;width:150px;background:#EEEEEE"></div> 

  
   

  
  </body> 

  
  </html>

后台代码：sql.php


 
 

  
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

  
  <html xmlns="http://www.w3.org/1999/xhtml"> 

  
  <head> 

  
  <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 

  
  <?php 

  
  @$conn=mysql_connect("localhost","root","123456") or die ("连接数据库服务器失败"); 

  
  mysql_select_db("test",$conn); 

  
  mysql_query("set names 'GBK'"); 

  
   

  
  $key=trim($_GET['key']); 

  
  $key=iconv("UTF-8", "GBK", $key); 

  
  $sql="select `username` from `user` where `username` like '$key%' limit 0,10;"; 

  
  $query=mysql_query($sql,$conn); 

  
  while($row=mysql_fetch_array($query)){ 

  
      $name=iconv("GBK", "UTF-8", $row['username']); 

  
      echo '<b style="color:#f00;font-weight:bold;font-size:20px;">'.$name.'</b><br />'; 

  
  } 

  
  ?>

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 属性。

同理：静默修改、删除等操作（不用刷新网页）


 
 

  
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

  
  <html xmlns="http://www.w3.org/1999/xhtml">  

  
  <head>  

  
  <meta http-equiv="Content-Type" content="text/html; charset=GBK" />  

  
  <script type="text/javascript">  

  
  function trim(mystr){  

  
      while ((mystr.indexOf(" ")==0) && (mystr.length>1)){  

  
          mystrmystrmystr=mystr.substring(1,mystr.length);  

  
      }//去除前面空格  

  
      while ((mystr.lastIndexOf(" ")==mystr.length-1)&&(mystr.length>1)){  

  
          mystrmystrmystr=mystr.substring(0,mystr.length-1);  

  
      }//去除后面空格  

  
      if (mystr==" "){  

  
          mystr="";  

  
      }  

  
      return mystr;  

  
  }  

  
    

  
  function showCustomer(str,id){  

  
      str=trim(str); 

  
      id=id; 

  
      var xmlhttp;      

  
      if (str==""){  

  
        document.getElementById("txtHint").innerHTML="";  

  
        return;  

  
      }  

  
        

  
      if (window.XMLHttpRequest){  

  
        xmlhttp=new XMLHttpRequest();  

  
      }  

  
      else{  

  
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  

  
      }  

  
        

  
      xmlhttp.onreadystatechange=function(){  

  
        if (xmlhttp.readyState==4 && xmlhttp.status==200){  

  
              document.getElementById("txtHint").innerHTML=xmlhttp.responseText;  

  
          }  

  
      }  

  
  xmlhttp.open("get","sql.php?title="+str+"&id="+id,true);  

  
  xmlhttp.send();  

  
  }  

  
  </script>  

  
  </head>  

  
  <body>  

  
    

  
  <form action="">   

  
      <input type="text" onChange="showCustomer(this.value,2)" />  

  
  </form>  

  
   /><br /> 

  
  <div id="txtHint" style="border:1px solid #CCCCCC;width:200px;background:#EEEEEE"></div>  

  
    

  
  </body>  

  
  </html>

sql.php


 
 

  
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

  
     <html xmlns="http://www.w3.org/1999/xhtml">  

  
     <head>  

  
     <meta http-equiv="Content-Type" content="text/html; charset=GBK" />  

  
     <?php  

  
     @$conn=mysql_connect("localhost","root","123456") or die ("连接数据库服务器失败");  

  
     mysql_select_db("delete",$conn);  

  
     mysql_query("set names 'GBK'");  

  
     $title=trim($_GET['title']);  

  
     $title=iconv("UTF-8", "GBK", $title);  

  
     $id=$_GET['id']; 

  
  $sql="update `aa` set `title`='$title' where `id`='$id';";  

  
     if(mysql_query($sql,$conn)){ 

  
      echo "<span style='font-weight:bold;color:#360;'>".iconv("GBK", "UTF-8", "操作已成功保存")."</span>"; 

  
  } 

  
  else{ 

  
      echo "<span style='font-weight:bold;color:#f00;'>".iconv("GBK", "UTF-8", "操作失败")."</span>"; 

  
  } 

  
     ?>

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


 
 

  
     function WhatBrowser(){ 

  
      var str=navigator.userAgent;  

  
      var BrowserS=['MSIE 9.0','MSIE 8.0','MSIE 7.0','MSIE6.0','Firefox','Opera','Chrome'];  

  
          for(var i=0;i<BrowserS.length;i++){  

  
              if(str.indexOf(BrowserS[i])>=0){return BrowserS[i].replace('MSIE','IE');}  

  
          } 

  
  } 

  
   

  
  function showcity(fid){     //省市ajax 

  
      fid=fid; 

  
      var xmlhttp; 

  
      var google; 

  
      var aoyou; 

  
      if (window.XMLHttpRequest){   

  
        xmlhttp=new XMLHttpRequest();   

  
      }   

  
      else{   

  
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");   

  
      }   

  
         

  
      xmlhttp.onreadystatechange=function(){ 

  
          if (xmlhttp.readyState==4 && xmlhttp.status==200){ 

  
              document.getElementById("txtcity").innerHTML=xmlhttp.responseText;   

  
          }   

  
      } 

  
       

  
       

  
      var navtype=navigator.appVersion;  

  
   

  
      if(WhatBrowser()=='Chrome'){ 

  
          //alert('google'); 

  
          xmlhttp.open("get","ajax.php?fid="+fid+"&google=1",true);   

  
      } 

  
      else if(navtype.indexOf("Maxthon") >= 0){ 

  
          //alert('aoyou'); 

  
          xmlhttp.open("get","ajax.php?fid="+fid+"&aoyou=1",true);   

  
      } 

  
      else{ 

  
          xmlhttp.open("get","ajax.php?fid="+fid,true); 

  
      } 

  
      xmlhttp.send();

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

Ajax应用实例-搜索提示

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Ajax应用实例-搜索提示

热门文章

最新文章

相关课程

相关电子书

相关实验场景