服务器 6

复习：

AJAX：异步JS和XML，涉及到HTML、CSS、JS、DOM、HTTP、XML、JSON等。目标：无刷新无提交情况下实现页面内容局部更新，提高浏览体验。

使用XHR发起异步请求步骤：

(1)创建XHR

(2)监听XHR的状态改变 0 1 2 3 4

(3)连接到Web服务器

(4)发送请求消息

练习：dangdang的后台书籍录入系统——不跳转

(1)编写SQL：dangdang.sql，表book( bid, bname, price, pic )，试着插入几行记录

(2)编写PHP：book_add.php，接收客户端提交的bname, price, pic，插入到数据库中，成功则返回succ，失败则返回err。记得同步请求测试一下

(3)编写HTML：book_add.html，没有表单，只有几个输入框，一个button按钮，单击后收集用户的输入，发起异步请求，提交给服务器

今日目标：

(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;

案例演示：搜索建议

实现顺序：

(1)编写SQL：dangdang.sql，表book(....)

(2)编写PHP：book_search.php，接收客户端提交的书名关键字kw，执行查询，返回所有包含该关键字的书名，以LI片段格式

(3)编写HTML：book_search.html，包含一个输入框，只要用户输入了文本，下方立即显示出一个包含该文本的搜索建议

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格式

好处：情形，方便使用 tbody.innerHTML = xhr.responseText

不足：把数据和格式混在一起，限制了数据的应用场合

方式3：用application/xml格式

</product>

</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)点击“删除”，发起异步请求删除该员工信息，服务器返回删除成功信息后，前端页面将表格中的当前行删除。