AJAX
AJAX学习
名称:AJAX=Asynchronous JavaScript and Xml (异步的JavaScript和Xml)
特点:与服务器交互更新部分网页且不用重新加载整个页面
1:创建XMLHttpRequest对象
XMLHttpRequest对象用于在后台和服务器交换数据
现代浏览器IE7+、Firefox、Chrome、Safari、以及Opera均内建XMLHttpRequest
IE5和6用ActiveXObject
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
注: window是顶级对象(除object,function等)window代表了一个窗体,XMLHttpRequest是window的一个属性用来区分浏览器
2:XMLHttpRequest向服务器发送请求
xmlhttp.open(method,url,async);
xmlhttp.send();
方法 描述
open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
send(string) 将请求发送到服务器。
string:仅用于 POST 请求
get和post的区别:
1>.get简单更快
2>.在以下情况中,请使用 POST 请求:
1.无法使用缓存文件(更新服务器上的文件或数据库)
2.向服务器发送大量数据(POST 没有数据量限制)
3.发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:
方法 描述
setRequestHeader(header,value) 向请求添加 HTTP 头。
header: 规定头的名称
value: 规定头的值
eg:
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
3:XMLHttpRequest响应
通过XMLHttpRequest对象的responseText(获得字符串形式的响应数据)或者responseXML(获得XML形式的响应数据)
若服务器响应的是XML,则对XML对象进行解析
eg:
xmlDoc=xmlhttp.responseXML;
var txt="";
var x=xmlDoc.getElementsByTagName("tittle");
for(var i=0;i<x.length;i++){
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
//x[i].childNodes[0].nodeValue 获取元素第一个子节点的值
}
document.getElementById("myDiv").innerHTML=txt;
4:AJAX - onreadystatechange 事件
XMLHttpRequest对象的三个属性:
属性 描述
onreadystatechange 存储函数(函数名),每当readyState属性发生改变时,就会调用该函数。
readyState 存有XMLHttpRequest的状态,从0到4发生变化
0:请求未初始化;
1:服务器连接已建立
2:请求已接收
3:请求处理中
4:请求完成且响应就绪
status 200:“OK”
404:未找到页面
当readyState等于4且status为200时,表示响应已就绪
Callback函数
如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同):
<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>