封装原声ajax,原生AJAX封装的简单实现
回归下原生js,网上看到的AJAX封装,遂拿来改改,不知还有何弊端,望指出!
var ajaxHelper = {
/*1.0 浏览器兼容的方式创建异步对象*/
makeXHR: function () {
//声明异步对象变量
var xmlHttp = false;
//声明 扩展 名
var xmlHttpObj = ["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "MSXML.XMLHttp"];
//判断浏览器是否支持 XMLHttpRequest,如果支持,则是新式浏览器,可以直接创建
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
//否则,只能循环遍历老式浏览器异步对象名,尝试创建,知道创建成功为止
else if (window.ActiveXObject) {
for (i = 0; i < xmlHttpObj.length; i++) {
xmlHttp = new ActiveXObject(xmlHttpObj[i]);
if (xmlHttp) {
break;
}
}
}
//判断 异步对象 是否创建 成功,如果 成功,则返回异步对象,否则返回false
return xmlHttp ? xmlHttp : false;
},
/*2.0 发送Ajax请求*/
doAjax: function (method, url, data, isAyn, callback, type) {
method = method.toLowerCase();
//2.1创建异步对象
var xhr = this.makeXHR();
//2.2设置请求参数(如果是get,则带url参数,如果不是,则不带)
xhr.open(method, url + (method == "get" ? "?" + data : ""), isAyn);
//2.3根据请求谓词(get/post),添加不同的请求头
if (method == "get") {
xhr.setRequestHeader("If-Modified-Since", 0);
} else {
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
//2.4设置回调函数
xhr.onreadystatechange = function () {
//如果接受完毕 服务器发回的 响应报文
if (xhr.readyState == 4) {
//判断状态码是否正常
if (xhr.status == 200) {
if (type.toLowerCase() == "json") {
var ret = {};
try {
if (typeof JSON != "undefined") {
ret = JSON.parse(xhr.responseText);
} else {
//IE8以下不支持JSON
ret = new Function("return " + xhr.responseText)();
}
callback(ret);
} catch (e) {
console.log(e.message);
callback(false);
}
} else {
//直接返回文本
callback(xhr.responseText);
}
} else {
console.log("AJAX Status Code:" + xhr.status);
callback(false);
}
}
};
//2.5发送(如果是post,则传参数,否则不传)
xhr.send(method != "get" ? data : null);
},
/*3.0 直接发送Post请求*/
doPost: function (url, data, isAyn, callback, type) {
this.doAjax("post", url, data, isAyn, callback, type);
},
/*4.0 直接发送Get请求*/
doGet: function (url, data, isAyn, callback, type) {
this.doAjax("get", url, data, isAyn, callback, type);
}
};
假设一个需求,后端要求传入两个数字n1、n2,然后返回总和。
当其中一个参数为空或者不是数字时,返回:{"status":"0", "msg":"参数有误!"}
当正确的时候,返回:{"status":"1", "sum":"//n1加n2的和"}
后端的代码就不贴出来了。
前端调用:
document.getElementById("btnSubmit").onclick = function () {
ajaxHelper.doPost("后端url", "n1=10&n2=25", true, function (ret) {
if (!ret) { return; }
if (ret.status != 1) {
alert(ret.msg);
return;
}
var n = ret.sum;
var s = ret.status;
}, "json");
};
以上这篇原生AJAX封装的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
封装原声ajax,原生AJAX封装的简单实现相关推荐
- java原生封装_[Java教程]原生AJAX封装
[Java教程]原生AJAX封装 0 2016-07-12 13:00:08 回归下原生js,网上看到的AJAX封装,遂拿来改改,不知还有何弊端,望指出!1 var ajaxHelper = { 2 ...
- js 封装ajax方法吗,原生JS封装ajax方法
jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...
- 原生ajax和Jquery的ajax
目录 原生ajax 传统请求(同步方式)的问题 Ajax优势和作用 Ajax请求与传统请求的区别: ajax原理(方法,属性 ) XMLHttpRequest open send 属性 readySt ...
- 对原生ajax的理解
$.ajax({url:'',//请求文件路径type:'',//请求方式GET POSTdata:{},//要发给服务器的数据参数dataType:'',//希望接口返回的数据格式json,stri ...
- Django学习---原生ajax
Ajax 原生ajax Ajax主要就是使用 [XmlHttpRequest]对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件). ...
- 原生html中modal,基于原生JS封装的Modal对话框插件
基于原生JS封装Modal对话框插件 原生JS封装Modal对话框插件,个人用来学习原理与思想,只有简单的基本框架的实现,可在此基础上添加更多配置项 API配置 //基本语法 let modal = ...
- 原生JS封装Ajax插件(同域jsonp跨域)
2019独角兽企业重金招聘Python工程师标准>>> 抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax ...
- 原生JS封装ajax以及request
一.封装原生的xhr为ajax类 xhr以及用法见之前的文章 1.根据url确定请求的头部以及别的信息. var _headerConfig = {};if(url.indexOf('getcaptc ...
- Ajax(jQuery封装),表单form提交(Ajax),art-template模板引擎,原生Ajax,XML和JSON,axios,跨域和JSONP,防抖和节流,HTTP协议
目录 服务器基本概念 1.URL 2.URL地址的组成部分 3. 图解客户端与服务器的通信过程 4.网页中如何请求数据 5.资源的请求方式 Ajax jQuery中的Ajax 1. $.get()函数 ...
最新文章
- C++关键字union
- 基于功能特征的间隔线路图形设计技术的研究
- 基于Xcode安装CocoaPods报错
- java 运行 出现选择_Eclipse 运行出现java.lang.NoClassDefFoundError的解决方法
- 视觉控每天盯着桌面,少不了桌面手机壁纸图片,请收好
- sql checksum_SQL Server中的CHECKSUM页面验证
- 实现JPA的懒加载和无外键
- 三星手机真假测试软件,#三星EVO Plus MicroSD存储卡# 火眼金睛识真伪、评测软件测性能...
- Appium desktop下载安装
- 如何从当前文件夹直接打开cmd快捷键
- 《数学之美》读书笔记
- Kali忘记密码的重置方法
- 假设检验:如何理解单侧、双侧检验的拒绝域
- HTML+CSS实战(哈罗单车首页)
- 好设计如何诞生:关于好设计的100件事
- oracle 根据sid psid,如何获得所有windows用户的SID
- 生日祝福html_集体生日会|生活明朗,万物可爱,我们一起长大
- APISpace 天气预报查询API
- 软路由的正确组网姿势(上篇)
- 【高德地图进阶】--- 自定义地图