jQuery与JavaScript入门经典——AJAX

来源：互联网发布：寻找网络兼职编辑：程序博客网时间：2024/05/16 08:01

ＧＥＴ请求和ＰＯＳＴ请求　GET请求讲要传递的数据放在URL中，而POST将他们放在请求数据中，ＧＥＴ：http://localhost/code/example.html?first=Brad&last=Dayley
POST 请求的ＵＲＬ：http://localhost/code/example.html POST 请求的数据：first=Brad last=Daley
从服务器获取信息时用GET请求，修改服务器上的数据时用POST请求。

实现ＡＪＡＸ需要问window.XMLHttoRequest对象，XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
存有 XMLHttpRequest 的状态。

属性readyState
从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status
200: “OK”
404: 未找到页面
onreadystatechange
存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
用callback函数的AJAX实例

<html><head><script type="text/javascript">var xmlhttp;function loadXMLDoc(url,cfunc){if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }xmlhttp.onreadystatechange=cfunc;xmlhttp.open("GET",url,true);xmlhttp.send();}function myFunction(){loadXMLDoc("/ajax/test1.txt",function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  });}</script></head><body><div id="myDiv"><h2>Let AJAX change this text</h2></div><button type="button" onclick="myFunction()">通过 AJAX 改变内容</button></body></html>

请求PHP例子：
启动Apache服务器，

<html><head lang="en">    <meta charset="UTF-8">    <script type="text/javascript">        function showHint(str)        {            var xmlhttp;            if (str.length==0)            {                document.getElementById("txtHint").innerHTML="";                return;            }            if (window.XMLHttpRequest)            {// code for IE7+, Firefox, Chrome, Opera, Safari                xmlhttp=new XMLHttpRequest();            }            else            {// code for IE6, IE5                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");            }            xmlhttp.onreadystatechange=function()            {                if (xmlhttp.readyState==4 && xmlhttp.status==200)                {                    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;                }            }            xmlhttp.open("GET","/ajax/gethint.php?q="+str,true);            xmlhttp.send();        }    </script></head><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// 用名字来填充数组$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;?>

运行结果：
这里写图片描述

0 0