Ajax学习笔记

2011-05-06
//Ajax学习笔记
ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
ajax 异步javascript和xml (asynchronous javascript and xml)
XMLHttpRequest是ajax的基础，它用于在后台与服务器交换数据
创建XMLHttpRequest对象
 所有现代浏览器(ie7+、firefox、chrome、safari、opera)均内建XMLHttpRequest对象
 var xmlhttp = new XMLHttpRequest();
 
 老版本的Ie5-6使用ActiveX对象
 var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
应对所有浏览器创建XMLHttpRequest对象
var xmlhttp = null;
if(window.XMLHttpRequest){
 xmlhttp = new XMLHttpRequest();//ie7+,firefox,chrome,etc
}
else{
 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
////////////////////////////////////////////////////////////////////
用XMLHttpRequest对象的open()和send()方法将请求发送到服务器
xmlhttp.open("GET","do.jsp",true);
xmlhttp.send(null);
方法解释：
open(method,url,async)
 method :请求的类型；通常是GET 或POST
 url:文件在服务器上的位置
 async:true(异步)或false(同步)

send(string)
 string:仅用于POST请求
使用GET还是POST
 与post相比，get更简单更快，大部分情况下使用
 下面情况使用post请求：
  无法使用缓存文件(更新服务器上的文件或数据库)
  向服务器发送大量数据
  发送包含未知字符的用户输入时，post更稳定和可靠
get请求实例：
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
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.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/demo_get.asp",true);
xmlhttp.send();
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>

</body>
</html>
上面的例子可能得到的是缓存的结果，为了避免这种情况，向url添加一个唯一的id
xmlhttp.open("GET","do.jsp?t="+Math.random(),true);
xmlhttp.send();
通过get方法发送信息
xmlhttp.open("GET","do.jsp?name="+name,true);
xmlhttp.open();
////////////////
post请求
如果想要想html表单那样post数据，则得用setRequestHeader()来添加HTTP头，然后在send()方法中规定您希望发送的数据：
xmlhttp.open("POST","do.jsp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=yn");
//
setRequestHeader(header,value):向请求添加HTTP头
 header规定头的名称 value:规定头的值
POST请求实例:
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
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.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("POST","/ajax/demo_post2.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
 
</body>
</html>
/////////////////////
当使用异步模式时，必须规定onreadystatechange事件中的就绪状态时执行的函数:
xmlhttp.onreadystatechange = function(){
 if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
  document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
 }
}
xmlhttp.open("GET","do.jsp"true);
xmlhttp.send();

服务器响应：
使用XMLHttpRequest对象的responseText和responseXML属性
responseText 获取字符串形式的响应数据
responseXML  获取xml形式的响应数据
//
onreadystatechange事件
 当请求被发送到服务器时，我们需要执行一些基于响应的任务
 每当readyState改变时，就会触发onreadystatechange事件
 readyState属性存有XMLHttpRequest的状态信息
XMLHttpRequest对象的三个重要属性：
onreadystatechange 存储函数，每当readyState属性改变时，就会调用该函数
readyState 存有XMLHttpRequest的状态信息，
  0 请求未初始化
  1，服务器连接已建立
  2，请求接收中
  3，请求处理中
  4，请求已完成，且响应已就绪
status     服务器返回信息 200 OK    404 未找到页面

//
最后一个代码
function showHint(str)
{
var xmlhttp;
if (str.length==0)//如果输入框为空 (str.length==0)，则该函数清空 txtHint 占位符的内容，并退出函数
  {
  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","gethint.asp?q="+str,true);
xmlhttp.send();
}