POST & GET : the Idea of Client/Server Communication

最近又是忙着别的没空写文章, 这是几天前随手写的, 今天又回味了一下, 补充了一些感想.

那天包子跟我研讨了一下前端跟后端之间数据的发送和接收, 我理了一下, 觉得可以是这么一个思路:

第一步是前台提交, ( Use form's method="post" to post )

<form action="get.php" method="post">
<input type="text" name="getthis" />
<input type="submit" />
</form>

第二步后台获取提交的值, ( Use PHP's $_POST to get )

<!--This file is get.php-->
<?php echo $_POST["getthis"]; ?>

在这个过程中发生了一件十分傻逼的事情, 就是在本地测试老他妈get不到, 但是我觉得我写的毫无问题, ( 被包子称作典型程序员思维 )
最后才发现是因为我直接运行了文件而不是访问URL

第三步(可选)前台再回调, ( Use JQ's $.get to callback)

getData();
function getData(){
	$.get(
		'get.php',
		{},
		function(response){
			$('body').append(response);
		}
	);
}

代码本身很家常, 然后下面是我的一些感想
通常情况下我们关注的重点是在较为具体的动作上, 就是比如让我写一个表单, 写一个ajax, 或者写一段php, 这些都很清晰, 这个过程中其实我们已经实现了客户端到服务器的通信. 但如果突然让我写一条完整的通信, 我第一时间却想不到这上面去, 我们总是容易忽略了这个过程中连接全局的因素.
也许你会问, 这重要吗, 只要写出来需要的代码不就够了么?
我原本也是这样觉得的, 需求都是具体而微观的, 确实, 如上代码, 宏观的通信很简单就划分为了3个微观的步骤, 但事实上这3段代码单独写出来, 我们的视野就已经局限在代码本身了, 而不再是一个完整的系统.
这个过程中我们丢失了一个很重要的东西, 就是对全局的掌控.
一旦丢失了这种全局思维, 前端只能是前端, 后端只能是后端, 代码只能是代码.
我高中的正治老师常说,我们应该透过现象看本质.
一段无依无靠的代码就像一瓶福尔马林中的器官一样是没有生命的, 只有当它存在于一个完整的系统中, 它的运转才有意义
程序员不应该被代码本身所局限

33 Comments

Name *

E-mail *

Website

  1. 夜枫

    好不习惯~~

  2. 予沐

    我现在有个困苦:AJAX翻页之后多说评论怎么重新绑定呢?蝴蝶阿姨~

    • 小蝴蝶

      @予沐 多说没用过 不过ajax翻页之后绑定是要在翻页的ajax里面重新写入失效js动作

      • 予沐

        @小蝴蝶 阿姨能给个例题嘛?

        • 小蝴蝶

          @予沐 例题//
          原ajax某部分:
          success: function(out) {
          result = $(out).find(‘.commentlist’);
          $(‘#loading-comments’).slideUp(550);
          $(‘#loading-comments’).after(result.fadeIn(800));
          }
          失效js:
          $(“.comment-reply-link})”).bind(“click”,function(){$(‘#responda .avatar’) .hide(); })

          绑定:
          success: function(out) {
          result = $(out).find(‘.commentlist’);
          $(‘#loading-comments’).slideUp(550);
          $(‘#loading-comments’).after(result.fadeIn(800));
          $(“.comment-reply-link})”).bind(“click”,function(){$(‘#responda .avatar’) .hide(); })
          //就是往success后的响应动作里添加一下原来的js
          }

          • 予沐

            @小蝴蝶 哇,谢谢大姐!

            • 小蝴蝶

              @予沐 ………这么容易就改口了 乖 给糖吃

          • 予沐

            @小蝴蝶 = = 、搞不来,我还是乖乖地写个系统评论吧…

            • 小蝴蝶

              @予沐 你可以重新引一次多说的js 用document.createElement(‘script’) 不过我不喜欢多说 自主权没了

  3. 大发

    福尔马林中的生殖器官

  4. 阿邙

    首页有部分错位。 火狐

    图片:http://src.li/1a