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