ajax使用流程

ajax和普通http访问不一样,ajax使用xmlhttprequest对象访问服务器后,还需要使用回调函数处理显示服务器返回的值。 具体流程如下(本节只给出一个大概的流程分哪几部,具体如何实现,请参考子章节的具体实现)。

1.ajax创建XMLHttpRequest对象

javascript代码:

xmlhttp=new XMLHttpRequest();
详细参考子章节:ajax创建XMLHttpRequest对象

2.ajax发送请求send

javascript代码:

xmlhttp.open("GET","ajax_info.pho",true);
xmlhttp.send();
详细参考子章节:ajax发送请求send

3.ajax响应状态readyState

发送请求后需要监听onreadystatechange事件,来获得服务器响应状态。请求完成才能执行回调函数。

readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪

监听onreadystatechange事件请求成功并执行回调函数处理返回信息的代码:

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
class=Apple-interchange-newline>
详细参考子章节:ajax响应状态readyState

4.ajax回调responseText

如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性 描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。

responseText属性获取返回值
一般只会用responseText属性获取返回值,返回值为json字符串。
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
responseXML属性获取返回值
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
  {
  txt=txt + x[i].childNodes[0].nodeValue + "<br>";
  }
document.getElementById("myDiv").innerHTML=txt;
详细参考子章节:ajax回调responseText