XMLHttpRequest 學習（二）——封裝一個ajax

時間 2019-11-10

原文原文鏈接

一、發起一個HTTP的步驟：php

建立一個 XMLHttpRquest 實例，

1 var xhr=new XMLHttpRequest();

　　2.初始化請求，html

1 xhr.open(method,URL,async);

　　3.設置請求頭信息，按需設置，不須要設置就到下一步，用 POST 方法時，必須將請求頭設置爲：ajax

1 xhr.setRequestHeader("Content-Type","appivation/x-www=form-unurlencoded");//在POST和PUT請求須要設置該信息

　　4.綁定相關事件，異步請求中，readystatechange 必須班綁定，其餘事件按需綁定app

 1         //第四步 設置回調函數和xhr事件,在異步請求中必須綁定onreadystatechage事件，readyState改變就觸發
 2         xhr.onreadystatechange=callback;//綁定一個函數
 3         //或者用匿名函數
 4         xhr.onreadystatechange=function (){
 5             if(xhr.readyState ==4 ){
 6                 if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
 7                     //響應信息返回後處理，在頁面提示用戶
 8                 }
 9                 else{//返回消息失敗
10                     alert("響應失敗！");
11                 }
12             }
13             else{//請求未發送的處理
14                 alert("請求未完成！")
15             }
16         }
17         //send()調用後開始觸發
18         xhr.onloadstart=loadState;
19         
20         //文件上傳可能須要設置這些事件
21         //上傳文件開始
22         xhr.upload.onloadstart=uploadStart;
23         //顯示上傳進度
24         xhr.upload.onprogress=uploadProgress;
25         //上傳完成，成功
26             //出現異常或者用戶取消，激發abort、timeout、error事件，觸發loadend事件
27             xhr.onabort=abort;
28             xhr.ontimeout=timeeout;
29             xhr.onerror=error;
30         xhr.upload.onload=upload;
31         //上傳結束，可能不成功
32         xhr.upload.onloadend=uploadEnd;
33         
34         //顯示下載進度
35         xhr.onprogress=loadProgress;
36         //出現異常或者用戶取消，激發abort、timeout、error事件，觸發loadend事件
37         xhr.onabort=abort;
38         xhr.ontimeout=timeeout;
39         xhr.onerror=error;
40         //下載完成，可能不成功
41         xhr.onloadend=loadEnd;

5.發送，在POST須要傳遞參數，最後將參數轉碼。dom

//第五步 發送請求,在POST請求中須要給send傳遞參數
        xh.send();

下面就根據上面的步驟，創建一個get請求：異步

HTML:async

 1 <div>
 2         <form >
 3             <fieldset>
 4                 <legend> xhr提交表單 </legend>
 5                 <lable>姓名：</lable>
 6                 <input type="text" id="name" name="name" value="周其軍" placeholder="請輸入您的姓名" />
 7                 <br>
 8                 <lable>郵箱：</lable>
 9                 <input type="email" placeholder="請輸入郵箱" id="email" name="email" />
10                 <br/>
11                 <input type="button" id="button" value="提交" /> </fieldset>
12         </form>
13     </div>
14     <div id="userInfor">
15              <!--在這顯示返回的內容-->
16     </div>

JS:函數

 1 window.onload=function(){ 
 2 var button=document.getElementById("button"); //獲取button
 3     var userInfor=document.getElementById("userInfor");
 4     button.addEventListener("click",function(){
 5         var url="demo.php";
 6         var name=document.getElementById("name").value;
 7         var email=document.getElementById("email").value;
 8         //alert(name+email);
 9         url+="?name="+name+"&email="+email;
10         var xhr=new XMLHttpRequest();
11         /*xhr.setRequestHeader("jack","hahah");*/
12         xhr.open("GET",url,true);//初始化一個異步請求
13         xhr.onreadystatechange=function(){
14             if(xhr.readyState==4){
15                 if(xhr.status==200){
16                     //將用戶填寫的信息顯示出來
17                     alert(xhr.response);
18                 }
19                 /*else{
20                     alert("響應不成")
21                 }*/
22             }
23             /*else{
24                 alert("請求未發送！");
25             }*/
26         }
27         xhr.send();
28     });

PHP:post

1 <?php
2  header("Content-type: text/html; charset=utf-8"); 
3 echo "<h2>名字：{$_REQUEST['name']}</h2>
4        <span>郵箱：{$_REQUEST['email']}</span>";    
5 
6 ?>

請求成功了，可是我想返回 html 片斷，而後追加到 id=userInfor 的 div 裏面，不知道怎麼弄。也沒搜索的可靠的作法。也是是個人 PHP 不對？？url

二、封裝一個 ajax

 1         var ajax = {}; //封裝一個ajax
 2         ajax.x = function () { //定義x,用於建立xhr。
 3             if (typeof XMLHttpRequest !== 'undefined') {
 4                 return new XMLHttpRequest();
 5             }
 6             var versions = [
 7         "MSXML2.XmlHttp.6.0"
 8         , "MSXML2.XmlHttp.5.0"
 9         , "MSXML2.XmlHttp.4.0"
10         , "MSXML2.XmlHttp.3.0"
11         , "MSXML2.XmlHttp.2.0"
12         , "Microsoft.XmlHttp"
13     ];
14             var xhr;
15             for (var i = 0; i < versions.length; i++) {
16                 try {
17                     xhr = new ActiveXObject(versions[i]);
18                     break;
19                 }
20                 catch (e) {}
21             }
22             return xhr;
23         };
24         //定義 send()
25         ajax.send = function (url, callback, method, data, async) {
26             if (async === undefined) {
27                 async = true;
28             }
29             var x = ajax.x();
30             x.open(method, url, async);
31             x.onreadystatechange = function () {
32                 if (x.readyState == 4) {
33                     callback(x.responseText)
34                 }
35             };
36             if (method == 'POST') {
37                 x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
38             }
39             x.send(data)
40         };
41         //定義 get 請求
42         ajax.get = function (url, data, callback, async) {
43             var query = [];
44             for (var key in data) {
45                 query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
46             }
47             ajax.send(url + (query.length ? '?' + query.join('&') : ''), callback, 'GET', null, async)
48         };
49         //定義 post 請求
50         ajax.post = function (url, data, callback, async) {
51             var query = [];
52             for (var key in data) {
53                 query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
54             }
55             ajax.send(url, callback, 'POST', query.join('&'), async)
56         };

調用 ajax 的方法：

 1 var button = document.getElementById("button");
 2         button.addEventListener("click", function () {
 3             var name = document.getElementById("name").value;
 4             var email = document.getElementById("email").value;
 5             var userInfor = document.getElementById("userInfor");
 6             ajax.get("demo1.php?rand=" + Math.random(), {
 7                 name: name
 8                 , email: email
 9             }, function () {
10                 var xhr = ajax.x();
11                 //alert("aa");
12                 //alert(xhr.responseText);請求響應了，卻沒彈出 響應信息
13                 userInfor.append(xhr.responseText);
14             });
15         });