pushState & ajax page loading

Index.cshtml

<html>
<head>
    <title></title>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <style>
        #root-container {
            margin: 20px;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script>
        $(function () {
            $('.nav li a').click(function () {
                $(this).parentsUntil('#root-container').last().children().removeClass('active');

                var $url = $(this).attr('href');
                $.ajax({
                    url: $url,
                    type: 'POST',
                    success: function ($data) {
                        $('#tab-container').html($data);
                    }
                });

                if (location.pathname != $url) {
                    window.history.pushState({ path: $url }, $(this).text(), $url);
                }

                $(this).parent().addClass('active');
                return false;
            });

            $('.nav li a').each(function () {
                if (location.pathname == $(this).attr('href')) {
                    $(this).click();
                    return false;
                }
            });

            if ($('.nav li.active').size() == 0) {
                $('.nav li a').first().click();
            }
        });
    </script>
</head>
<body>
    <input type="hidden" id="current-path" value="@ViewBag.CurrentPath" />
    <div id="root-container">
        <ul class="nav nav-tabs">
            <li><a href="~/Home/jQuery">What is jQuery?</a></li>
            <li><a href="~/Home/jQueryUI">jQueryUI</a></li>
            <li><a href="~/Home/Bootstrap">Bootstrap</a></li>
        </ul>
        <div id="tab-container"></div>
    </div>
</body>
</html>

HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.CurrentPath = Request.Url.AbsolutePath;
            return View();
        }

        public ActionResult jQuery()
        {
            switch (Request.HttpMethod)
            {
                case "POST":
                    return View();
                default:
                    return View("Index");
            }
        }

        public ActionResult jQueryUI()
        {
            switch (Request.HttpMethod)
            {
                case "POST":
                    return View();
                default:
                    return View("Index");
            }
        }

        public ActionResult Bootstrap()
        {
            switch (Request.HttpMethod)
            {
                case "POST":
                    return View();
                default:
                    return View("Index");
            }
        }
    }
}

Reference: Manipulating the browser history

jQuery : post/get using data() as param object

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Recursive call when post request</title>
<script type="text/javascript" src="jquery-1.5.1.js"></script>
<script type="text/javascript">
    $(function() {
        var count = 0;
        $('input:button').click(function() {
            // identity
            count++;
            var tick = count;
            // post url
            var url = '${contextPath}/';
            // post param
            var param = $(this).data();
            console.log(param);
            $('<div>(' + tick + ') Post to : ' + url + '</div>').appendTo(document.body);
            $.post(url, param, function(data) {
                $('<div style="color:blue;">(' + tick + ') Ajax works successfully.</div>').appendTo(document.body);
            });
        });
    });
</script>
</head>
<body>
<input type="button" value="click to post" data-action="test" data-name="bruce" data-age="31" />
</body>
</html>

ボタンをクリックすると、data()のオブジェクトがハンドルを値を持っているため、postするときにハンドルは再び執行することになる。つまり、クリック事件は繰り返しする。この現象を避けるには、ハンドル/イベントを削除しなければならない。

ajax basic

// 取得 XMLHttpRequest 的實體
function getXMLHttpRequest(){
    /* Create a new XMLHttpRequest object to talk to the Web server */
    var xmlHttp = false;
    /*@cc_on @*/
    /*@if (@_jscript_version >= 5)
    try {
        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e2) {
            xmlHttp = false;
        }
    }
    @end @*/

    if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
        xmlHttp = new XMLHttpRequest();
    }

    return xmlHttp;
}

// response 的處理
xmlHttp.onreadystatechange = function(){
    if(xmlHttp.readyState == 4){
        if(xmlHttp.status == 200){
            // 文字
            var txt = xmlHttp.responseText;
            // XML
            var xml = xmlHttp.responseXML;            
            // code here
        }
    }
}
或
xmlHttp.onreadystatechange = doSomeThing;
function doSomeThing(){
    // code here
}

// 以 GET 方式傳送
xmlHttp.open("GET", actionURL);
xmlHttp.send(null);

// 以 POST 方式傳送
xmlHttp.open("POST", actionURL);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  // 一般文字
xmlHttp.setRequestHeader("Content-type", "text/xml"); // XML
xmlHttp.send(parameters);