使用 Google AJAX Libraries API 時，無法離線撰寫網頁程式?

在網頁程式中，我都是使用 Google AJAX Libraries API 來 host jquery 程式庫的，然而這麼作有一個缺點，如果你是在離線作程式設計時，要手動修改樣版，把 Google 來源的 js 檔改成從本機讀取，是有點麻煩，但致少作得到。

但若是將來在系統上線後，使用者上得了你寫的網頁系統，卻無法連至 www.google.com 呢? 那怎麼辦，雖然這個機率會滿低的，但也是有可能會發生在這個網頁系統屬公司內部系統，而對外連線卻被中斷的情況下。

別怕! 很簡單，下面就是一個範例，第 6、7、8 行改成本機 host 的檔即可。

 1 <link rel="stylesheet" title="default" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css"> 2 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
 3 
 4 <script type="text/javascript">
 5     if (typeof google == 'undefined') {
 6         document.write(unescape('%3Cscript src="/localmedia/jquery-1.4.min.js" type="text/javascript"%3E%3C/script%3E'));
 7         document.write(unescape('%3Cscript src="/localmedia/jquery-ui-1.7.2.custom.min.js" type="text/javascript"%3E%3C/script%3E'));
 8         document.write(unescape('%3Clink type="text/css" href="/localmedia/smoothness/jquery-ui-1.7.2.custom.css" /%3E'));
 9     } else {
10         google.load("jquery", "1.4.0");
11         google.load("jqueryui", "1.7.2");
12     }
13 </script>

延伸閱讀： Using CDN Hosted jQuery with a Local Fall-back Copy

懂基本原理與不懂基本原理的差別

我在使用 Google AJAX Library api 時，遇到一個奇怪的問題：

//第一段
<script src="http://www.google.com/jsapi"></script>
<script>
 google.load("jquery", "1.3.2");
 google.load("jqueryui", "1.7.2");
</script>
<script>
 var $p = $('<p>123</p>');
 alert($p.text()); // it works
</script>

以上程式碼居然不等於下面的程式碼!

//第二段
<script src="http://www.google.com/jsapi"></script>
<script>
 google.load("jquery", "1.3.2");
 google.load("jqueryui", "1.7.2");
 var $p = $('<p>123</p>'); //會發生「未定義 $ 」問題。
 alert($p.text());
</script>

但第一段程式碼可換成下面程式碼

//第三段
<script src="http://www.google.com/jsapi"></script>
<script>
 google.load("jquery", "1.3.2");
 google.load("jqueryui", "1.7.2");
 google.setOnLoadCallback(function() {
   var $p = $('<p>123</p>');
   alert($p.text()); // it works
 });
</script>

也就是 js 引擎對 <script> 區塊的判讀有特殊行為存在，要不然就是 jsapi.js 程式有獨到之處，但因為我不懂 js 引擎也沒仔細去看 jsapi.js 程式碼，所以我只能 try and error ，慢慢兜。

return HttpResponseRedirect with Post Data?

This is an example to solve the question from Django User Group

In the specification of http status code 302, there are no way to pass a post data to user's browser. But we can use AJAX method to reach this requirement. The principle is using the AJAX request to do some thing must run in the server and return a json data to browser, then the callback function that defined in the html will shape a html form and submit this form.

def readReturnHttpRedirectWithPost(R):
    if R.GET.get('var', None):
        # do something what you want
        return HttpResponse(json.write({'action': 'https://your.web.sitek/', 'vars': {'var1': 'var1', 'var2': 'var2'}}))
    html = """
    <html><head><script type="text/javascript" src="/media/jquery.ui-1.5.1/jquery-1.2.6.js"></script></head>
        <body>
          <ul><li><input type="text" id="var"></li>
              <li><input type="submit" id="updateFormWithPost"></li></ul>
          <form id="post_form" method="POST"></form>
          <script>
            $(document).ready(function(){
                $('#updateFormWithPost').click(function(){
                    var value = $('#var').val();
                    $.getJSON('/u/readreturnhttpredirectwithpost/', {'var': value}, function(json){
                        var $post_form = $('#post_form');
                        $post_form.attr('action', json['action']);
                        for (var i in json['vars']){
                            var $input = $('<input type="hidden" name="'+i+'" value="'+json['vars'][i]+'">');
                            $post_form.append($input);
                        }
                        $post_form.submit();
                    });
                });
            });
          </script>
        </body>
    </html>"""
    return HttpResponse(html)