前端筆記之伺服器&Ajax（中）MySQL基礎操作&PHP運算元據庫&Ajax

一、資料庫基礎

1.1什麼是資料庫？

什麼是資料庫？

答：就是一個很大的一個檔案，只不過這個檔案可以通過一些‘命令’運算元據；

    增、刪、改、查資料；

 

資料庫等於持久資料和資料操作的一個統稱。

資料庫是按照資料結構來組織、儲存及管理資料的倉庫。

資料庫有哪些？ MySQL、SQL server、Oracle 都是關係型資料管理系統（RDBMS）。

SQL儲存資料相對較小，最為常用的資料庫就是MySQL（開源、免費）

Orecal大型資料庫（不開源、收錢）

NOSQL

Mongodb

運算元據庫也有自己的語言，這個語言叫結構化查詢語言。結構化查詢語言(Structured Query Language)簡稱SQL。用於存取資料以及查詢、更新和管理關聯式資料庫系統；同時也是資料庫指令碼檔案的副檔名。

---

 

1.2 MySQL 的操作

因為安裝了PHPnow。所以每一個同學的計算機中都有資料庫。

想運算元據庫可以通過php操作，也可以通過視覺化的資料庫管理軟體操作。

我們用的視覺化的資料庫管理軟體是Sqlyog。

SQLyog 是一個快速而簡潔的圖形化管理MYSQL資料庫的工具，它能夠在任何地點有效地管理你的資料庫，由業界著名的Webyog公司出品。

資料庫的結構層次組成：資料庫 > 表 > 欄位（條目），每個資料庫的表中必須有一個主鍵。

	1、連線資料庫，輸入使用者名稱和密碼 使用者的密碼就是你安裝PHPNOW的時候，也安裝mySQL，密碼123456
	2、認識sqlYog的圖形介面
	3、建立自己的資料庫
	4、建立資料庫名字和設定字符集
	5、點選資料庫的“+”，你會發現資料庫當中有表，在資料庫中建立表。
	6、需要設定表名字（gz0920）；設定字符集（UTF8） 其餘的設定都為預設
	給（gz0920）表新增欄位； 注意：①int代表的是整數  varchar字串       ②一個表當中主鍵只能有一個非空自增
	資料庫表的欄位

 

---

1.3 SQL語言運算元據庫

資料庫增刪改查操作（CRUD）

C 增加（create）

R 查詢（read）

U 更改（update）

D 刪除（delete）

sql可以通過後臺語言（PHP、JSP、aps.net）執行運算元據庫。SQL 語句對大小寫不敏感

sql語句手冊：http://www.w3school.com.cn/sql/sql_and_or.asp

---

 

●查詢

 SELECT 欄位 FROM 表名

 

 SELECT * FROM banji0922

 

 

 SELECT * FROM banji0922 WHERE sex="男"

 

 

 SELECT * FROM banji0922 WHERE xingbie = "男" AND nianling > 60 ;

 

 

 SELECT * FROM banji0922 WHERE xingbie = "男" ORDER BY nianling DESC;

 

DESC是降序；ASC 是升序

 

 

SELECT  欄位 FROM  表名

SELECT xingming FROM gz1125 

 

提示：查詢與語句SELECT  *  FROM gz1125 單詞一般都是大寫，後面新增的是表名稱，因為表中才有資料。

 

---

 

●增加

INSERT INTO語句插入條目：

 INSERT INTO 表名稱 VALUES (值1, 值2,....)

 

我們也可以指定所要插入資料的列：

 INSERT INTO table_name (列1, 列2,...) VALUES (值1, 值2,....)

 

 INSERT INTO  banji0922 VALUE(11,"王安石",99,"男","6543432534");

 

 

不想插入所有的條目，必須羅列響應的欄位：

 INSERT INTO banji0922 (xingming,qqhao) VALUE ("李大釗","3465342");

 

 

下面的是錯誤演示：

 INSERT INTO banji0922  VALUE ("李大釗","3465342");

 

