什么是 AJAX ?
AJAX=异步javascript和XML
AJAX是一种用于创建快速网页的技术
通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新,不需要加载整个网页,对网页的某部分进行更新
XMLHttpRequest是AJAX的基础
XMLHttpRequest用于在后台与服务器交换数据,
创建XMLHttpRequest对象的语法
新版本使用:var able=new XMLHttpRequest()(所有现代浏览器(IE7+、Friefox、Chrome、Safari))
老版本使用:variable=new ActiveXObject("Microsoft.XMLHTTP");(IE5和IE6)
var variable
if(windown.XMLHttpRequest)
{
variable=new XMLHttpRequest()
}
else{
variable=new ActiveXObject("Microsoft.XMLHTTP")
}
请求发送服务器使用XMLHttpRequest对象的open()和send()方法
variable.open(method,url,async)
method:请求类型:get或者post
url:文件服务器上地址
async:true(异步),false(同步)
send(string)将请求发送到服务器
像Http表单哪样POST数据,使用setRequestHeader()来添加Http头,然后send()方法中规定你希望发送的数据
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
setRequestHeader(header,value):header规定头名称,value规定头值
当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
使用 XMLHttpRequest 对象的responseText和responseXML属性
responseText:获取字符串形式的响应数据
responseXML:获取xml形式的响应数据
onreadystatechange事件
当改变readyState时,触发onreadystatechange事件
onreadystatechange:储存函数(或者函数名),每当readyState属性改变时调用
readyState:0:请求初始化
1:服务器连接已经建立
2:请求已经接收
3:请求处理中
4:请求已经完成,且响应
status: 200:OK
404:未找到页面
callback函数
callback函数是一种参数形式传递给另一个函数的函数
如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同)
function loadX(url)
{
var xmlHttp
if(windown.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest()
}
else
{
xmlHttp=new ActiveXObject()
}
xmlHttp.onreadystatechange=stateChange
xmlHttp.open("GET",url,true);
xmlHttp.send()
}
function stateChange(){
if(xmlHttp.readystate==="4"&&xmlHttp.status==="200")
{
document.getElementById("T1").innerHTML=xmlhttp.responseText;
}
else
{
alert("Problem retrieving data:" + xmlhttp.statusText)
}
}
<div id="T1" style="border:1px solid black;height:40;width:300;padding:5"></div><br />
<button onclick="loadXMLDoc('/example/ajax/test_xmlhttp2.txt')">Click</button>