Horn Network » AJAX

用__doPostBack在client端更新UpdatePanel

klcintw — Sun, 29 Mar 2009 13:56:20 +0000

本文介紹：用 __doPostBack 在 client 端更新 UpdatePanel，並用 Web Development Helper 觀察。

分析：

前 4 次連線是第一次載入時的頁面（default.aspx）本身及 3 個 AJAX 相關的 script 檔。Response：9,097。
第 5 次是按「選項1」。Response：1,042。
第 6 次是按「__doPostBack.1」。Response：1,042。
第 7 次是按「__doPostBack.2」。Response：1,042。
但 Request 的長度則略有不同。

用 UpdatePanel 的方式確實比原本整頁 postback 好。

但要注意：Page_Load 在普通的 postback 和 partial postback 都會執行（圖）。可以藉由 IsPostBack 和 IsInAsyncPostBack 來判斷兩者的差異。

可用 __doPostBack 第二個參數傳遞參數。

Server Side 流程

//==========================
// 第一次載入
Page_Load
    IsPostBack=False
    IsInAsyncPostBack=False
    __EVENTTARGET=, __EVENTARGUMENT=
UpdatePanel1_PreRender
//==========================
// 按「選項1」
Page_Load
    IsPostBack=True
    IsInAsyncPostBack=True
    __EVENTTARGET=, __EVENTARGUMENT=
Button1_Click
UpdatePanel1_PreRender
==========================
// 按「__doPostBack.1」
Page_Load
    IsPostBack=True
    IsInAsyncPostBack=True
    __EVENTTARGET=UpdatePanel1, __EVENTARGUMENT=參數1,參數2
UpdatePanel1_PreRender
==========================
// 按「__doPostBack.2」
Page_Load
    IsPostBack=True
    IsInAsyncPostBack=True
    __EVENTTARGET=UpdatePanel1, __EVENTARGUMENT=
UpdatePanel1_PreRender
==========================
// 按「清除」
Page_Load
    IsPostBack=True
    IsInAsyncPostBack=False
    __EVENTTARGET=UpdatePanel1, __EVENTARGUMENT=
UpdatePanel1_PreRender

程式碼

default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<%@ Register assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI" tagprefix="asp" %>



  


 
    
    

    
    

    票數：

    
    
    

    
    
    
裡面：<%=DateTime.Now.ToString() %>
    

    
    
    
外面：<%=DateTime.Now.ToString() %>

default.aspx.cs

using System;
using System.Diagnostics;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication1
{
 public partial class _Default : System.Web.UI.Page
 {
  protected void Page_Load(object sender, EventArgs e)
  {
   Debug.WriteLine("==========================rnPage_Load");
   Debug.WriteLine(string.Format("tIsPostBack={0}", this.IsPostBack));
   Debug.WriteLine(string.Format("tIsInAsyncPostBack={0}", this.ScriptManager1.IsInAsyncPostBack));
   Debug.WriteLine(string.Format("t__EVENTTARGET={0}, __EVENTARGUMENT={1}", Request["__EVENTTARGET"], Request["__EVENTARGUMENT"]));

   if (Session["0"] == null)
   {
    Session["0"] = 0;
    Session["1"] = 0;
   } // if

   ShowResult();
  }

  protected void Button1_Click(object sender, EventArgs e)
  {
   Debug.WriteLine("Button1_Click");
   Session["0"] = Int32.Parse(Session["0"].ToString()) + 1;
   ShowResult();
  }

  protected void Button2_Click(object sender, EventArgs e)
  {
   Debug.WriteLine("Button2_Click");
   Session["1"] = Int32.Parse(Session["1"].ToString()) + 1;
   ShowResult();
  }

  private void ShowResult()
  {
   this.Label1.Text = string.Format("1:{0}, 2:{1}", Session["0"], Session["1"]);
  }

  protected void btnReset_Click(object sender, EventArgs e)
  {
   Session["0"] = 0;
   Session["1"] = 0;
   ShowResult();
  }

  protected void UpdatePanel1_PreRender(object sender, EventArgs e)
  {
   Debug.WriteLine("UpdatePanel1_PreRender");
  }
 }
}