---

 

●更改

語法：

SET   表示設定

WHERE 表示條件

 UPDATE 表名稱 SET 列名稱 = 新值 WHERE 列名稱 = 某值

 

更改多個條目，用逗號隔開：

 UPDATE 表名稱 SET 列名稱 = 新值,列名稱 = 新值 WHERE 列名稱 = 某值

 

 UPDATE banji0922 SET nianling = 200 WHERE xingming = "李大釗";

 

 

 UPDATE banji0922 SET xingbie = "男" WHERE nianling > 20;

 

---

 

●刪除

DELETE FROM 表名稱 WHERE 列名稱 = 值

DELETE FROM banji0922 WHERE xingming = "李大釗";

 

刪除整個表：

 DELETE FROM banji0922;

 

---

●WHERE條件

 

●備份資料庫

 

恢復資料：將我們生產的sql檔案拖拽到資料庫中，點選執行多條sql語句按鈕，再重新整理資料庫列表。

 SELECT * FROM banji0922

 SELECT * FROM banji0922 WHERE xingbie = "女"

 INSERT INTO banji0922 ( xingming,nianling)VALUE ("王羲之",300)

 UPDATE banji0922 SET nianling = 30  WHERE  xingming = "王羲之"

 DELETE FROM banji0922 WHERE xingming = "王羲之";

 

---

二、PHP運算元據庫

概述：對於後臺而已，經常做的一件事情就是儲存資料，運算元據庫，PHP屬於後端語言，因此也有運算元據庫的方法。

<?php
    // 連線資料庫 引數  ： 地址 、 使用者名稱 、 密碼
    mysql_connect("localhost","root",123456);
    // 選擇操作哪個資料庫
    mysql_select_db("student");
    // 設定編碼
    mysql_query("SET NAMES UTF8");
    // 寫執行的sql語句，快捷鍵  ctrl+k+u
    $sql = "INSERT INTO banji0922 VALUE (13,'海子',20,'男','123465454')";
    // 執行sql語句
    mysql_query($sql);
?>

 

 要從資料庫中所有的條目顯示到頁面上：

<meta charset="UTF-8" />
<?php
    // 連線資料庫 引數  ： 地址 、 使用者名稱 、 密碼
    mysql_connect("localhost","root",123456);
    // 選擇哪個資料庫
    mysql_select_db("student");
    // 識別中文字元
    mysql_query("SET NAMES UTF8");
    // 寫執行的sql語句
    // 快捷鍵  ctrl+k+u
    $sql = "SELECT * FROM banji0922";
    // 執行sql
    $result = mysql_query($sql);
    // 把$result類陣列物件變成陣列
    $row = mysql_fetch_array($result);
    // 輸出
    print_r($row);
?>

Array ( [0] => 1 [id] => 1 [1] => 諸葛亮 [xingming] => 諸葛亮 [2] => 80 [nianling] => 80 [3] => 男 [xingbie] => 男 [4] => 23456789 [qqhao] => 23456789 )

print_r後只顯示資料庫中第一條資訊。

 

查詢資料庫：

<?php
    // 連線資料庫 引數  ： 地址 、 使用者名稱 、 密碼
    mysql_connect("localhost","root",123456);
    // 選擇哪個資料庫
    mysql_select_db("student");
    // 識別中文字元
    mysql_query("SET NAMES UTF8");
    // 寫執行的sql語句
    // 快捷鍵  ctrl+k+u
    $sql = "SELECT * FROM banji0922";
    // 執行sql
    $result = mysql_query($sql);
    // 把$result類陣列物件變成陣列
    $row = mysql_fetch_array($result);
    // 輸出
    print_r($row);
    // 把$result類陣列物件變成陣列
    $row = mysql_fetch_array($result);
    // 輸出
    print_r($row);
   ……………………
?>

 

