AJAXを使用した高い対話性を誇るポートレットの構築

Size: px

Start display at page:

Download "AJAXを使用した高い対話性を誇るポートレットの構築"

かおりけいれい
5 years ago
Views:

1 Oracle Application Server Portal テクニカルノート AJAX

2 概要 Web Web Web UI Web Web Web Web Ajax Asynchronous JavaScript and XML Ajax Ajax 1 API JSR 168 Web Java JSR 168 JavaScript AJAX: 画面の背後にあるテクノロジ Web JavaScript Ajax Asynchronous JavaScript and XML Ajax Web Ajax Ajax JavaScript: Document Object Model DOM XMLHttpRequest : HTTP HTTP AJAX を使用した高い対話性を誇るポートレットの構築 2

3 XML: HTML AJAX の動作 Web HTTP Web HTTP Ajax Web Web Ajax Ajax HTTP Ajax Ajax Ajax JavaScript HTML Ajax 1 1. Ajax HTTP 2. HTTP Ajax Web 3. HTTP Web XML Ajax XSL 4. Document Object Model DOM DOM HTML HTML AJAX を使用した高い対話性を誇るポートレットの構築 3

4 1: Ajax Web ポートレットでの AJAX Web Web Ajax Ajax Ajax Ajax JavaScript Ajax 1 Web 1. UI Ajax Ajax XMLHttpRequest 2. HTTP Ajax AJAX を使用した高い対話性を誇るポートレットの構築 4

5 3. HTTP Ajax XML Ajax XSL 4. DOM 2: Ajax 使用例 : 対話型の電話帳ポートレット Ajax DOM AJAX を使用した高い対話性を誇るポートレットの構築 5

6 3: Ajax AJAX 電話帳ポートレットの作成 Ajax JSP 1. <form name="sampleform" id="sampleform"> <input class="portlet-form-input-field" type="text" size="14" name="custname" id="custname onkeyup="assembleurl(event);" />... </form>... <div id="results"/> 2. onkeyup JavaScript Ajax <div> 3. URL GetCustomerInfo encodeurl() URL : Web Services for Remote Portlets WSRP URL GetCustomerInfo AJAX を使用した高い対話性を誇るポートレットの構築 6

7 <script language="javascript" type="text/javascript">... var url = '<%=response.encodeurl(request.getcontextpath() + "/GetCustomerInfo")%>'; XMLHttpRequest XMLHttpRequest 1 JavaScript request = new XMLHttpRequest(); var request = false; try { request = new XMLHttpRequest(); catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); catch (failed) { request = false; 5. XMLHttpRequest POST GET JavaScript updatepage() function getcustomerinfo(url) { request.open("post", url, true); request.onreadystatechange = updatepage; request.setrequestheader("content-type", "application/x-www-form-urlencoded; charset=utf-8"); request.send (createquery(document.getelementbyid ("sampleform") ) ); AJAX を使用した高い対話性を誇るポートレットの構築 7

8 : custname 6. <div> DOM function updatepage() { document.getelementbyid("results").innerhtml = response[0].replace(/\n/g, "");... <div id="results"> HTML function updatepage() { if (request.readystate == 4) if (request.status == 200) { var response = request.responsetext.split(" "); document.getelementbyid ("results").innerhtml= response[0].replace(/\n/g, ""); else if (request.status == 404)... // Request URL does not exist else... // Error... <div id="results"> String K K custname=k AJAX を使用した高い対話性を誇るポートレットの構築 8

9 Kenesey Julia (910) Kensington Ken (488) Kerry Steve (542) Kiss Daniel (543) Klein Kevin (888) Kohen Jack (907) Kovacs Laszlo (431) custname=ke Kenesey Julia (910) Kensington Ken (488) Kerry Steve (542) AJAX を使用したポートレット間通信 JSR 168 Ajax A 2 2. B: <div> updatepage() JavaScript Search Results DOM A function updatepage() { document.getelementbyid("results").innerhtml = response[0].replace(/\n/g, ""); AJAX を使用した高い対話性を誇るポートレットの構築 9

10 B <div id="results"> <div> B B A B 4: Ajax 実行時のポートレットの接続 JSR 168 5: AJAX を使用した高い対話性を誇るポートレットの構築 10

11 1 <div> ID 2 PortletPreferences getvalue() detailaddress A function updatepage() { document.getelementbyid ("detailaddress<%=prefs.getvalue("linkid", "")%>"). innerhtml = response[0].replace(/\n/g, ""); B <div id= 'detailaddress<%=prefs.getvalue("linkid", "")%>'> </div> 未解決の問題点 Ajax 2 2 Ajax JavaScript 1 JavaScript ID 3 AJAX を使用した高い対話性を誇るポートレットの構築 11

12 iframes Oracle Portal iframes JSR 286 結論 Web JSR 168 API Ajax JSR 168 Ajax AJAX を使用した高い対話性を誇るポートレットの構築 12

13 AJAX を使用した対話性の高いポートレットの構築著者 : Peter Moskovits 2006 年 7 月 Oracle Corporation World Headquarters 500 Oracle Parkway Redwood Shores, CA U.S.A. 海外からのお問合せ窓口 : 電話 : ファックス : Copyright 2006, Oracle. 無断転載を禁ずこの文書はあくまで参考資料であり掲載されている情報は予告なしに変更されることがありますオラクル社は本ドキュメントの無謬性を保証しませんまた本ドキュメントは法律で明示的または暗黙的に記載されているかどうかに関係なく商品性または特定の目的に対する適合性に関する暗黙の保証や条件を含む一切の保証または条件に制約されませんオラクル社は本書の内容に関していかなる保証もいたしませんまた本書により契約上の直接的および間接的義務も発生しません本書は事前の書面による承諾を得ることなく電子的または物理的にいかなる形式や方法によっても再生または伝送することはできません Oracle はオラクル社またはオラクル社の関連会社 ( あるいはその両方 ) の登録商標ですその他の名前は各社の商標です

Microsoft Windows向けOracle Database 12cでのOracleホーム・ユーザーの導入

Microsoft Windows向けOracle Database 12cでのOracleホーム・ユーザーの導入 Oracle ホワイトペーパー 2013 年 7 月 Microsoft Windows 向け Oracle Database 12c での Oracle ホームユーザーの導入はじめに Oracle Database 12c Release 1(12.1) 以降では Microsoft Windows 上のOracle Databaseでインストール時に指定したOracleホームユーザーの使用がサポートされています