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();