原生JS写Ajax的请求函数功能
一般我们写网页的时候,如果用到Ajax请求服务器,都是使用JQuery等已经封装好的库来调用,比较简单。
但是一般这些库的功能很多,引入了太多我们用不到的东西,如果我们需要写一个功能单一,简单的页面,完全用不到引用如此庞大的库文件。
我们可以简单实现一个自己的Ajax请求功能,具体的代码如下:
varajax={}; ajax.x=function(){ if(typeofXMLHttpRequest!=='undefined'){ returnnewXMLHttpRequest(); } varversions=[ "MSXML2.XmlHttp.6.0", "MSXML2.XmlHttp.5.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.2.0", "Microsoft.XmlHttp" ]; varxhr; for(vari=0;i=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){ varquery=[]; for(varkeyindata){ 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){ varquery=[]; for(varkeyindata){ 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 });
这里需要注意一个问题,如果我们想要发送类似
varsendCmd="?op_code="+code+"&op_cmd="+cmd; ajax.post('/control'+sendCmd,'',function(response,xml){ console.log('success'); }, function(status){ console.log('failed:'+status); });
总结
以上所述是小编给大家介绍的原生JS写Ajax的请求函数功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票的支持!