%%CATEGORY%%:rss

AJAX -- jQuery.history 的完整範例

Fri, 03 Dec 2010 00:57:07 +0000

網頁：jqhistory.htm

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jQuery History Plugin Ajax Sampletitle> <script type="text/javascript" src="jquery.js">script> <script type="text/javascript" src="jquery.history.js">script> <script type="text/javascript" src="ajax.js">script> <style type="text/css"> #content { border: 1px #666 solid; width: 300px; height: 300px; padding:0.5em; } style> head> <body> <h1>jQuery History Plugin Ajax Sampleh1> <div id="ajax-links"> <ul> <li><a href="#1">load 1.htmla>li> <li><a href="#2">load 2.htmla>li> <li><a href="#3">load 3.htmla>li> ul> <div id="content">div> <hr /> div> <p>[<a href="../">All samplesa>] [<a href="http://github.com/tkyk/jquery-history-plugin">Project homea>] p> body> html>

程式：ajax.js

jQuery(document).ready(function($) { function load(num) { $('#content').load(num +".html"); } $.history.init(function(url) { load(url == "" ? "1" : url); }); $('#ajax-links a').live('click', function(e) { var url = $(this).attr('href'); url = url.replace(/^.*#/, ''); $.history.load(url); return false; }); });

說明：jQuery(function($) 的意義。

Example: Uses both the shortcut for $(document).ready() and the argument to write failsafe jQuery code using the $ alias, without relying on the global alias.

jQuery(function($) { // Your code using failsafe $ alias here... });

by ccckmit

AJAX 程式設計 -- 參考文獻

Fri, 03 Dec 2010 01:05:38 +0000

[jQuery Plugin] jquery.history AJAX 無法回到上一頁的解決方案 — http://hi.baidu.com/lifa868/blog/item/91a2f7f16ce9eac97831aabd.html/cmtid/fe6c0f0be0172033b0351da8
Google網站管理員工具說明：AJAX：常見問題 — http://www.google.com/support/webmasters/bin/answer.py?hl=b5&answer=174993

by ccckmit

AJAX 程式設計 -- 相關網站

Fri, 03 Dec 2010 01:04:00 +0000

jQuery — http://jquery.com/
jQuery history plugin — http://tkyk.github.com/jquery-history-plugin/
jQuery 台灣 — http://www.jquery.com.tw/
jQuery 教學 — http://webdesign.kerthis.com/jquery/

by ccckmit

AJAX 程式設計 -- 最新修改

Fri, 03 Dec 2010 01:01:02 +0000

by ccckmit

AJAX -- 使用 jQuery.history 解決「上一頁」問題

Fri, 03 Dec 2010 00:53:08 +0000

使用 jQuery Plugin

<script type="text/javascript" src="jquery.history.js">script> ... <script type="text/javascript"> // 「上一頁」觸發後執行的函數 function pageload(hash) { // 根據傳回的 hash（錨點），AJAX 置換顯示的內容 if(hash) { // 重新讀取指定頁面 $("#load").load(hash + ".html"); } else { // 如果沒有回傳值，代表已經回到 AJAX 的初始狀態頁，清空顯示的內容 $("#load").empty(); } } $(function () { // 初始化 history plugin，並設定回傳使用的函數 $.historyInit(pageload); // 設定觸發寫入歷史紀錄條件的按鈕事件 $("a[rel='history']").click(function(){ // 取得超連結的錨點 var hash = this.href; hash = hash.replace(/^.*#/, ''); // 點選 AJAX 頁面時，紀錄位置於瀏覽器的歷史紀錄中 $.historyLoad(hash); return false; }); }); script>

參考文獻

[jQuery Plugin] jquery.history AJAX 無法回到上一頁的解決方案 — http://hi.baidu.com/lifa868/blog/item/91a2f7f16ce9eac97831aabd.html/cmtid/fe6c0f0be0172033b0351da8

by ccckmit

AJAX 中的「上一頁」問題

Fri, 03 Dec 2010 00:16:28 +0000

by ccckmit

AJAX -- 搜尋問題

Fri, 03 Dec 2010 00:27:20 +0000

可以使用 http://example.com/ajax.html#!foo=123 這種格式的網址，配合 Google 的爬蟲程式 GoogleBot，就能讓 Google 搜尋到這個 AJAX 程式的內容 (因為 GoogleBot 會模擬瀏覽器的行為，執行 HTML 中的 JavaScript 與 AJAX)。

參考文獻

Google網站管理員工具說明：AJAX：常見問題 — http://www.google.com/support/webmasters/bin/answer.py?hl=b5&answer=174993

by ccckmit

AJAX -- 使用 XMLHttp

Fri, 03 Dec 2010 00:07:29 +0000

初始化

 if (window.XMLHttpRequest) { // Mozilla, Safari,... http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); // IE 7+ } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); // IE 6 } catch (e) {} } }

取得資料 (GET)

http_request.open('GET', 'target.xml', true); // 方法：GET, 目標：target.xml, 非同步:true http_request.send(null);

取得資料 (POST)

http_request.open('POST', 'target.php', true); // 方法：GET, 目標：target.xml, 非同步:true http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); http_request.send('name=value&anothername=othervalue&so=on');

參考文獻

AJAX 入門：第一個範例 — http://web.nchu.edu.tw/~jlu/classes/xml/ajax/example1.shtml

by ccckmit

免費電子書 -- AJAX 程式設計

Thu, 02 Dec 2010 23:49:08 +0000

by ccckmit