Ajax应用实例-搜索提示
注意：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();