檔案下載

程式碼（Box.net）

參考資料

Google AJAX Search 簡單範例

klcintw — Fri, 12 Sep 2008 10:40:51 +0000

首先要到 http://code.google.com/apis/ajaxsearch/signup.html 申請 AJAX Search API Key ，如果你已經申請過 Google Map API Key 可以直接使用兩者是相同的。

只要一個 DIV 就能有 Google Search 的大部份功能！

Google API

GSearchControl
GsearcherOptions
預設只顯示第一個結果，加上 GSearchControl.EXPAND_MODE_OPEN 就會自動展開結果。
GwebSearch
setUserDefinedClassSuffix 可以附加結果欄中的 css名稱。
若要用程式執行查詢功能可用：
searchControl.execute(關鍵字);

程式碼

執行範例




[body]

[/body]

參考資料：

Developer’s Guide – Google AJAX Search API – Google Code

[PHP]PO3 一次幫你從3個地方（Buboo,Plurk,Twitter）讀取訊息！

klcintw — Wed, 09 Jul 2008 15:41:05 +0000

為了統一來源及安全限制，我在server端放一個ajax.php用來取得Buboo,Plurk,Twitter的json資料，在client使用javascript處理資料呈現。

資料來源及內容：

Buboo ^{[資料來源]} : http://api.buboo.tw/user_timeline/{使用者帳號}.rss?count={訊息數量}
created_at : 日期（2008-07-07 23:15）
text : 訊息內容
id : 訊息代號（8f8170289cba351）

原文網址：http://buboo.tw/msg/{id}.html

Plurk ^{[資料來源]} : 無直接網址。
需先取的userid(數字)，再POST到 http://www.plurk.com/TimeLine/getPlurks ，其中欄位 user_id=$userid
qualifier : 動作（”:”表示未指定）
content_raw : 訊息內容
content : 訊息內容（已格式成HTML）
posted : 日期（new Date("Mon, 07 Jul 2008 04:08:40 GMT")）

原文網址：無

Twitter ^{[資料來源]} : http://twitter.com/statuses/user_timeline/{使用者帳號}.json&count={訊息數量}
text : 訊息內容
Source : 發訊來源
id : 訊息代號（851703528）
created_at : 日期（Mon Jul 07 04:08:41 +0000 2008）

原文網址：http://twitter.com/{user.screen_name}/statuses/{id}

Server端 ajax.php：

Client端 javascript：

AJAX (prototype)

function ajaxBuboo() {
	var uid = $('userid').value;
	$('divBuboo').innerHTML = "loading ("+uid +")...";
	var url = 'ajax.php?url=http://api.buboo.tw/user_timeline.json?uid='+uid +'&count=5';
	new Ajax.Request(url,
　		{
　　	method: 'get',
	　　asynchronous: true,
　　	onSuccess:showResultBuboo,
	　　onFailure:ShowFailure
　		}
	);
}
function showResultBuboo(httpObj) {
	$('divBuboo').innerHTML = buboo(httpObj.responseText.evalJSON(false));
}

Buboo

function buboo(json) {
	var retHtml = "";
	for (var i=0; i; i++){
		retHtml += (''+json[i].text+' url'
		);
	} // for
	return retHtml;
}

Plurk

function plurk(json) {
	var retHtml = "";
	for (var i=0; i'+
			(json[i].qualifier==":"?"":json[i].qualifier+":" )+' '+
			json[i].content+' ['+json[i].response_count+']'
		);
	} // for
	return retHtml;
}

Twitter

function twitter(json) {
	var retHtml = "";
	var username = "";
	for (var i=0; i'+json[i].text+' url'
		);
	} // for
	return retHtml;
}