jquery框架的ajax方法固然好用，但是假如某天我们的项目不能引入jquery或项目需求很简单，没有很多交互功能，只需要ajax，这时引入jquery库会造成资源浪费，也会显得页面臃肿。这时我们就需要用原生JS写一个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插件(同域&&jsonp跨域)

抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

使用原生JS封装Ajax

使用原生 的JS封装 Ajax,实现 仿JQuery的Ajax,post,get三种异步请求方式: var MAjax = { //根据浏览器创建异步对象 createXhr: function () ...

原生js封装ajax：传json，str，excel文件上传表单提交

由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(u ...

原生js封装ajax,深入理解$.ajax()

直接上代码 //封装的ajax函数 // 传一个对象,所有要用的参数都在对象中 因为不写对象 实参列表个数太多,所以像jq一样,调用ajax也是把对象当实际参数传进去 // type 请求方式 默认g ...

原生js封装ajax代码

方法一:(类似jQuery的封装方法) 1.ajax函数封装: /* *author: Ivan *date: 2014.06.01 *参数说明: *opts: {'可选参数'} **method: ...

ajax 原生js封装ajax [转]

/* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 * @param {string}opt.url 发送请求的url * @ ...

原生JS封装ajax以及request

一.封装原生的xhr为ajax类 xhr以及用法见之前的文章 1.根据url确定请求的头部以及别的信息. var _headerConfig = {}; if(url.indexOf('getcapt ...

原生js封装Ajax

[转载请注明出处] 1 /** * @fileoverview ajax请求公用组件 * @author Limo * @date 2015/08/07 * Native package ajax m ...

原生js封装ajax，实现跨域请求

描述: 需要ajax跨域请求,用cors跨域方案.服务端设置: header('Access-Control-Allow-Origin: http://front.ls-la.me'); header ...

随机推荐

IOS 通过苹果开放API检测更新

#define APPID @"1067207206" -(void)onCheckVersion { NSDictionary *infoDic = [[NSBundle mai ...

[转]CodeSmith和PowerDesigner的使用安装和数据库创建

最近要忙期考,但还是决定每天抽点空来写CodeSmith的系列文章了,在此实在不敢用教程这个词语,毕竟自己对CodeSmith了解的也不是很多,有很多牛人都在博客园发布了不少关于CodeSmith的文 ...

java：打包

包名命名规范: 1.包名全部小写 2.包名一般情况下是域名的倒过来写+个性命名,如:tinyphp.com,就写成com.tinyphp+.xxx 打包方法 package + 包名 package ...

linux Page cache和buffer cache----- systemtap

http://shixm.iteye.com/blog/1724718 http://blog.csdn.net/dianhuiren/article/details/7543886

DX11 Without DirectX SDK--04 使用DirectX Tool Kit帮助开发

回到 DirectX11--使用Windows SDK来进行开发 DirectX Tool Kit下载 DirectX Tool Kit是一个包含许多类的集合,用于为公共Windows平台编写Dire ...

codeblock字体问题

有的时候在codeblock中打下划线,会显示空格, 这个时候可以修改一下字体 settings->editor->editor settings最上面的fonts框中选择choose,然 ...

Linux命令-用户及权限管理

一.权限管理linux系统中对文件权限的描述机制: u g od r w x r w x r - x (r读,w写,x执行)文件 所有者 所属组 其他人可以表示为二进制: 111 111 101也可以 ...

JS应用实例6：二级联动

本案例很常用,应用场景:注册页面填写籍贯,省市二级联动 总体思想:创建一个二维数组存入省市,获取选中的省份并比较,创建标签遍历添加 代码:

Source Insight里头文件注释和函数头的注释

1.将下述代码拷贝入一个文件,扩展名为em 2.打开BASE工程,添加本文件,并重新同步 3.添加hh_InsertFuncHeader的快捷键,即为函数头注释,光标需要放在函数名那一行,否则无效 4 ...