js進階ajax函數封裝（匿名函數做爲參數傳遞）（封裝函數引入文件的方式很是好用）

時間 2019-11-18

標籤進階 ajax 函數封裝匿名做爲參數傳遞引入文件方式很是好用欄目 JavaScript 简体版

原文原文鏈接

js進階ajax函數封裝（匿名函數做爲參數傳遞）（封裝函數引入文件的方式很是好用）

1、總結

二、匿名函數做爲參數傳遞

2、js進階ajax函數封裝

ajax1.jsjavascript

 1 function ajax(url,funSucc,fnFaild){ //一、以函數做爲函數的參數傳進來  2 
 3     var xhr=new XMLHttpRequest();
 4 
 5     xhr.open('GET',url,true);
 6 
 7     xhr.send(null);
 8 
 9     xhr.onreadystatechange=function(){
10 
11         if (xhr.readyState==4) {
12 
13             if (xhr.status==200) {
14 
15                 funSucc(xhr.responseText) //二、使用傳進來的函數 16 
17 
18             }else{
19                 if (fnFaild){
20                      fnFaild(xhr.statusText)
21                 }
22 
23             }
24         }
25     }
26 
27 }

html測試代碼css

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>ajax01</title>
 6     <style type="text/css">
 7         div{
 8           background: green;
 9           width: 300px;
10           height: 200px;
11         }
12     </style>
13     <script type="text/javascript" src="ajax1.js"></script>  //一、引入js
14 </head>
15 <body>
16     <input type="button" id="btn" value="測試按鈕">
17     <div id="div1"></div>
18     <script>
19     var btn=document.getElementById('btn');
20     var div1=document.getElementById('div1');
21     btn.onclick=function (){
22         ajax('test1.txt',function(str){ //二、匿名函數做爲參數傳過去 23             div1.innerHTML=str
24         },function(s){
25             alert(s)
26         })
27     }
28     </script>
29 </body>
30 </html>