Ajax最核心的内容就是异步发送请求,Ajax使用XMLHttpRequest对象来完成异步请求的发送,因此可以说XMLHttpRequest对象是Ajax的核心对象
1.什么是XMLHttpRequest对象?
XMLHttpRequest对象是Ajax用于进行异步发送请求的核心对象,它用于在后台与服务器进行数据交换
通过使用XMLHttpRequest对象,开发者可以:
1>在不重新加载页面的情况下更新网页
2>在页面已加载后从服务器上请求数据
3>在页面已加载后从服务器上接受数据
4>在后台向服务器发送数据
2.XMLHttpRequest对象的创建
现代所有浏览器都内建了XMLHttpRequest对象,不同的浏览器使用的内建方法可能有些许不同,一般来说,总结为三种创建XMLHttRequest对象的语法:
1>new XMLHttpRequest(); //window.XMLHttpRequest
2>new ActionXObjext(Msxml2.XMLHTTP"); //window.ActiveXObject
3>new ActiveXObject("Microsoft.XMLHTTP"); //window.ActiveXObject
创建XMLHttpRequest对象的常用代码:
function createXMLHttpRequest(){
var xmlhttprequest;
if(window.XMLHttpRequest)
xmlhttprequest = new XMLHttpRequest();
else if(window.ActiveXObject){
try{
xmlhttprequest = new ActiveXObject("Mxsml2.XMLHTTP");
}
catch(e){
try{
xmlhttprequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
window.alert("浏览器不支持XMLHttpRequest对象的创建");
}
}
finally{
return xmlhttprequest;
}
}
}
3.XMLHttpRequest对象创建成功之后,就可以使用该对象来异步发送请求了。该对象发送请求与传统的发送请求不同,传统的请求发送需要提交保单或者请求新的网络等等,这些都会导致浏览器重新请求并加载页面;而使用XMLHttpRequest对象发送请求原理是通过JS代码来完成,无须刷新页面,从而实现了异步发送请求这一技术
4.XMLHttpRequest对象的常用方法:
1.abort():停止当前请求的发送
2.getAllResponseHeaders():获取服务器返回对的全部响应头
3.getResponseHeader(name):获取执行的服务器响应头信息
4.open(method,url,[,asyncflag,username,password]):与服务器url建立method方式的请求连接,asyncflag指定是否异步连接,username和password指定远程连接服务器的用户名和密码,如果没有则不需要指定
5.send(param):指定请求参数,如果是使用post方式则将需要传过去的参数使用该方法指定,格式为:send(name1=val1&name2=val2);如果是get则不需要,直接send(null)
6.setRequestHeader(name,value):设置请求头,在发送请求之前使用
5.XMLHttpRequest对象常用的属性
1.onreadystatechange:指定该对象readystate值改变也就是请求的状态改变时的事件处理函数
2.readyState:获取该对象的处理状态
3.resposneText/resposneXML:获取服务器的响应文本或者响应的XML文档对象
4.status:获取服务器返回的响应状态码
5.statusText:获取服务器返回的状态文本信息,只有服务器响应完成之后才会有该文本信息
6.实现简单的一步发送请求:
//异步发送请求的文本form.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Ajax实现异步请求</title>
</head>
<body>
<form method="psot">
<label for="username">username</label>
<input type="text" name="username" id="username" placeholder="please input your username" />
<br />
<label for="password">password</label>
<input type="password" name="password" id="password" placeholder="please input your password" />
<br />
<span> </span>
<button type="submit" id="login">login</button>
<span> </span>
<button type="reset">reset</button>
</form>
<div id="data">
</div>
<!--js start-->
<script>
window.onload = function(){
var login = document.getElementById('login');
login.onclick = function(){
//create xmlhttprequest
var ajax = new XMLHttpRequest();
//send request
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
ajax.open('post','test.php',true);
var data = 'username='+username+"&password="+password;
ajax.send(data);
//receive data from server
ajax.onreadystatechange = function(){
if(ajax.readyState == 4 && ajax.status == 200){
var serverdata = ajax.responseText;
document.getElementById('data').innerHTML = serverdata;
}
};
return false;
};
};
</script>
<!--js end-->
</body>
</html>
//服务器url的响应文件server.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>php站点测试文件</title>
</head>
<body>
<?php
echo "have received the data from client";
?>
</body>
</html>
//最终结果:点击login之后不用刷新页面将会在#data div下显示php文件传入的信息