首页 > 代码库 > 服务器 5

服务器 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://www.mamicode.com/保存成绩">

要求:点击“保存成绩”按钮,发起异步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方式提交数据!

 

服务器 5