ajax基础（1）

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

//将服务器响应内容显示到指定id处
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

1. onreadystatechange 事件
   当请求被发送到服务器时，我们需要执行一些基于响应的任务。
   每当 readyState 改变时，就会触发 onreadystatechange 事件。
   readyState 属性存有 XMLHttpRequest 的状态信息。
   下面是 XMLHttpRequest 对象的三个重要的属性：
   onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
   readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
   0: 请求未初始化
   1: 服务器连接已建立
   2: 请求已接收
   3: 请求处理中
   4: 请求已完成，且响应已就绪
   status 200: “OK”
   404: 未找到页面

当 readyState 等于 4 且状态为 200 时，表示服务器处理已完成并且响应已就绪：
相关代码：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

1. 在输入框输入字符串时可以发送ajax请求，实时给出输入提示

<input type="text" id="txt1" onkeyup="showHint(this.value)" />

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.asp?q="+str,true);
xmlhttp.send();
}

4.根据下拉框选项实时更新内容，使用的触发函数是

<select name="customers" onchange="showCustomer(this.value)" 
xmlhttp.open("GET","/ajax/getcustomer.asp?q="+str,true); //创建一个新的http请求，并指定此请求的方法、URL以及验证信息
xmlhttp.send();//可以调用send方法向服务器发送数据

5.解决为不同浏览器创建不同的 XMLHTTP 对象的问题

function GetXmlHttpObject()
{
  var xmlHttp=null;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    }
  return xmlHttp;
}

function showHint(str)//根据输入框内容进行提示的函数
{

  if (str.length==0)
    { 
    document.getElementById("txtHint").innerHTML="";
    return;
    }

  xmlHttp=GetXmlHttpObject()

  if (xmlHttp==null)
    {
    alert ("您的浏览器不支持AJAX！");
    return;
    }

var url="gethint.asp";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged() //状态改变触发的函数
{ 
  if (xmlHttp.readyState==4)
  { 
  document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
  }
}

以上内容来自http://www.w3school.com.cn/example/ajax_examples.asp 的总结