您的位置：首页 > Web前端 > JavaScript

原生JavaScript实现ajax异步请求代码

2016-11-27 18:47 567 查看

jQuery封装了JavaScript的一些常用方法，而jQuery中的$ajax（），$get（），$post（）是比较常用的方法，也是大家最熟悉，最常用的，但是在面试时，通常面试官，会要求你手写原生ajax异步请求的代码，此时即便你的jquery学的再好，也是无济于事的。所以下面我将分享ajax异步请求的原生js代码，希望对你有所帮助。

1.XMLHttpRequest对象：
XMLHttpRequest 对象用于在后台与服务器交换数据，他可以：

1) 在不重新加载页面的情况下更新网页

2) 在页面已加载后从服务器请求数据

3) 在页面已加载后从服务器接收数据

4) 在后台向服务器发送数据

所有现代的浏览器都支持 XMLHttpRequest 对象。

2.XMLHttpRequest的方法：
XMLHttpRequest对象的方法不多，下面是一些最基本的方法：

a. abort（）：停止发送当前请求。

b. getAllReponseHesders（）：获取服务器返回的全部响应头。

c. getReponseHesders（“headersLabel”）：根据响应头名字，获取对应的响应头。

d. Open（“method”，url，“[，asyncFlag[，“username“[，”password“]]]”）：与服务器建立url连接，并设置请求方法提供信息。

e. Send（content）：发送请求，content是请求参数。

f. setRuestHeader（”label“，”value“）：在发送请求前先设置请求头。

3.原生ajax代码步骤：
1) 定义XMLHttpRequest对象

2) 与服务器建立连接

3) 发送请求

4) 接受来自服务器的信息并处理

4.原生ajax代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
<script src="ajax.js"></script>
<script type="text/javascript">
window.onload = function(){
var xmlrequest;
//完成XMLHttpRequest初始化
function creatXMLHttpRequest(){
if(window.XMLHttpRequest){ //判定兼容性
xmlrequest= new XMLHttpRequest(); //Dom2浏览器
}
else if(window.ActiveXObject){ //IE浏览器
try{
xmlrequest= new ActiveXObject("msxml2.XMLHTTP");
}catch(e){
try{
xmlrequest= new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
}
function change(url){//接受请求响应的URL
creatXMLHttpRequest();
xmlrequest.open("POET",url,true);//连接服务器
xmlrequest.setRequestHeader("content-Type","applicaion/x-www-form-urlencoded");
//设置请求头编码方式
xmlrequest.onreadystatechange = processResponse;
xmlrequest.send(null); //发送请求
}
//定义处理响应的回调函数
function processResponse(){
if(xmlrequest.status ==4){
if(xmlrequest.status ==200){ //请求成功
var headers = xmlrequest.getAllResponseHeaders();
alert("响应头类型"+typeof headers+"\n"+headers);
document.getElementById('odiv').innerHTML = headers; //请求成功后要做的事情
}
else{
window.alert("请求页面有异常");
}
}
}
}
</script>
</head>
<body>
<div id="odiv"></div>
</body>
</html>

上述代码中，系统采用post方法发送请求，当请求得到响应后，使用getAllResponseHeaders()方法获取所有的请求头，并将其输出，当然这里可以做其他的事情。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ajax javascript 原生ajax代码

相关文章推荐

新的分享

章节导航