原生JavaScript实现Ajax的方法

 更新时间:2016年04月07日 16:43:44   投稿:lijiao  
这篇文章主要介绍了原生JavaScript实现Ajax的几种方法,感兴趣的小伙伴们可以参考一下

首先为大家分享了原生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'); 
} 
} 
} 

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

相关文章

  • JavaScript 实现下雪特效的示例代码

    JavaScript 实现下雪特效的示例代码

    这篇文章主要介绍了JavaScript 实现下雪特效的示例代码,帮助大家利用JavaScript制作特效,感兴趣的朋友可以了解下
    2020-09-09
  • 微信小程序之onLaunch与onload异步问题详解

    微信小程序之onLaunch与onload异步问题详解

    这篇文章主要介绍了微信小程序之onLaunch与onload异步问题详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • 浅谈javascript语法和定时函数

    浅谈javascript语法和定时函数

    初学者可能对Javascript的定时器有误解,认为它们是线程,其实Javascript是运行于单线程中的,而定时器仅仅是计划在未来的某个时间执行,而具体的执行时间是不能保证的,因为在页面的生命周期中,不同的时间可能有其它代码在控制Javascript的里进程。
    2015-05-05
  • 分离式javascript取当前element值的代码

    分离式javascript取当前element值的代码

    比较不错的分离式js代码,获取element的值,大家注意下,运行后的效果是32之类的值,其实主要是没有强制转换成数字,所以大家可以加上
    2008-05-05
  • JS URL传中文参数引发的乱码问题

    JS URL传中文参数引发的乱码问题

    今天的项目中碰到了一个乱码问题,从JS里传URL到服务器,URL中有中文参数,服务器里读出的中文参数来的全是“?”,查了网上JS编码相关资料得以解决。
    2009-09-09
  • js方法数据验证的简单实例

    js方法数据验证的简单实例

    下面小编就为大家带来一篇js方法数据验证的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • 纯JavaScript实现的分页插件实例

    纯JavaScript实现的分页插件实例

    这篇文章主要介绍了纯JavaScript实现的分页插件,涉及javascript结合php动态实现分页效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • javascript 一个自定义长度的文本自动换行的函数

    javascript 一个自定义长度的文本自动换行的函数

    javascript 一个自定义长度的文本自动换行的函数...
    2007-08-08
  • BootStrap响应式导航条实例介绍

    BootStrap响应式导航条实例介绍

    响应式导航条就是可以在不同的设备下查看不同的效果。这篇文章主要介绍了BootStrap响应式导航条实例介绍的相关资料,小编认为本文介绍的非常的不错,特此分享给大家,供大家参考
    2016-05-05
  • JS获取下拉列表所选中的TEXT和Value的实现代码

    JS获取下拉列表所选中的TEXT和Value的实现代码

    本篇文章主要是对JS获取下拉列表所选中的TEXT和Value的实现代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01

最新评论