<?php
   mysql_connect("localhost","root",123456);
   mysql_select_db("student");
   mysql_query("SET NAMES UTF8");
   //資料庫返回的資料(物件)
   $result = mysql_query("SELECT * FROM gz0920");
   //將結果轉換為陣列
   while ($array = mysql_fetch_array($result)) {
       print_r($array["xingming"]);
       echo "<br/>";
   }
?>

提示：

①資料庫返回的結果是一個物件，因此需要用mysql_fetch_array($result)變為陣列；

②遍歷資料取到你想要的資料

---

 

三、複習

概述：對於客戶端而言，當在位址列輸入網址回車的時候，會向伺服器發起一個上行請求（GET、POST），網頁中幾乎90%都是GET請求，登入、註冊...可以用POST，它兩者不同的地址：

l GET請求是以偽裝URL的形式（?k=v&k=v）向伺服器傳遞一些額外資料；

l POST請求是以報文體的形式向伺服器傳遞資料

 

報文：報文頭（客戶端的瀏覽器的資訊）+ 報文體（一般為空）

 

get：一般用於資訊的獲取使用url傳遞引數。對所送的資料有位元組數限制。（本質上：以少換多）。Get請求是向伺服器獲取訊息。

post：一般用於儲存或修改伺服器上的額資源的。對所傳送的資料沒有位元組限制。Post請求所有都是通過form表單形式提交的。Post請求可以看成向伺服器推送訊息。（資訊量大，換回來的少）

 

一個完整的URL包括哪些部分：

http://www.baidu.com:8080/news/2017-12-09/index.php?newsid=344532&pagenum=12#name

l http:// 協議部分

l www.baidu.com  域名

l :8080   埠

l /news/2017-12-09/    虛擬目錄，從域名的第一個“/”到最後一個“/”

l index.php    檔名

l ?newsid=344532&pagenum=12  引數部分 從？開始到“#”之前結束

l #name  從#開始到最後，hash

---

四、Ajax開發

4.1 Ajax介紹

Ajax 即“Asynchronous Javascript And XML”（非同步 JavaScript 和 XML），是指一種建立互動式網頁應用的網頁開發技術。

 Ajax = 非同步 JavaScript 和 XML（標準通用標記語言的子集）。

 Ajax 是一種用於建立快速動態網頁的技術。

 Ajax 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。

通過在後臺與伺服器進行少量資料交換，Ajax 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

傳統的網頁（不使用 Ajax）如果需要更新內容，必須過載整個網頁頁面。

 

 到底什麼是Ajax？

它不是一個技術（多門技術的集合），它可以“悄悄的”向伺服器請求資料，伺服器也可以“悄悄的”向客戶端響應返回資料，最終實現整個頁面沒有重新載入，而實現頁面中區域性重新整理資料。

2005 年初，許多事件使得 Ajax 被大眾所接受。Google 在它著名的互動應用程式中使用了非同步通訊，如Google、Google 地圖、Google搜尋應用了Ajax技術。

 

---

4.2 Ajax效果

概述：對現在的開發人員而言，“遍地”都是Ajax

 

例如163郵箱的註冊，當你在郵箱地址文字輸入框當中輸入完手機號之後，客戶端會向伺服器“悄悄”的傳遞資料，伺服器也會‘悄悄的’響應，給你返回資料；整體的網頁沒有更新的情況下，實現區域性重新整理資料；例如微博的點贊等......

 

---

4.3 Asynchronous和synchronous

概述：耗時間相對長一些的語句，我們稱之為“非同步語句”：Ajax、setInterval()、setTimeout()、animate()、Nodejs都是非同步語句。非同步語句耗時都比較長，所以會先執行後面同步的語句（如果先執行非同步語句，程式就被阻塞了）。

經驗：只要有回撥函式的都是非同步語句。

 

遇到非同步語句，會先放一邊，執行後面同步的語句，回頭再執行自己

var f = 0;
setInterval(function(){
   f++
   console.log(f);
},1000)
console.log("哈哈");

 

同步語句一般耗時不長，依次從上往下的順序執行

