服务器 5
复习:
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方式提交数据!