服务器请求和响应笔记

饥人谷_李栋

1.基本概念
2.动词get 和 post 区别
3.服务器 请求、响应过程
4.form表单的默认提交动作
5.lablel、input 关联
6.取form的name.value的方法
7.post提交
8.实例

一、基本概念

• 请求（request） 响应(response)
  请求行 =动词 路径 版本
  请求头 =名字 ：value
  空行
  消息体（包体）

二、动词get 和 post 区别

1) 触发方式不同
->触发get

• 地址栏输入url
• img src=...> <script src=...>
• 请求外部css文件
• $.get()

-> 触发post//是非幂等的

• <from>提交
• $.post()
  // $.post(url,date,success,dataType)

2) get 无body；post有body（空行+消息体）
3) 语义不同
get读资源 post 写资源
//http协议没规定，是很多server软件看到get 不去读它的body，so..

三、服务器 请求、响应过程
//以koa为例Koajs application starter template

1. 路由 请求路径的时候 调用index方法
2. index方法渲染index.hbs文件
3. index.hbs文件的内容会作为响应返回给浏览器

//可以这么理解：

1. 看你请求那个路径，
2. 根据路径调用方法
3. 方法渲染html文件

四、form表单的默认提交动作

1. 如果form表单里面有 type=“submit”
2. 当我们在任意一个input里面点 回车/ 提交 按钮的时候
3. 会把input里面所有含有 name的value收集起来组成字符串

//post请求会把所有name收集起来 （以name1:xx&name2:xx的形式） 放到消息体里面
//post响应会拿到所有name 然后渲染html

//form 的get请求把所有name收集起来（以?name1:xx&name2:xx的形式）放到查询参数里面

五、内容、input 关联
1.普通用法

<lable for='input1'>内容：</lable><input id='input1' type='text' name='name1'>
//效果 点lable input就获得焦点了

2.快捷方式

<lable>
    内容：<input type='text' name='name1'>
</lable>

六、取form的name.value的方法

  $('form').on('submit',function(){
     var form=this//dom
     console.log(form.phone.value)
     
  })

七、post提交

$.post(url,数据，成功后的callback)

url可以是：'/post2' '/' form.action
数据可以是： object({xxx:yyy,xx:yy}) string
成功后的回调: function(response){xxx}
//只有成功提交，错误的提交需要用到ajax方法
//response可能是对象或字符串，
//jason的话-> 服务器会变成jason，所以对象里面的key和value都是服务器决定的
//字符串 -> 返回字符串

ajax方法

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: callback,
  error：callback,
  dataType: dataType
});

八、实例
老规矩上具体实例

//index.hbs
//方法一
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
 <script>
        $('form').on('submit', function(event){
            event.preventDefault()//阻止默认事件
           var form=this
           var name=form.name.value
           var phone=form.phone.value//收集字符串key、value
           $.post('/',{
            name:name,
            phone:phone//name=xingkongs&phone=123
           },)//构造post请求
        })
//方法二：      
        $.ajax({
            type: "POST",
            url: xxxx,
            data: {
                    name:name,
                    phone:phone
                },
                    success: function(response){
                    console.log(response)
                    var  name=response.name4
                    var  phone=response.phone4//这里的phone4就是服务器定的
                        alert('姓名：'+name+'\n手机：'+phone)
                },
            error：function(){
                    alert('服务器出错了！')
            },
                    dataType: dataType
        });
 </script>
 

koa服务器端代码

 //controllers/index.js
 module.exports = {
 post: function *(next) {
        var name = this.request.body.name
        var phone = this.request.body.phone//获取post请求的值
       
        // yield this.render('post.hbs', {
        //    name4: name,
        //    phone4: phone
        // });
            this.body={
                name4:name,
                phone4:phone//服务器定义response的key、value
            }
         yield next;
    }
}

路由部分代码

module.exports = function(app) {
    var Router = require('koa-router'),
        indexCtrl = require('../controllers/index');

    var router = new Router();

    router
        .get('/', indexCtrl.index)
        .get('/2', indexCtrl.index2)
         .get('/3', indexCtrl.index3)
        .post('/', indexCtrl.post)
        .post('/post2', indexCtrl.post2)
        .post('/post3', indexCtrl.index3)

    app.use(router.middleware());
};