標籤：get請求 cat object async href example com out win
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Examples</title><meta name="description" content=""><meta name="keywords" content=""><link href="" type="text/css" rel="stylesheet"><script type="text/javascript">/* *AJAX方法封裝：2013年11月22日 *參數說明： *type//要求方法 *async//true表示非同步讀取檔案 *url//url路徑 *data//發送資料 *timeout//設定逾時時間 *contentType//寫入header頭，表示請求類型 *beforeSend//ajax請求之前調用方法，如果該函數返回false，將會阻止AJAX請求 *success//響應成功時調用方法(XHR.status===200) *complete//請求完成後回呼函數 (請求成功或失敗之後均調用)。 **/(function(){var httpRequest=(function(){ try{ /*****FF,Google等*****/ return function(){ return new XMLHttpRequest(); }; }catch(e){ try{ /*****IE某些版本*****/ return function(){ return new ActiveXObject("Msxml2.XMLHTTP"); }; }catch(e){ try{ /*****其他IE版本*****/ return function(){ return new ActiveXObject("Microsoft.XMLHTTP"); }; }catch(e){ return null; } } }})();/*暴露ajax方法*/window.ajax=function (param){//處理參數param.type=param.type || "GET";param.async=param.async || true;param.url=param.url || window.location.href;param.data=param.data || "";param.timeout=param.timeout || 10000;param.complete=param.complete || function(){};param.contentType=param.contentType || {"Content-type":"x-www-form-urlencoded"};//初始設定變數var textStatus="";var timer=null;//狀態函數var stateChangeFn=function(){/**readyState五個狀態0:未發送請求，1:已發送請求，2:已經握手，3:正在處理請求，4:請求處理完成*0：請求未初始化（還沒有調用 open()）。*1：請求已經建立，但是還沒有發送（還沒有調用 send()）。*2：請求已發送，正在處理中（通常現在可以從響應中擷取內容標題）。*3：請求在處理中；通常響應中已有部分資料可用了，但是伺服器還沒有完成響應的產生。*4：響應已完成；您可以擷取並使用伺服器的響應了。*/if(XHR.readyState===4){if(XHR.status===200){//響應成功param.success && param.success(XHR.responseText);textStatus="success";}else {textStatus=XHR.status;}clearTimeout(timer);param.complete(textStatus);}};if(httpRequest === null){//alert("你的瀏覽器不支援AJAX");param.complete("error");return false;}else {XHR=new httpRequest();}if(param.beforeSend && param.beforeSend()===false){return false;}//post請求if(param.type==="POST"){XHR.open("POST",param.url,param.type);for(var key in param.contentType){XHR.setRequestHeader(key,param.contentType[key]);}XHR.onreadystatechange=stateChangeFn;XHR.send(param.data);}//get請求else if (param.type==="GET"){XHR.open("GET",param.url+"?"+param.data,param.type); XHR.onreadystatechange=stateChangeFn; XHR.send(null);}//佈建要求到期時間，十秒逾時timer = setTimeout(function(){//AJAX請求十秒逾時XHR.abort();param.complete("timeout");}, param.timeout);}})();/************分割線************/window.onload=function(){ajax({type:"GET",async:true,//true表示非同步讀取檔案url:"ajax.txt",data:"a&b",//發送資料timeout:8000,//8秒逾時contentType:{//要求標頭資訊，只對POST請求有效"Content-type":"x-www-form-urlencoded"},beforeSend:function(){//ajax請求之前調用，如果該函數返回false，將會阻止AJAX請求document.getElementById("beforeSend").innerHTML="開始載入...."},success:function(msg){//響應成功時調用document.getElementById("success").innerHTML="返回結果："+msg;},complete:function(state){//請求完成後回呼函數 (請求成功或失敗之後均調用)。document.getElementById("complete").innerHTML="請求完成，狀態："+state;}});}</script></head><body><div id="beforeSend"></div><div id="success"></div><div id="complete"></div></body></html>
同目錄下建立ajax.txt檔案，用http訪問以上html檔案。
原生JS實現ajax
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
