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