原生JS寫Ajax的請求函數


 已上傳至githubhttps://github.com/hajnalmin/ajaxJS.git  

  如果對你有幫助的話,就去給個星吧~么么噠~筆芯

 

ajax:一種請求數據的方式,不需要刷新整個頁面;
ajax的技術核心是 XMLHttpRequest 對象;
ajax 請求過程:創建 XMLHttpRequest 對象、連接服務器、發送請求、接收響應數據;

 

調試過程中需要搭建apache服務

 

HTML文件如下:(有詳細的注釋)

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>原生js的ajax</title>
 6 </head>
 7 <body>
 8 <!--
 9     原生js封裝ajax方法
10 
11 -->
12 
13 <script>
14     //1.處理get請求
15     function ajax(option){
16         //1.實例化ajax
17 
18         var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("microsoft.xmlhttp");
19 
20         //2.判斷請求方式是否為get
21         var isGET = /get/i.test(option.method);
22 
23 
24         //3. 將json數據轉換為字符串格式  屬性名=值&。。。
25         var data = "";
26         for(var i in option.data){
27             //4.將數據拼成字符串
28             data +=i+"="+ option.data[i]+"&";
29         }
30 
31         //5.將處理好的數據字符串替換原有的數據
32         option.data = data;
33 
34         //判斷是否是get方法,如果是檢查url中有沒有?然后再把data數據加到?后
35         if(isGET){
36             if(option.url.indexOf("?")<0){
37                 option.url+='?';
38             }
39             option.url+=+"&"+option.data;
40         }
41 
42         //6 判斷是否啟用緩存,如果不啟用緩存 添加時間
43         if(!option.cache){
44             //7向URL上補充時間
45             option.url+="&___="+new Date().getTime();
46         }
47         //打開連接
48         xhr.open(option.method,option.url,option.async);
49         //7.如果是post請求則設置請求頭
50         if(!isGET){
51             xhr.setRequestHeader('content-type','application/xml-form-urlencoded');
52         }
53 
54         //8.發送請求
55         xhr.send(option.data);
56         //9.ajax狀態改變時觸發函數
57         xhr.onreadystatechange = function(){
58             //判斷ajax是否加載完成
59             if(xhr.readyState == 4){
60                 //判斷頁面是否請求成功
61                 if(xhr.status == 200){
62                     option.success(xhr.responseText);
63                 }else{
64                     option.error(xhr.status)
65                 }
66             }
67 
68         }
69 
70     }
71 
72     ajax({
73         method:'get',
74         url:"01.php?name=Kitty",
75         async:true,
76         data:{age:12,sex:"girl"},
77         cache:true,
78         sendBefore:function(xhr){
79             console.log("loading···");
80         },
81         sendComplete:function(xhr){
82             console.log("loading完成");
83         },
84         success:function(txt){
85             console.log("請求成功,服務器返回數據為:"+txt);
86         },
87         error:function(status){
88             console.log("請求失敗狀態碼為:"+status);
89         }
90     });
91 
92 </script>
93 </body>
94 </html>

 

PHP文件如下:(僅做測試用

<?php
    
    echo 'get<pre>';
    print_r($_GET);
    
    echo 'post<pre>';
    print_r($_POST);
    

 

運行成功后的顯示:

 

注意:如果不是在Apache服務器下,會顯示以下信息

 

 

 

有什么問題歡迎交流溝通~大家一起學習~

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM