原生JavaScript实现Ajax的方法


Posted in Javascript onApril 07, 2016

首先为大家分享了原生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 支持ie和firefox杰奇翻页函数
Jul 22 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
Apr 02 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
判断window.onload是否多次使用的方法
Sep 21 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
Feb 14 Javascript
Ionic学习日记实现验证码倒计时
Feb 08 Javascript
Vue 动态设置路由参数的案例分析
Apr 24 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
jquery插件开发模式实例详解
Jul 20 jQuery
详解基于Wepy开发小程序插件(推荐)
Aug 01 Javascript
vue导航栏部分的动态渲染实例
Nov 01 Javascript
vue-cropper组件实现图片切割上传
May 27 Vue.js
JavaScript数据推送Comet技术详解
Apr 07 #Javascript
js实现商品抛物线加入购物车特效
Nov 18 #Javascript
js类式继承与原型式继承详解
Apr 07 #Javascript
javascript原型继承工作原理和实例详解
Apr 07 #Javascript
浅析JS原型继承与类的继承
Apr 07 #Javascript
AngularJs 弹出模态框(model)
Apr 07 #Javascript
详解AngularJS 模态对话框
Apr 07 #Javascript
You might like
php下拉选项的批量操作的实现代码
2013/10/14 PHP
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
js的hasownproperty使用示例
2014/03/02 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
基于javascript制作微信聊天面板
2020/08/09 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
django使用channels2.x实现实时通讯
2018/11/28 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
利用Python开发微信支付的注意事项
2016/08/19 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
python获取地震信息 微信实时推送
2019/06/18 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
保荐人的岗位职责
2013/11/19 职场文书
金属材料工程个人求职的自我评价
2013/12/04 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
测量员岗位职责
2015/02/14 职场文书
质量保证书格式模板
2015/02/27 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书
儿子满月酒致辞
2015/07/29 职场文书
导游词之安徽九华山
2019/09/18 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python