for(var i = 0; i < 10; i++){
   console.log(i)
}
console.log("哈哈");

---

4.4程式和執行緒

概述：什麼是程式，一個應用就是一個程式。

 

什麼是執行緒？執行緒就是程式的基本單位，也就說，程式是由多個執行緒組成的（主執行緒），JS是單執行緒。

---

4.5 jQuery的Ajax

jQuery的get請求語法：

$.get(url, [data], [callback], [type])

 

案例：當單擊按鈕的時候，將伺服器中的資料顯示到標籤中，並且不重新整理頁面：

$("button").click(function(){
    //發起一個GET請求
    $.get("data/result.txt", function(data){
        $("p").html(data)
    })
});
//用定時器證明這個頁面沒有重新載入
var i = 0;
setInterval(function(){
    i++;
    $("h1").html(i)
},100)

注意：

 所有的檔案都必須在伺服器中。

 必須是http請求過來的。

請求的頁面若不是通過http開啟的，會報錯，這個報錯就是著名的跨域報錯。

 

 jQuery中的$.get，幫我們做了什麼事情？

傳送了http請求，請求介面中的資料。然後伺服器收到http請求，開始執行http響應，txt中的內容在http的報文體中攜帶到瀏覽器中。被$.get的回撥函式接收。回撥函式的data就是http響應的報文體中的引數。

---

4.5.1 Ajax實現註冊功能

註冊業務：客戶端會向伺服器傳遞一些資料，伺服器會儲存這個資料，如果使用者名稱已經被註冊了，提示該使用者名稱已經被註冊。

注意：別忘記建立資料庫

 

前端html：

<body>
    <p>賬戶：<input type="text" id="user" /><b class="info"></b></p>
    <p>密碼：<input type="password" id="pwd" /></p>
    <button>註冊</button>
</body>
<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
    $("button").click(function(){
        $.post("php/reg.php", {
            "name": $('#user').val(),
            "password": $('#pwd').val()
        }, function(data){
            if(data == 1){
                alert("註冊成功");
            }else{
                alert("註冊失敗");
            }
        })
    });

    //文字框輸入內容時，實時查詢使用者名稱是否存在
    $("#user").on('input',function(){
        $.get("php/search.php?name=" + $(this).val(), function(data){
            if(data == 1){
                $('.info').css('color','green').html("恭喜你可以註冊");
            }else{
                $('.info').css('color','red').html("使用者名稱已被註冊");
            }
        })
    })

    //失去焦點隱藏info
    $('#user').blur(function(){
        $('.info').hide()
    })
</script>

 

reg.php註冊：

<?php
    //獲取前端傳過來的資料
    $name = $_POST["name"];
    $password = $_POST["password"];

    //連線資料庫，引數：資料庫地址、使用者名稱、密碼
    mysql_connect('localhost', 'root', '123456');
    //選擇要操作的資料庫
    mysql_select_db("student");
    //設定編碼
    mysql_query("SET NAMES utf8");
    //寫執行插入的SQL語句，儲存到資料庫的表中
    $sql = "INSERT INTO stuuser (name, password) VALUES ('$name','$password')";
    //執行SQL語句，會返回成功插入的結果（條數）
    $result = mysql_query($sql);

    if($result){
        echo 1; //插入成功返回1給前端
    }else{
        echo 0; //插入失敗返回0給前端
    }

?>

 

search.php查詢資料庫：

<?php
    //獲取前端傳過來的資料
    $name = $_GET["name"];

    //連線資料庫，引數：資料庫地址、使用者名稱、密碼
    mysql_connect('localhost', 'root', '123456');
    //選擇要操作的資料庫
    mysql_select_db("student");
    //設定編碼
    mysql_query("SET NAMES utf8");
    //寫執行插入的SQL語句，儲存到資料庫的表中
    $sql = "SELECT * FROM stuuser WHERE name='$name'";
    //執行SQL語句，會返回成功查詢的結果
    $result = mysql_query($sql);
    //查詢資料庫條目的個數，並返回
    $count = mysql_num_rows($result);

    //給前端返回一個結果：能不能註冊
    if($count == 0){
        echo 1; //如果資料庫不存在，返回1給客戶端驗證
    }else{
        echo 0;
    }
