AJax技术

ajax简单封装

字号+ 作者:H5之家 来源:H5之家 2017-09-16 15:04 我要评论( )

1、封装ajax函数functionnativeAjax(option,success,error){//定义domain,方便环境切换vardomain=

1、封装ajax函数

function nativeAjax(option,success,error){ // 定义domain,方便环境切换 var domain='https://' + window.location.host + '/'; var url=domain+option.urlStr; var type=option.ajaxType; var data=option.ajaxData; var xhrRequest=null; if(window.XMLHttpRequest){ xhrRequest = new XMLHttpRequest(); } else { xhrRequest = new ActiveXObject('Microsoft.XMLHTTP') } var str=""; xhrRequest.open(type,url,true); if(type==="POST"&&data!=null){ xhrRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8"); for(var key in data){ str+='&'+key+'='+data[key]; }      str=str.slice(1); }else{      str=null; } xhrRequest.onreadystatechange=function(){ if(xhrRequest.readyState==4){ if(xhrRequest.status==200){ // 1.1、格式化返回的数据 var responseData=JSON.parse(xhrRequest.responseText); // 1.2、这里操作数据-------- success(responseData); }else{ // 1.3、没成功返回HTTP状态码 error(xhrRequest.status); } } } xhrRequest.send(str); }

2、ajax方法使用

//2.1 POST:定义请求参数 var postOption={ ajaxType:"POST", urlStr:"v2/html/broke/get_broke_ranked_info", ajaxData:{ "HTTP_USER_TOKEN":token, "HTTP_USER_UID":pfid, "anchor_pfid":anchor_pfid, "broke_pfid":pfid, "date":date } } // 调用AJAX nativeAjax(postOption,function(data){ // 请求成功回调 console.log(data); },function(error){ // 请求失败回调,返回HTTP状态码 console.log(error); }); //2.2 GET:定义请求参数 var getOption={ ajaxType:"GET", urlStr:"v2/html/broke/get_broke_ranked_info", ajaxData:null } Ajax(getOption,function(data){ // 成功函数 console.log(data); },function(error){ // 失败返回HTTP状态码 console.log(error); });

3、使用说明

// 一、option必须 option={ //1、ajaxType必须:"GET"或者"POST" ajaxType:"", //2、urlStr必须:"string类型" urlStr:"", //3、必须:POST时候为object{key:value},GET的时候直接为:null ajaxData:null } // 二、success请求成功回调必须 // 三:error请求失败回调必须

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • React.js通过 AJAX 加载初始数据

    React.js通过 AJAX 加载初始数据

    2017-09-17 08:02

  • 李炎恢教程/妙味课堂javaScript/jQuery/js/Ajax全套视频

    李炎恢教程/妙味课堂javaScript/jQuery/js/Ajax全套视频

    2017-09-16 13:00

  • ajax跨域异步单点登录

    ajax跨域异步单点登录

    2017-09-16 10:08

  • AJAX(XMLHttpRequest)进行跨域请求方法基础教程

    AJAX(XMLHttpRequest)进行跨域请求方法基础教程

    2017-09-15 18:00

网友点评