Ajax是XMLHTTPequest对象和JavaScript、XML、CSS、DOM等技术的组合。Ajax可以像桌面程序一样只同服务器进行数据层面的交换,而不用每次都刷新页面。
发送请求的四个步骤:
(1)初始化XMLHTTPRequest对象。
(2)为XMLHTTPRequest对象指定一个回调函数,用于对返回结果进行处理。
(3)创建一个与服务器的连接。
(4)向服务器发送请求。
XMLHTTPRequest对象的常用方法:
①open()方法
作用:设置进行异步请求目标的URL、请求方法以及其他参数信息。
语法:
open("method","URL"[,asyncFlag[,"userName"[,"password"]]]);
说明:
method:用于指定请求的类型。一般为GET或POST
URL:用于指定请求地址,可以使用绝对地址或相对地址,并且可以传递查询字符串
asyncFlag:可选参数,用于指定请求方式,异步为true,同步为false。默认为true。
userName:可选参数,用于指定请求用户名。
password:可选参数,用于指定请求密码。
②send()方法
作用:向服务器发送请求。如果请求声明为异步,该方法将立即返回,否则将等到接收到响应为止。
语法:
send(content);
说明:
content:用于指定发送的数据,可以是DOM对象的实例,输入流或字符串。没有参数需要传递可以设置为null。
③setRequestHeader()方法
作用:用于为请求的HTTP头设置值。
语法:
setRequestHeader("header","value");
说明:
header:指定HTTP头
value:为指定HTTP头设置值
注意:该方法必须在调用open()方法之后才能使用
④abort()方法
作用:停止或放弃当前异步请求。
⑤getResponseHeader()方法
作用:用于以字符串形式返回指定的HTTP头信息。
语法:
getResponseHeader("headerLabel");
说明:
headerLabel:用于指定HTTP头,包括Server、Content-Type和Date等。
⑥getAllResponseHeaders()方法
作用:以字符串形式返回完整的HTTP头信息。
XMLHTTPRequest对象的常用属性:
①onreadystatechange属性
作用:用于指定状态改变时所触发的事件处理器。通常会调用JavaScript函数。
②readyState属性
作用:获取请求的状态。
五个属性值的意义:
0:未初始化
1:正在加载
2:已加载
3:交互中
4:完成
③responseText属性
作用:获取服务器的响应,表示为字符串。
④responseXML属性
作用:获取服务器的响应,表示为XML。这个对象可以解析为一个DOM对象。
⑤status属性
作用:返回服务器的HTTP状态码。
状态码:
200:表示成功
202:表示请求被接收,但尚未成功
400:错误的请求
404:文件未找到
500:内部服务器错误
⑥statusText属性
作用:返回HTTP状态码对应的文本。
向服务器发送请求
①初始化XMLHTTPRequest对象
IE浏览器(两种):
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
非IE浏览器:
var xmlhttp = new XMLHTTPRequest();
②为XMLHTTPRequest对象指定一个回调函数
xmlhttp.onreadystatechange = function(){ getResult();};
③创建一个与服务器的连接(两种方式)
xmlhttp.open('GET',url,true);
xmlhttp.open('POST',url,true);
④向服务器发送请求
向服务器发送GET请求:
xmlhttp.send(null);
向服务器发送POST请求
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //必须加在send()方法之前
xmlhttp.send("user=admin&pwd=123456");
处理服务器响应
回调函数:
function getResult(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){ //判断请求状态
alert(xmlhttp.responseText); //根据需要处理返回结果
}
else{
alert("请求的页面出错");
}
}
代码演示:
<!DOCTYPE html>
<html>
<head>
<title>ajax演示</title>
<meta charset="utf-8" />
</head>
<body>
<div>使用ajax修改内容</div>
<button onclick="loadXMLDoc()">修改内容</button>
</body>
<script type="text/javascript">
function loadXMLDoc(){
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
var Div=document.getElementsByTagName('div')[0];
Div.innerText=xmlhttp.responseText;
}
}
xmlhttp.open('GET',"1.txt",true);
xmlhttp.send();
}
</script>
</html>