如何使用原生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请求，大体上有以下步骤

  1. 设置回调函数

  2. 使用OPEN方法与服务器建立连接 

  3. 向服务器端发送数据

  4. 在回调函数中监听响应状态进行处理

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

Share
Newer Older