原生js如何使用ajax请求,如何使用原生JavaScript实现AJAX请求

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请求的简单实现……