原生JavaScript实现Ajax的方法
2016-07-08来源:易贤网

首先为大家分享了原生JavaScript实现Ajax代码,供大家参考,具体内容如下

var getXmlHttpRequest = function() {

  if (window.XMLHttpRequest) {

    //主流浏览器提供了XMLHttpRequest对象

    return new XMLHttpRequest();

  } else if (window.ActiveXObject) {

    //低版本的IE浏览器没有提供XMLHttpRequest对象

    //所以必须使用IE浏览器的特定实现ActiveXObject

    return new ActiveXObject("Microsoft.XMLHttpRequest");

  }

};

var xhr = getXmlHttpRequest();

xhr.onreadystatechange = function() {

  console.log(xhr.readyState);

  if (xhr.readyState === 3 && xhr.status === 200) {

    //获取成功后执行操作

    //数据在xhr.responseText

    console.log(xhr.responseText);

  }

};

xhr.open("get", "data.php", true);

xhr.send("");

下面和大家分享几种利用javascript实现原生ajax的方法。 

实现ajax之前必须要创建一个 XMLHttpRequest 对象。如果不支持创建该对象的浏览器,则需要创建 ActiveXObject,具体方法如下: 

var xmlHttp; 

function createxmlHttpRequest() { 

if (window.ActiveXObject) { 

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 

} else if (window.XMLHttpRequest) { 

xmlHttp=new XMLHttpRequest(); 

(1)下面使用上面创建的xmlHttp实现最简单的ajax get请求: 

function doGet(url){ 

// 注意在传参数值的时候最好使用encodeURI处理一下,以防出现乱码 

createxmlHttpRequest(); 

xmlHttp.open("GET",url); 

xmlHttp.send(null); 

xmlHttp.onreadystatechange = function() { 

if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) { 

alert('success'); 

} else { 

alert('fail'); 

}

(2)使用上面创建的xmlHttp实现最简单的ajax post请求: 

function doPost(url,data){ 

// 注意在传参数值的时候最好使用encodeURI处理一下,以防出现乱码 

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)) { 

alert('success'); 

} else { 

alert('fail'); 

以上就是本文的全部内容,希望对大家的学习有所帮助。

2026公务员·事业单位培训课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
推荐信息