This's FE Life
  • Home
  • Categories
    • LifeStyle
    • Travel
  • Tags
    • 冰山工作室
    • 前端
    • JavaScript
    • Web

© Carlo All Rights Reserved 2021 . 辽ICP备15007588号

如何使用原生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
Facebook Twitter Linkedin Google+
Newer Older