"Hello Ajax"! How to Do the Ajax Thing with Oracle JDeveloperBuilding an Synchronous Ajax page1) Open a new application by selecting File->New->New Application2) Application Name: HelloAjax3) Application Package Prefix: com.oracle.ajax.sample4) Application template: No Template [All Technologies]5) Enter project name: Ajaxprj6) Expand the HelloAjax Node -> select New for project Ajaxprj7) Select HTML Page from the Web Tier/HTML section8) Use the HTML wizard to create an HTML page9) Enter filename: HelloAjax.html10) (Optional) Upload background image(Optional) Change background color and Link colorFinish the Wizard by clicking Finish11) Creating a text fileSelect Simple files->files from general category12) Enter filename: helloAjax.txt13) Creating a javascript fileSelect javascript file from web tier -> HTML14) Enter filename: HelloAjax.jsThe text and the javascript files created15) Open the helloAjax.html -> from the component Palette select Script and drop it into the html document -> enter Src: helloAjax.js -> select Type:text/javascript16) Open the helloAjax.js and copy the code given below in the filevar xmlHttpRequestHandler = new Object();xmlHttpRequestHandler.createXmlHttpRequest = function(){ var XmlHttpRequestObject; if (typeof XMLHttpRequest != "undefined"){ XmlHttpRequestObject = new XMLHttpRequest(); } else if (window.ActiveXObject){ // look up the highest possible MSXML version var tryPossibleVersions=["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "Microsoft.XMLHttp"]; for (i=0; i< tryPossibleVersions.length; i++){ try{ XmlHttpRequestObject = new ActiveXObject(tryPossibleVersions[i]); break; } catch (xmlHttpRequestObjectError){ //ignore } } } return XmlHttpRequestObject;}17) Open helloAjax.txttype any text e.g “Hi Everyone! Have a nice day!”18) Open HelloAjax.html -> place cursor between <head> .. </head> -> select Html Common -> Script from the component palette -> copy the following code in the javascript code content in the Content text area.function doTheAjaxThing(){ var PAGE_SUCCESS = 200; var requestObject = xmlHttpRequestHandler.createXmlHttpRequest(); requestObject.open("Get","helloAjax.txt",false); requestObject.send(null); if (requestObject.status==PAGE_SUCCESS){ var div_handle = document.getElementById("message"); //check if DIV element is found if(div_handle){ div_handle.innerHTML+=''+requestObject.responseText; } } else{ alert ("Request failed"); }}19) Open helloAjax.html source file -> copy the code give below in between <body>..</body><input type="button" value="Press Me" onclick="doTheAjaxThing();"/><div id="message"></div>Copy the following code between <head>..</head><meta http-equiv="pragma" content="no-cache"></meta>The Html file should look something like this.20) Run the Html file Output would look like -> Click Press MeEnhancing your Ajax application1) Select New option in the Ajaxprj project -> Choose CSS file from Web Tier -> HTML2) Enter filename: helloAjax.css (it should be in public_html directory)3) Delete the default stylesheet4) Enter the code given below in the stylesheet filediv.message b.red{ background-color: gray; color: RED; font-family: Arial, Helvetica, sans-serif;}div.message b.green{ background-color: yellow; color: GREEN; font-family: Arial, Helvetica, sans-serif;}5) select New from Web tier -> Servlets -> HTTP Servlet6) Enter name: HelloAjax7) Add instance fieldsprivate int counter = 0;private String name = “”;8) change servlet doGet methodpublic void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{ ++counter; name = request.getParameter("name") != null?(String)request.getParameter("name"):null; //init cap name="From "+name; response.setContentType(CONTENT_TYPE); PrintWriter out = response.getWriter(); if(counter % 2 == 0) { out.println("<b class='green'>Hello Ajax "+name+" </b><br/>"); } else { out.println("<b class='red'>Hello Ajax "+name+" </b><br/>"); } out.close();}9) Change the body of the html file to<body> <form name="form1" action=""> <input type="button" value="Press Me" onclick="doTheAjaxThing();"/> <input type="text"id="name" name="name"/> </form> <div id="message" class="message"></div></body>The helloAjax.html will look something like this:10) Run the HTML11) Enter any string12) Click “Press
View Full Document
Unlocking...