原生JS写Ajax的请求函数功能

 更新时间:2017年12月22日 15:52:05   作者:默默的点滴   我要评论
本文给大家分享一个自己写的基于原生JS写Ajax的请求函数功能,需要的朋友可以参考下

一般我们写网页的时候,如果用到 Ajax 请求服务器,都是使用 JQuery 等已经封装好的库来调用,比较简单。

但是一般这些库的功能很多,引入了太多我们用不到的东西,如果我们需要写一个功能单一,简单的页面,完全用不到引用如此庞大的库文件。

我们可以简单实现一个自己的 Ajax 请求功能,具体的代码如下:

var ajax = {};
ajax.x = function () {
 if (typeof XMLHttpRequest !== 'undefined') {
 return new XMLHttpRequest();
 }
 var versions = [
 "MSXML2.XmlHttp.6.0",
 "MSXML2.XmlHttp.5.0",
 "MSXML2.XmlHttp.4.0",
 "MSXML2.XmlHttp.3.0",
 "MSXML2.XmlHttp.2.0",
 "Microsoft.XmlHttp"
 ];
 var xhr;
 for (var i = 0; i < versions.length; i++) {
 try {
 xhr = new ActiveXObject(versions[i]);
 break;
 } catch (e) {
 }
 }
 return xhr;
};
ajax.send = function (url, method, data, success,fail,async) {
 if (async === undefined) {
 async = true;
 }
 var x = ajax.x();
 x.open(method, url, async);
 x.onreadystatechange = function () {
 if (x.readyState == 4) {
 var status = x.status;
 if (status >= 200 && status < 300) {
 success && success(x.responseText,x.responseXML)
 } else {
 fail && fail(status);
 }
 }
 };
 if (method == 'POST') {
 x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
 }
 x.send(data)
};
ajax.get = function (url, data, callback, fail, async) {
 var query = [];
 for (var key in data) {
 query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
 }
 ajax.send(url + (query.length ? '?' + query.join('&') : ''), 'GET', null, callback, fail, async)
};
ajax.post = function (url, data, callback, fail, async) {
 var query = [];
 for (var key in data) {
 query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
 }
 ajax.send(url,'POST', query.join('&'), callback, fail, async)
};

使用方法: GET

ajax.get('/test.php', {foo: 'bar'}, function(response,xml) {
 //success
},
function(status){
 //fail
});
POST
ajax.post('/test.php', {foo: 'bar'}, function(response,xml) {
 //succcess
},function(status){
 //fail
});

这里需要注意一个问题,如果我们想要发送类似

var sendCmd = "?op_code=" + code + "&op_cmd=" + cmd;
ajax.post('/control' + sendCmd,'',function(response,xml) {
 console.log('success');
},
function(status){
 console.log('failed:' + status);
});

总结

以上所述是小编给大家介绍的原生JS写Ajax的请求函数功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家的支持!

相关文章

  • js中的闭包实例展示

    js中的闭包实例展示

    闭包是js中的一大特色,也是一大难点。下面这篇文章主要给大家介绍了关于js中闭包的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友们下面来一起看看吧
    2018-11-11
  • 完美实现仿QQ空间评论回复特效

    完美实现仿QQ空间评论回复特效

    这篇文章主要介绍了完美实现仿QQ空间评论回复特效,非常的实用,附上实例代码给大家,有需要的小伙伴参考下吧。
    2015-05-05
  • JS如何获取地址栏的参数实例讲解

    JS如何获取地址栏的参数实例讲解

    本篇文章给大家带来了关于JS如何获取地址栏的参数实例讲解,有需要的朋友们参考下。
    2018-10-10
  • JS实现求字符串中出现最多次数的字符和次数示例

    JS实现求字符串中出现最多次数的字符和次数示例

    这篇文章主要介绍了JS实现求字符串中出现最多次数的字符和次数,涉及javascript针对字符串的遍历、统计、计算等相关操作技巧,需要的朋友可以参考下
    2019-07-07
  • JS实现不规则TAB选项卡效果代码

    JS实现不规则TAB选项卡效果代码

    这篇文章主要介绍了JS实现不规则TAB选项卡效果代码,通过简单的JavaScript响应鼠标事件动态变换元素样式实现不规则选项卡效果,非常具有实用价值,需要的朋友可以参考下
    2015-09-09
  • javascript瀑布流布局实现方法详解

    javascript瀑布流布局实现方法详解

    这篇文章主要介绍了javascript瀑布流布局实现方法,结合实例形式较为详细的分析了JavaScript实现瀑布流布局的样式与具体功能代码,需要的朋友可以参考下
    2016-02-02
  • Javascript 错误处理的几种方法

    Javascript 错误处理的几种方法

    浏览器不会抛出Error类型的exception异常,所以如果捕获到Error类型的异常,可以确定这个异常是用户代码抛出的,不是浏览器抛出的。
    2009-06-06
  • js onmousewheel事件多次触发问题解决方法

    js onmousewheel事件多次触发问题解决方法

    做一个首屏和第二屏之间滚动鼠标滚轮就可以整平切换的效果,遇到了很多问题,下面是问题解决方法
    2014-10-10
  • JAVASCRIPT HashTable

    JAVASCRIPT HashTable

    JAVASCRIPT HashTable...
    2007-01-01
  • 浏览器复制插件zeroclipboard使用指南

    浏览器复制插件zeroclipboard使用指南

    ZeroClipboard 是国外大神开发的一个用于剪贴板复制的 JS 插件,它是基于 Flash 来实现跨浏览器的复制功能的。当我们使用 ZeroClipboard 的时候,它会悄悄隐藏一个小小的 Flash 影片(swf),不会对我们的用户界面造成影响。我们只需要借助它实现复制功能就行了。
    2016-03-03

最新评论