您的位置：首页 > 理论基础 > 计算机网络

Ajax入门之XMLHttpRequest核心对象的详解

2017-03-20 12:17 555 查看
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文件传入的信息
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航