?>

---

4.5.2 jQuery的get請求方法

語法：

$.get(url, [data], [callback], [type])

 

 jQuery的get請求語法：有兩種方法傳遞資料，但最終引數都是以query string的方式傳遞給服務端

示例1：
$.get("介面地址?k=v&k=v",function(data){

});
示例2：
$.get("介面地址",{k:v, k:v},function(data){

});

---

4.5.3jQuery的post請求方法

 

jQuery的 post請求的語法：引數依然是以報文體的形式傳遞到伺服器中

$.post(url, [data], [callback], [type])

---

4.5.4 $.ajax()方法

$.ajax()方法有以下常用引數：

 url： 要求為string型別的引數，（預設為當前頁面地址）傳送請求地址。

 type：要求為string型別的引數，請求方式（get或post），預設為get。

 data：要求為object或string型別的引數，傳送到服務端的資料

 success：請求成功的回撥函式

 dataType：伺服器返回資料的型別，例如：xml、string、html、json等

 error：請求失敗後的回撥函式

 complete：請求成功或失敗的都會執行的回撥函式

---

五、原生JavaScript的Ajax

5.1原生Ajax發起HTTP請求

XMLHttpRequest()物件手冊：

http://www.w3school.com.cn/xmldom/dom_http.asp

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

概述：原生Ajax要使用JavaScript的內建建構函式。

所有現代瀏覽器（IE7+、Firefox、Chrome、Safari、Opera）都支援XMLHttpRequest()物件。

var xhr = new XMLHttpRequest();

字面上意思：即“XML”通過HTTP傳送請求，這個函式的例項有能力傳送非同步的HTTP請求。

 

老版本的IE5和IE6不支援XMLHttpRequest()，要使用 ActiveXObject()物件：

var xhr = ActiveXObject("msxml2.0.XMLHTTP");

var h1 = document.getElementsByTagName('h1')[0];
var btn = document.getElementsByTagName('button')[0];
btn.onclick = function(){
   //進行能力檢測，初始化xhr物件
   if(window.XMLHttpRequest){
       //高階瀏覽器版本的寫法
       var xhr = new XMLHttpRequest();
   }else{
       //低版本IE相容寫法
       var xhr = ActiveXObject("msxml2.0.XMLHTTP");
   }
   //引數1：請求方式
   //引數2：請求地址
   //引數3：是否非同步，true非同步，false同步
   //但是，請求沒有真正的傳送，僅僅只是配置了開啟的傳送“視窗”。
   xhr.open("get", "data/result.txt", true);
   //因為原生Ajax不是jQuery，jQuery中ajax有回撥函式能獲取資料，但原生沒有回撥函式
   //只能監聽事件（監聽服務端返回的資料）
   xhr.onreadystatechange = function () {
       console.log(xhr)
       //判斷就緒狀態(0~4)是否等於4，如果是HTTP響應以及完全接收
       if(xhr.readyState == 4 && xhr.status == 200 ||  xhr.status == 304){
           h1.innerHTML = xhr.responseText; //接收服務端返回的資料
       }
   }
   //最後傳送請求
   xhr.send(null); //報文體：get請求偽裝url地址報文體為空，如果是post請求就需要傳引數
}

屬性	readyState(就緒狀態) status(狀態碼) responseText（資料）
方法	open(method,url,asyn)   send()
監聽事件	onreadystatechange

 

配置傳送請求：

xhr.open("get","data/result.txt", true);

引數1：請求方式

引數2：訪問資料的介面地址

引數3：是否非同步，true非同步，false同步

但是，請求沒有真正的傳送，僅僅只是配置了開啟的傳送“視窗”。

此時xhr.send()方法發出請求，send的引數是請求的報文體，get請求不需要報文體，所以就是空。

