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

前端之家收集整理的这篇文章主要介绍了原生JS写Ajax的请求函数功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

= 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,callback,async) { var query = []; for (var key in data) { query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key])); } ajax.send(url + (query.length ? '?' + query.join('&') : ''),'GET',null,async) }; ajax.post = function (url,async) { var query = []; for (var key in data) { query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key])); } ajax.send(url,'POST',query.join('&'),async) };

使用方法: GET

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

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

Failed:' + status); });

总结

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

原文链接:https://www.f2er.com/ajax/34542.html

猜你在找的Ajax相关文章