Ajax学习

ajax教程:
简介:AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

创建XHR:
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",url,true);
xmlhttp.send();


 GET 还是 POST?
 与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

 然而,在以下情况中,请使用 POST 请求:

 无法使用缓存文件(更新服务器上的文件或数据库)
 向服务器发送大量数据(POST 没有数据量限制)
 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

服务器响应:
如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
属性 描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。

onreadystatechange 事件
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  0: 请求未初始化
  1: 服务器连接已建立
  2: 请求已接收
  3: 请求处理中
  4: 请求已完成,且响应已就绪
 
status 200: "OK"
    404: 未找到页面
 
实例:搜索

html页面
<!DOCTYPE html>
<html>
<head>
</head>
<script>
function showHint(str)
{
 var xmlhttp;
 if(str.length==0)
 {
  document.getElementById('txtHint').innerHTML="";
  return;
 }
 //创建XMLHttpRequest对象
 if(window.XMLHttpRequest)
 {
  xmlhttp=new XMLHttpRequest();
 }else{
  //ie5,6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }

 xmlhttp.onreadystatechange=function(){
  if(xmlhttp.readyState==4 &&xmlhttp.status==200)
  {
   document.getElementById('txtHint').innerHTML=xmlhttp.responseText;
  }
 }
 xmlhttp.open('GET','select.php?q='+str,true);
 xmlhttp.send();
}
</script>
<body>
<h3>请在下面的输入框中键入字母(A - Z):</h3>
<form action="">
姓氏:<input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>建议:<span id="txtHint"></span></p>

</body>
</html>

 

php页面
<?php
// 用名字来填充数组
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";

//获得来自 URL 的 q 参数
$q=$_GET["q"];

//如果 q 大于 0,则查找数组中的所有提示
if (strlen($q) > 0)
  {
  $hint="";
  for($i=0; $i<count($a); $i++)
    {
    if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
      {
      if ($hint=="")
        {
        $hint=$a[$i];
        }
      else
        {
        $hint=$hint." , ".$a[$i];
        }
      }
    }
  }

// 如果未找到提示,则把输出设置为 "no suggestion"
// 否则设置为正确的值
if ($hint == "")
  {
  $response="no suggestion";
  }
else
  {
  $response=$hint;
  }

//输出响应
echo $response;
?>

 

 

你可能感兴趣的:(Ajax)