post請求中有引數就在send()中傳遞。

 

JS原生Ajax沒有提供回撥函式，表示伺服器的資料回來沒有，此時需要一個監聽事件，是就緒狀態改變事件：

當就緒狀態發生變化時觸發，onreadystatechange事件：

xhr.onreadystatechange = function(){
      console.log(xhr.readyState)
}

 

就緒狀態的變化：

0：請求未初始化（還沒呼叫opend()方法）

1：請求引數已經準備，尚未傳送請求（呼叫open，還沒呼叫send）

2：請求已傳送，尚未接收響應，正在處理中（呼叫open，和send方法，通常現在可以從響應獲取報文頭）

3：正在解析響應內容，資料已經回來一部分（不是完整的）現在可以從響應中獲取報文頭和一部分報文體

4：響應內容解析完成，資料全部回來了，可以在客戶端使用了

---

 

5.2處理原生Ajax相容方法

處理相容有兩種方法：

處理相容有兩種方法：
if ...else判斷
try...catch

if(window.XMLHttpRequest){
    //高階瀏覽器版本的寫法
    var xhr = new XMLHttpRequest();
}else{
    //低版本IE相容寫法
    var xhr = ActiveXObject("msxml2.0.XMLHTTP");
}

當try裡面的程式碼沒有錯誤就執行try，try裡面有錯誤就執行catch

try {
    var xhr = new XMLHttpRequest();
}
catch(err) {
    var xhr = ActiveXObject("msxml2.0.XMLHTTP");
}

---

5.3 HTTP Status Code

參考：

http://blog.csdn.net/dufufd/article/details/53112184

http://www.runoob.com/http/http-status-codes.html

常見的狀態碼:
HTTP: Status 200 – 伺服器成功返回網頁
HTTP: Status 304 - 所請求的資源未修改，伺服器返回此狀態碼時，不會返回任何資源
HTTP: Status 404 – 請求的網頁不存在
HTTP: Status 503 – 服務不可用
HTTP: Status 1xx (臨時響應)->表示臨時響應並需要請求者繼續執行操作的狀態程式碼。
HTTP Status 2xx (成功)->表示成功處理了請求的狀態程式碼;
HTTP Status 4xx (請求錯誤)->這些狀態程式碼表示請求可能出錯，妨礙了伺服器的處理。
HTTP Status 5xx （伺服器錯誤）->這些狀態程式碼表示伺服器在嘗試處理請求時發生內部錯誤。這些錯誤可能是伺服器本身的錯誤，而不是請求出錯

if(xhr.readyState == 4 && xhr.status == 200 ||  xhr.status == 304){

}

---

5.4 Ajax快取問題

概述：瀏覽器是有快取機制的，你會發現訪問過一些網頁，再次訪問的時候會快很多，因為它有一些資源被快取到本地，它會在本次查詢，如果沒有才會去伺服器中請求信的資料。

如何防止快取，此時可以通過每次訪問的時候帶一個不同的隨機引數即可：

xhr.open("get","result/info.txt?time="+Math.random(),true);
xhr.open("get","result/info.txt?time="+(new Date()-0),true);

---

 

5.5 URI方法

encodeURIComponent和decodeURIComponent都是瀏覽器內建的方法，相容性很好。

在電腦術語中，統一資源識別符號（Uniform Resource Identifier，或URI)是一個用於標識某一網際網路資源名稱的字串。 

 

http://127.0.0.1/09-Ajax%E9%98%B2%E6%AD%A2%E7%BC%93%E5%AD%98.html

概述：雖然在位址列中你看到了漢字，但是會發現，瀏覽器已經幫我們進行轉碼，所以賦值之後就看見以上結果了，雖然瀏覽器已經幫我們做了這件事，我還是要講一下轉碼和解碼的問題，因為瀏覽器的底層就是用這兩個方法實現轉碼和解碼的。

 

將漢字轉碼為URI：

encodeURIComponent("習大大")

 

將轉碼的漢字解碼：

