Ajax实现类似于新浪关注按钮功能的原理是什么？

Question

我自己做这样的功能，开始时没有用JS代码，就接关注信息送到数据库然后再刷新一次页面，再读数据库，觉得很不爽，知道用Ajax能搞定这样的功能，但却不知道原理，有知道的朋友麻烦指教下。

Answer 1

user.php

<?php if ($isFriend) {?>
				<a id="info_block_btn" class="info_btn_hover" href="a_relation.php?action=destory&id=<?php echo $userid ?>">取消关注</a>
			<?php } else { ?>
				<a id="info_follow_btn" class="info_btn" href="a_relation.php?action=create&id=<?php echo $userid ?>">关注此人</a>
			<?php } ?>

a_relation.php

<?php 
	include ('lib/twitese.php');
	$title = "修改好友关系";
	header("content-type:text/html; charset=utf-8");
	if (!isLogin()) header('location: login');
	
	if ( isset($_POST['action']) && isset($_POST['id']) ) {
		$t = getTwitter();
		if ($_POST['action'] == 'create') {
			$result = $t->followUser($_POST['id']);
			if ($result) echo '添加好友成功，请<a href="home">返回首页</a>或后退';
			else echo '添加好友出错，请返回重试';
		} else if ($_POST['action'] == 'destory') {
			$result = $t->destroyUser($_POST['id']);
			if ($result) echo ' 删除好友成功，请<a href="home">返回首页</a>或后退';
			else echo '删除好友出错，请返回重试';
		}
	} else {
		if ( isset($_GET['action']) && isset($_GET['id']) ) {
			$id = $_GET['id'];
			$action = $_GET['action'];
			$msg = $action == 'create' ? "确定添加 $id 为好友？" : "确定删除好友 $id ?";
			echo "
				<form action=\"a_relation.php\" method=\"post\">
					$msg
					<input type=\"hidden\" name=\"id\" value=\"$id\" />
					<input type=\"hidden\" name=\"action\" value=\"$action\" />
					<input type=\"submit\" value=\"确定\" />
					<a href=\"home\">取消</a>
				</form>
			";
		} else {
			echo "非法请求";
		}
	}
?>

user.js

$("#info_follow_btn").live("click", function(e){
		e.preventDefault();
		var $this = $(this);
		var id = $("#info_name").text();
		if (confirm("你确定要关注" + id + "吗？")) {
		updateSentTip("正在关注" + id + "...");
		$.ajax({
			url: "ajax/relation.php",
			type: "POST",
			data: "action=create&id=" + id,
			success: function(msg) {
				if (msg.indexOf("success") >= 0) {
					updateSentTip("关注" + id + "成功。");
					$this.after('<a class="btn btn-red" id="info_block_btn" href="javascript:void(0)">取消关注</a>');
					$this.remove();
				} else {
					updateSentTip("关注" + id + "失败，请重试。(502)");
				}
			},
			error: function(msg) {
				updateSentTip("关注" + id + "失败，请重试。(403)");
			}
		});

relation.php

<?php
	if(!isset($_SESSION)){
		session_start();
	}
	include ('../lib/twitese.php');
	$t = getTwitter();
	$result;
	if ( isset($_POST['action']) && isset($_POST['id']) ) {
		switch($_POST['action']){
			case 'create':
				$result = $t->followUser($_POST['id']);
				break;
			case 'destory':
				$result = $t->destroyUser($_POST['id']);
				break;
			case 'block':
				$result = $t->blockUser($_POST['id']);
				break;
			case 'unblock':
				$result = $t->unblockUser($_POST['id']);
				break;
			case 'report':
			/* uncomment for test */
				//$result = true;
				$result = $t->reportSpam($_POST['id']);
				break;
		}
		if ($result){
			refreshProfile($t);
			echo 'success';
		}else{
			echo 'error';
		}
	}

供参考
来自FanfouAPI,a Fanfou style twitter PHP client.