如何使用原生JavaScript实现AJAX请求
WEB基础 12月 12, 2016
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请求的简单实现……