複習：
AJAX：異步JS和XML，涉及到HTML、CSS、JS、DOM、HTTP、XML、JSON等。目標：無刷新無提交情況下實現頁面內容局部更新，提高瀏覽體驗。
使用XHR發起異步請求步驟：
(1)創建XHR
(2)監聽XHR的狀態改變 0 1 2 3 4
(3)連接到Web服務器
(4)發送請求消息
今日目標：
(1)複習XHR發起兩種請求
(2)學習XHR接收五種響應 —— 重點
1.使用XHR發起兩種請求之一——GET
//1 var xhr = new XMLHttpRequest();
//2 xhr.onreadystatechange = function(){}
//3 xhr.open('GET', 'x.php?k=v&k=v', true)
//4 xhr.send(null);
2.使用XHR發起兩種請求之二——POST
//1 var xhr = new XMLHttpRequest();
//2 xhr.onreadystatechange = function(){}
//3 xhr.open('POST', 'x.php', true)
//3.5 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
//4 xhr.send('k=v&k=v')
3.使用XHR接收五種響應——text/plain
服務器端：
header('Content-Type: text/plain');
echo 'succ';
客戶端：
if( xhr.responseText==='succ'){ ... }
4.使用XHR接收五種響應——text/html
注意：AJAX應用中服務器返回的不是完整的HTML文檔，而只是HTMP標籤組成的片段
服務器端：
header(' Content-Type: text/html;charset=UTF-8 ');
echo '<li>xx</li><li>yy</li>';
客戶端：
ul.innerHTML = xhr.responseText;
input.onkeyup = function(){ var kw = this.value; }
|
擴展SQL語句——如何進行模糊查詢 SELECT * FROM book WHERE bname='指南'; //精準匹配 SELECT * FROM book WHERE bname LIKE '指南'; //精準匹配 |
|
SELECT * FROM book WHERE bname LIKE '%指南%'; //%匹配任意多個任意字符——模糊匹配 |
5.使用XHR接收五種響應——application/javascript
注意：JavaScript代碼在PHP解釋器看來就是普通的字符串而已；
服務器端：
header(' Content-Type: application/javascript');
echo 'alert(123);document.body.appendChild(...)';
客戶端：
eval( xhr.responseText ) //客戶端必須使用eval來執行JS字符串
案例演示：實現了國際化（i18n）的歡迎消息
(1)編寫PHP：i18n.php，解析客戶端請求消息頭部，獲取當前客戶端的首選語言，根據語言的不同，返回不同形式的歡迎消息，如alert('你好'); 或 console.log('こんにちは'); 或 var s = document.createElement('span'); s.innerHTML = 'Hello'; document.body.append(s);
(2)編寫HTML，i18n.html，一個按鈕“獲取歡迎消息”，點擊後發起異步的GET請求，獲得響應消息後，執行出來。
|
服務器如何返回批量的複合數據給客戶端？ 複合數據：一個數據有多個屬性 批量複合數據：有多個複合數據 —— 二維數組 |
|
方式1：用text/plain格式 101#三星#35.5#1.jpg@102#閃迪#34.5#2.jpg@金士頓#... 好處：簡單 不足：不易讀取、很容易出錯 |
|
方式2：用text/html格式 <tr><td>101</td><td>三星</td><td>35.5</td></tr> <tr><td>102</td><td>閃迪</td><td>35.5</td></tr> <tr><td>103</td><td>金士頓</td><td>35.5</td></tr> 好處：情形，方便使用 tbody.innerHTML = xhr.responseText 不足：把數據和格式混在一起，限制了數據的應用場合 |
|
方式3：用application/xml格式 <productList> <product pid="101"> <pname>三星</pname> <price>35.5</price> <pic>1.jpg</pic> </product> <product pid="102"> <pname>閃迪</pname> <price>34.5</price> <pic>2.jpg</pic> </product> </ productList> 好處：是純數據，不附帶任何的顯示格式限制 不足：太複雜了，閱讀和解析都太麻煩 |
|
方式3：用application/json格式 [ { "pid":"101", "pname":"三星", "price":35.5, "pic":"1.jpg" }, { "pid":"102", "pname":"閃迪", "price":34.5, "pic":"2.jpg" } ] 有點：簡單、易於閱讀，處理速度快！ |
6.XML語法學習
eXtensible Markup Language，可擴展的標籤語言，本身是一種字符串格式，用於描述批量複合數據，語法：
(1)所有的數據放在標籤中：
<名>數據</名>
<名 />
(2)整個XML字符串有且只能有一個根標籤
(3)所有的標籤名都可以自定義，但嚴格區分大小寫，且開始和結束標記必須完全一樣
(4)每個標籤都可以自定義屬性，屬性必須有值，值必須用單引號/雙引號括起來
(5)每個標籤都可以定義任意的子標籤，標籤可以嵌套，但不能交叉
注意：HTML和XML的區別——面試題
HTML語法隨意；XML語法嚴格；
HTML標籤預定義好了；XML標籤都是自定義的；
HTML用於描述網頁的結構；XML標籤用於描述數據；
7.使用XHR接收五種響應——application/xml
服務器端：
header('Content-Type: application/xml');
echo '<?xml ?><productList>....</productList>';
客戶端：
//xhr.responseText //把字符串解析爲DOM對象很麻煩
xhr.responseXML //DOM樹的根對象
案例演示：異步加載更多數據
(1)編寫SQL：dangdang.sql，表book(...)
(2)編寫PHP：book_select.php，向客戶端返回所有的數據，以XML字符串格式
(3)編寫HTML：book_select.html，點擊“加載更多”按鈕時，再次請求更多的書籍信息
|
W3C DOM標準分爲三部分： 核心DOM： 可以操作任意的DOM樹，如getElementById()、querySelector()、getAttribute().... HTML DOM： XML DOM： |
8.JSON字符串格式的語法
JSON(JavaScript Object Notation) 是一種輕量級的字符串數據格式。 易於人閱讀和編寫；同時也易於機器解析和生成；在Web編程領域可以取代XML字符串格式！
(1)數據分爲兩種： [ ] { }
(2)整個字符串要麼是一個數組、要麼是一個對象
(3)數組中可以包含各種： 數字、boolean、字符串、null、[]、 {}
(4)對象中可以包含多個鍵值對，鍵必須用雙引號，值若是字符串也必須用雙引號
9.使用XHR接收五種響應——application/json
服務器端：
header('Content-Type: application/json;charset=UTF-8');
$arr = ....;
$str = json_encode($arr); //把PHP數組轉換爲JSON字符串
echo $str;
客戶端：
JSON.parse( xhr.responseText ); //把JSON字符串解析爲JS對象
=============================
10.ES6中新的字符串
var str = `
phone=${p}&pwd=${w}
`;
反引號字符串可以換行；可以包含${}的變量或表單式。
課下練習：
功能要求：
(1)編寫SQL，數據庫名: tarena，員工信息表emp(eid,ename,pic, salary,deptID)，保存多個員工的信息；
(2)編寫PHP，emp_select.php，根據客戶端提交的部門編號(deptID)，返回該部門下的員工信息；
(3)編寫HTML，emp_select.html，下拉框中選擇不同的部門，則下方的員工列表顯示出該部門的員工信息；
select.onchange = function(){ this.value }
(4)點擊“刪除”，發起異步請求刪除該員工信息，服務器返回刪除成功信息後，前端頁面將表格中的當前行刪除。
