原生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 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 Javascript
js的逻辑运算符 ||
May 31 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
实测jquery data()如何存值
Aug 18 Javascript
javascript将数字转换整数金额大写的方法
Jan 27 Javascript
理解javascript封装
Feb 23 Javascript
在Node.js中使用Javascript Generators详解
May 05 Javascript
javascript对象的相关操作小结
May 16 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 Javascript
angular4强制刷新视图的方法
Oct 09 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 Javascript
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
SSI指令
2006/11/25 PHP
浅析PHP Socket技术
2013/08/02 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
解决layui-open关闭自身窗口的问题
2019/09/10 Javascript
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
python中from module import * 的一个坑
2014/07/20 Python
Python列表切片用法示例
2017/04/19 Python
Python对字符串实现去重操作的方法示例
2017/08/11 Python
python redis 删除key脚本的实例
2019/02/19 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
Spartoo芬兰:欧洲最大的网上鞋店
2016/08/28 全球购物
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
经济管理专业毕业生推荐信
2013/11/11 职场文书
婚礼证婚人证婚词
2014/01/08 职场文书
xxx同志考察材料
2014/02/07 职场文书
初中学生期末评语
2014/04/24 职场文书
报效祖国演讲稿
2014/09/15 职场文书
学生检讨书如何写
2014/10/30 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
Python实现智慧校园自动评教全新版
2021/06/18 Python
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