decodeURIComponent("%E4%B9%A0%E5%A4%A7%E5%A4%A7")

線上工具：https://www.bejson.com/

---

 

5.6原生Ajax的POST請求-註冊功能

表單資料編碼格式有一個正式的MIME型別：application/x-www-form-urlencoded

當使用post請求提交這種順序表單時，必須設定Content-type請求頭為這個值模仿表單資料的提交。

<body>
    <p><input type="text" id="user"><b id="info"></b></p>
    <p><input type="text" id="pwd"></p>
    <button id="btn">註冊</button>
</body>
<script type="text/javascript">
     var btn = document.getElementById('btn');
     var user = document.getElementById('user');
     var pwd = document.getElementById('pwd');

     //實時查詢是否可以註冊
     user.oninput = function(){
        //進行能力檢測，初始化xhr物件
        if(window.XMLHttpRequest){
            //高階瀏覽器版本的寫法
            var xhr = new XMLHttpRequest();
        }else{
            //低版本IE相容寫法
            var xhr = ActiveXObject("msxml2.0.XMLHTTP");
        }

        xhr.open("get", "php/search.php?name=" + user.value, true);

        //只能監聽事件（監聽服務端返回的資料）
        xhr.onreadystatechange = function () {
            //判斷就緒狀態(0~4)是否等於4，如果是HTTP響應以及完全接收
            if(xhr.readyState == 4 && xhr.status == 200 ||  xhr.status == 304){
               if(xhr.responseText == 1){
                    info.style.color = "green";
                    info.innerHTML = "恭喜你可以註冊";
               }else {
                    info.style.color = "red";
                    info.innerHTML = "使用者名稱已被註冊";
               }
            }
        }
        //最後傳送請求
        xhr.send(null); //報文體：get請求偽裝url地址報文體為空，如果是post請求就需要傳引數
     }


     //註冊賬號，儲存資料庫中
     btn.onclick = function(){
        if(window.XMLHttpRequest){
            var xhr = new XMLHttpRequest();
        }else{
            var xhr = ActiveXObject("msxml2.0.XMLHTTP");
        }

        xhr.open("post", "php/reg.php", true);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
        //監聽服務端返回的資料
        xhr.onreadystatechange = function (){
            if(xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304){
                if(xhr.responseText == 1){
                    alert("註冊成功");
                }else{
                    alert("註冊失敗");
                }
            }
        }       
        //最後傳送請求：get請求偽裝url地址報文體為空，如果是post請求就需要傳引數
        xhr.send("name="+user.value +"&password="+pwd.value);
     }
</script>

 

---

5.7封裝QueryString函式

因為原生的Ajax發起請求需要拼接字串，所以為了方便原生Ajax向伺服器傳資料，封裝QueryString函式

//JSON形式的資料：
var obj = {
   name: "哈哈",
   password:456
}

//需要通過下面的方法拼接成get引數字串：
function queryString(data){
   var arr = []; //用陣列儲存k=v
   for(var k in data){
       arr.push(k + "=" + data[k]); //迴圈遍歷儲存到陣列中
       // arr.push(k + "=" + encodeURIComponent(obj[k]));
   }
   return arr.join("&"); //用&符號分割字串
}
console.log(queryString(obj))

封裝好方法後，可以在get和post請求中直接使用JSON傳引數：

GET使用方式：

xhr.open("get", "php/search.php?" + queryString({name:user.value}), true);

 

POST使用方式：

xhr.send(queryString({name:user.value, password:pwd.value}));

注意：

 原生POST請求，向伺服器傳遞資料，不能在地址的後面拼接字串；

 需要在send()傳遞資料，因為send方法相當於是報文體

 POST要設定請求頭setRequestHeader('content-type','application/x-www-form-urlencoded')

 請求頭的設定只能在open函式與send函式之間,其餘的地方不可以，會報錯；

原生Ajax在開發中不會使用，但是面試的時候經常會問到就緒狀態（0-4）

---