一、數據庫基礎
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語句，保存數據 $sql = "SELECT * FROM banji0922"; //執行sql語句 $result = mysql_query($sql); $arr = array(); //空數組 //循環把$resultl類數組對象變為數組 while($row = mysql_fetch_array($result)) { array_push($arr,$row); }; $result = array("result"=>$arr); //變為JSON形式 $resultJson= json_encode($result); echo $resultJson; ?>
<?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")
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）