js 封装原生ajax
jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿。这时我们就需要用原生JS写一个ajax函数了。其实所有框架的ajax函数都是基于原生来写的,只不过被封装到了他的框架里,我们只需要调用即可。
/* 封装ajax函数
* @param {string}opt.type http连接的方式,包括POST和GET两种方式
* @param {string}opt.url 发送请求的url
* @param {boolean}opt.async 是否为异步请求,true为异步的,false为同步的
* @param {object}opt.data 发送的参数,格式为对象类型
* @param {function}opt.success ajax发送并接收成功调用的回调函数
*/
function ajax(opt) {
opt = opt || {};
opt.method = opt.method.toUpperCase() || 'POST';
opt.url = opt.url || '';
opt.async = opt.async || true;
opt.data = opt.data || null;
opt.success = opt.success || function () {};
var xmlHttp = null;
if (XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}var params = [];
for (var key in opt.data){
params.push(key + '=' + opt.data[key]);
}
var postData = params.join('&');
if (opt.method.toUpperCase() === 'POST') {
xmlHttp.open(opt.method, opt.url, opt.async);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
xmlHttp.send(postData);
}
else if (opt.method.toUpperCase() === 'GET') {
xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
xmlHttp.send(null);
}
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
opt.success(xmlHttp.responseText);
}
};
}
应用实例
ajax({
method: 'POST',
url: 'test.php',
data: {
name1: 'value1',
name2: 'value2'
},
success: function (response) {
console.log(response);
}
});
js 封装原生ajax的更多相关文章
- 用require.js封装原生js轮播图
index.html页面: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- 类似jQuery的原生JS封装的ajax方法
一,前言: 前文,我们介绍了ajax的原理和核心内容,主要讲的是ajax从前端到后端的数据传递的整个过程. Ajax工作原理和原生JS的ajax封装 真正的核心就是这段代码: var xhr = ne ...
- js实现原生Ajax的封装及ajax原理详解
原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...
- 使用原生JS封装一个ajax
function ajax(data){ //第一步,创建XHR对象 var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpReque ...
- vue实践---vue结合 promise 封装原生ajax
有时候不想使用axios这样的外部依赖,想自己封装ajax,这里有两种方法 方法一,在单个页面内使用 封装的代码如下: beforeCreate () { this.$http = (() => ...
- 封装原生Ajax
var Chef = { createAjax:function() { var xhr = null; try { //IE系列浏览器 xhr = new ActiveXObject("m ...
- 原生ajax解析&封装原生ajax函数
前沿:对于此篇随笔,完是简要写了几个重要的地方,具体实现细节完在提供的源码做了笔记 <一>ajax基本要点介绍--更好的介绍ajax 1. ajax对象中new XMLHttpReques ...
- ajax简介及JS写原生ajax
ajax 1.什么是ajax ajax 的全称是Asynchronous JavaScript and XML,其中, Asynchronous 是异步的意思,指的是异步 JavaScript 和 X ...
- ES6封装原生ajax请求
http (data) { return new Promise((resolve, reject) => { var xhr = new XMLHttpRequest(); xhr.onrea ...
随机推荐
- 那就用pthon来写个跳板机吧
1.需求 程序一: 1.后台管理 - 堡垒机上创建用户和密码(堡垒机root封装的类,UserProfile表) - .bashrc /usr/bin/python3 /data/bastion.py ...
- ubuntu系统中crontab的使用介绍
1.创建crontab任务 用户hancool
- 在delphi中,DLL加载时做初始化的Demo
library DLLEntry;//dll源码 uses SysUtils, Classes, Dialogs, Windows; {$R *.res} procedure DLLEntryPoin ...
- C# Unity游戏开发——Excel中的数据是如何到游戏中的 (三)
本帖是延续的:C# Unity游戏开发——Excel中的数据是如何到游戏中的 (二) 前几天有点事情所以没有继续更新,今天我们接着说.上个帖子中我们看到已经把Excel数据生成了.bin的文件,不过其 ...
- jQuery css,position,offset,scrollTop,scrollLeft用法
jQuery css,position,offset,scrollTop,scrollLeft用法: <%@ page language="java" import=&quo ...
- App Store Review Guideline(带翻译)
1. Terms and conditions(法律与条款) 1.1 As a developer of applications for the App Store you are bound b ...
- 测试web网站兼容性的方法
随着操作系统,浏览器越来越多样性,导致软件兼容性测试在目前软件测试领域占有很重要的地位,无论是B/S架构还是C/S架构的软件都需要进行兼容性测试,为了充分保证产品的平台无关性,使用户充分感受到软件的友 ...
- Round-Robin负载均衡算法及其实现原理
毫无疑问,随着互联网.移动网络接入成本的降低,互联网正在日益深入地走入我们的生活,越来越成为人们获取信息的高效平台,ICP行业也顺势呈现出强劲的成长趋势,成为互联网迅猛发展形势下最大的受益者,也直接促 ...
- Bootstrap入门(二十七)JS插件4:标签页
Bootstrap入门(二十七)JS插件4:标签页 标签页的切换可以带动内容的变化 首先我们引入CSS文件 <link href="bootstrap.min.css" re ...
- Js获取复选框checkbox的值
var emps= $("input[name='emp']:checked"); var employee= ""; emps.each(function() ...