如何用原生js發送jsonp請求

//? ? 引入進去

<script>

function?ajax(options)?{

??options?=?options?||?{};

??options.type?=?(options.type?||?"GET").toUpperCase();

??options.dataType?=?options.dataType?||?'json';

??options.async?=?options.async?||?true;

??options.timeout=options.timeout||8000;//超時處理,默認8s

??var?params?=?getParams(options.data);

??var?timeoutFlag=null;

??var?xhr;

??var?that=this;

??if?(window.XMLHttpRequest)?{

??????xhr?=?new?XMLHttpRequest();

??}?else?{

??????xhr?=?new?ActiveXObject('Microsoft.XMLHTTP')

??}

??xhr.onreadystatechange?=?function()?{

??????if(options.dataType?===?'json'){

??????????if?(xhr.readyState?==?4)?{

??????????????window.clearTimeout(that.timeoutFlag);

??????????????var?status?=?xhr.status;

??????????????if?(status?>=?200?&&?status?<?300)?{

??????????????????//?如果需要像?html?表單那樣?POST?數據,請使用?setRequestHeader()?來添加?http?頭。

??????????????????options.success?&&?options.success(xhr.responseText,?xhr.responseXML);

??????????????}?else?{

??????????????????options.fail?&&?options.fail(status);

??????????????}

??????????}

??????}?else?{

??????????if?(xmlHttp.readyState?==?4?&&?xmlHttp.status?==?200)?{

??????????????window.clearTimeout(that.timeoutFlag);

??????????????var?oScript?=?document.createElement('script');

??????????????document.body.appendChild(oScript);

??????????????var?callbackname?=?'ajaxCallBack'

??????????????oScript.src?=?options.url?+?"?"?+??params+'&callback='+callbackname;

??????????????window['ajaxCallBack']?=?function(data)?{

??????????????????options.success(data);

??????????????????document.body.removeChild(oScript);

??????????????};

??????????}

??????}

??};

??if?(options.type?==?'GET')?{

??????xhr.open("GET",?options.url?+?'?'?+?params,?options.async);

??????xhr.send(null)

??}?else?if?(options.type?==?'POST')?{

??????xhr.open('POST',?options.url,?options.async);

??????if(options.contentType=="undefined"||options.contentType==null){

??????????xhr.setRequestHeader('Content-Type',?'application/x-www-form-urlencoded');

??????????xhr.send(params);

??????}else{

??????????xhr.setRequestHeader('Content-Type',?options.contentType);

??????????xhr.send(JSON.stringify(options.data));

??????}

??}

??this.timeoutFlag=window.setTimeout(function(){//計時器,超時后處理

??????window.clearTimeout(that.timeoutFlag);

??????//options.fail("timeout");

??????xhr.abort();

??}.bind(this),options.timeout);

}

function?getParams(data)?{

??var?arr?=?[];

??for?(var?param?in?data)?{

??????arr.push(encodeURIComponent(param)?+?'='?+?encodeURIComponent(data[param]));

??}

??return?arr.join('&');

}

</script>

//? ? 使用

<script>

ajax({

????url:?"https://xxx.xxx.xxx.xxx/router/rest",?//請求地址

????type:?'GET',?//請求方式

????async:true,//同步異步設置

????timeout:8000,//超時設置

????data:?{

??????userName:$("#username").val(),

????phoneNumber:$("#userphone").val(),

????orderType:'8',

????requirementDetail:'',

????method:'homedecapi.decOrder.insertDecOrder',

????orderSource:'無憂居官網PC'

????},?//請求參數

????success:?function(response,?xml)?{

????????if(JSON.parse(response).decOrder_insertDecOrder_response){

??????????//?alert("預約成功")

??????????$("#mypopup").css('display','block')

????????}else{

??????????alert("預約失敗")

????????}

????},

????fail:?function(status)?{

????????console.log('狀態碼為'?+?status);?//?此處為請求失敗后的回調

????}

});

</script>

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。