ajax(异步javascript xml)是当下比较常用的请求方式,原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。
大多数情况下我们都是使用jquery ajax等其他框架封装好的方法,那么我们自己如何通过原生JavaScript方法实现ajax请求呢?
首先,第一个步骤创建一个 XMLHttpRequest 对象。如果浏览器不支持创建该对象,则需要创建ActiveXObject。
var xmlHttp;
function createxmlHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();
}
}
下面分别实现POST和GET请求,大体上有以下步骤
设置回调函数
使用OPEN方法与服务器建立连接
向服务器端发送数据
在回调函数中监听响应状态进行处理
使用xmlhttprequest对象的open()和send()方法发送资源请求给服务器。
xmlhttp.open(method,url,async) method包括get 和post,url主要是文件或资源的路径,async参数为true(代表异步)或者false(代表同步,实际使用同步的极少)
xhttp.send();//使用get方法发送请求到服务器。
xhttp.send(string);//使用post方法发送请求到服务器。
post
function doPost(url,data){
createxmlHttpRequest();
xmlHttp.open("POST",url);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(data);
xmlHttp.onreadystatechange = function() {
if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) {
//执行成功操作
} else {
//执行失败操作
}
}
}
GET
function doGet(url){
createxmlHttpRequest();
xmlHttp.open("GET",url);
xmlHttp.send(null);
xmlHttp.onreadystatechange = function() {
if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) {
//执行成功操作
} else {
//执行失败操作
}
}
}
以上是原生JavaScript实现ajax请求的简单实现……