复习：
HTTP协议，用于在Web客户端和服务器之间传输网页内容。
请求消息(request)：
起始行： POST /index.php HTTP/1.1
头部： Content-Type: ...
CRLF
主体： k=v&k=v&...
响应消息(response)：
起始行： HTTP/1.1 200 OK
头部： Content-Type: ...
CRLF
主体： <html><body>...
练习：
(1)编写SQL: sohu.sql，表mail( mid, phone, pwd, lastLoginTime )， 试着添加三条记录 < 3min
(2)编写PHP：mail_register.php，接收客户端提交的phone、pwd，添加到数据库 —— 若手机号已经存在，则不能添加，提示已经注册过，无需重复注册 SELECT ... INSERT... < 4min
(3)编写HTML：mail_register.html，提供表单，辅助用户实现邮箱注册<2min
(4) 编写PHP：mail_login.php，接收客户端提交的phone、pwd，执行查询，若都正确，则输出“登录成功”，更新最后一次登录时间；若有错误，则输出“用户名或密码有误” SELECT... UPDATE
(5)编写HTML：mail_login.html，提供表单，辅助用户实现邮箱登录
(6) 编写PHP：mail_select.php，在TABLE中输出所有用户的邮箱
(7) 编写PHP：mail_delete.php，接收客户端提交的mid，从数据库中删除
今日目标：
(1)补充：HTTPS协议 —— 了解
(2)原生AJAX概述 —— 重点
(3)原生AJAX发起GET、POST请求 —— 重点&难点
1.安全的HTTP协议
HTTP: 80
HTTPS: 443 HTTP Secure、 HTTP over SSL
2.AJAX概述
Asynchronous Javascript And XML，异步的JS和XML
Google在2001年，为Google搜索加了“Google Suggest”功能，可以在用户浏览网页的同时，从服务器端获取更新后的搜索建议。命名为AJAX，目标：实现在无刷新、无提交的情况下页面内容局部更新,提高用户的浏览体验。常用的场景：搜索建议、数据重复性判断、在线股票、在线聊天室、异步加载分页数据....
AJAX涉及到技术：HTML、CSS、JS、DOM、HTTP、XML —— 属于纯客户端技术。
底层原理：在客户端浏览网页的同时，浏览器底层使用XMLHttpRequest对象，向服务器发起HTTP请求，并接收服务器的响应消息——浏览的同时服务器也在工作
2.使用AJAX的步骤
(1)创建XHR对象
var xhr = new XMLHttpRequest();
(2)监听XHR状态改变事件
xhr.onreadystatechange = function(){}
(3)使用XHR连接到Web服务器
xhr.open(method, uri, isAysn);
(4)使用XHR对象发起异步的HTTP请求消息
xhr.send(null/data);
3.XHR对象的常用属性和方法
提示：XHR对象的作用：发起异步HTTP请求，并接收响应消息——整个过程程序员是不可见的，调试错误只能靠监视请求和响应消息。
|
XHR对象的成员属性： readyState: 0，表示XHR的当前状态，即请求-响应过程进行到哪一步，可取值有5个，只能依次递增不能回退，自动改变不能手工赋值： 0 - UNSENT 请求消息尚未发送 1 - OPENED 已打开到服务器的连接 2 - HEADERS_RECEIVED XHR已接收到响应消息起始行和头部 3 - LOADING XHR正在响应消息的主体 4 - DONE XHR已经接收完成响应消息
status: 0, 响应消息状态码，只有xhr.readyState变为2后才有值 statusText:""，响应消息中原因短句，只有xhr.readyState变为2后才有值 responseText: ""，响应消息的主体内容，当xhr.readyState变为3开始有值，变为4值稳定下来 |
|
XHR对象的成员事件： onreadystatechange：xhr.readyState属性值的每次改变都会触发该事件 |
|
XHR对象的成员方法： open(method, uri, isAsyn): 打开到服务器的连接 send( body/null ): 发送请求消息 setRequestHeader(name, value): 设置请求消息头部 getResponseHeader(name): 获取响应消息头部 getAllResponseHeaders(): 获取响应消息中的所有头部 |
4.使用XHR发起异步的GET请求
演示：异步验证用户名是否已经存在
步骤： SQL => PHP => HTML
(1)编写SQL：sohu.sql，表名：mail(....) 15:43
(2)编写PHP：check_phone.php，接收客户端提交的phone，向客户端输出“cunzai”或“bucunzai”；使用浏览器同步请求该页面进行测试
(3)编写HTML，编写一个注册用的表单，当phone输入域失去焦点时(inputPhone.onblur)，获取用户的输入，异步提交给服务器进行验证
//1 //2 //3 //4
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState===4){
if(xhr.status===200){
doResponse(xhr);
}else {
alert('响应完成但有问题');
}
}
}
xhr.open('GET', 'x.php?k=v&k=v', true);
xhr.send( null );
5.使用XHR发起异步的POST请求
注意：由于XHR对象发送POST请求时默认的Content-Type请求头为text/plain，PHP服务器会拒接接收请求数据，必须在请求消息发送之前进行修改！
//1 var xhr = new XMLHttpRequest();
//2 xhr.onreadystatechange = function(){ }
//3 xhr.open('POST', 'x.php', true);
//3.5 在请求主体发送之前修改请求头部Content-Type
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//4 xhr.send( 'k=v&k=v' );
练习：实现用户异步登录
(1)编写SQL：sohu.sql，表mail(....)
(2)编写PHP：mail_login.php，接收客户端提交的phone、pwd，执行数据库查询，若都正确，向客户端输出succ；若无法查询到记录，向客户端输出err SELECT * FROM mail WHERE phone='' AND pwd=''
(3)编写HTML：mail_login.html，登录按钮，点击后弹出一个登录“模态对话框”，输入电话和密码，点击提交可以实现异步信息登录验证，若响应消息是err，则在输入框上方提示“用户名或密码错误”；若响应消息是succ，则隐藏对话框，登录按钮处显示为“欢迎回来：XXX”
提示：语义上，此示例应该使用POST请求
练习内容：
(1)使用XHR对象发起异步的HTTP请求——成绩录入系统
<h1>成绩录入系统</h1>
学生姓名： <input id="stuName">
语文成绩： <input id="chinese">
数学成绩： <input id="math">
<input type="button" value="保存成绩">
要求：点击“保存成绩”按钮，发起异步HTTP请求，把数据提交给服务器端的PHP页面，INSERT到MySQL数据库，返回'succ'或'err'提示文字。客户端弹出一个alert("保存成功/失败")。用户点击确定后，清空输入框内容，继续录入下一个学生成绩。
实现步骤：
(1)编写SQL：创建数据库-tarena，包含表-score( sid、stuName、chinese、math )；插入三行测试数据，查询所有记录行。
(2)编写PHP：创建score_add.php，接收客户端提交的stuName / chinese / math数据，执行INSERT，把数据插入到数据库，返回succ或err
(3)编写HTML：创建score_add.html，显示三个输入框及提交按钮，一点击发起异步请求，将数据提交给服务器端PHP页面
要求：
先用GET方式提交数据！
再用POST方式提交数据！