'Hello Ajax'
"Hello Ajax"! How to Do the Ajax Thing with Oracle JDeveloper
Building an Synchronous Ajax page
1) Open a new application by selecting File->New->New Application
2) Application Name: HelloAjax
3) Application Package Prefix: com.oracle.ajax.sample
4) Application template: No Template [All Technologies]
[pic]
5) Enter project name: Ajaxprj
[pic]
6) Expand the HelloAjax Node -> select New for project Ajaxprj
[pic]
7) Select HTML Page from the Web Tier/HTML section
[pic]
8) Use the HTML wizard to create an HTML page
[pic]
9) Enter filename: HelloAjax.html
[pic]
10) (Optional) Upload background image
(Optional) Change background color and Link color
Finish the Wizard by clicking Finish
[pic]
11) Creating a text file
Select Simple files->files from general category
[pic]
12) Enter filename: helloAjax.txt
[pic]
13) Creating a javascript file
Select javascript file from web tier -> HTML
[pic]
14) Enter filename: HelloAjax.js
[pic]
The text and the javascript files created
[pic]
15) Open the helloAjax.html -> from the component Palette select Script and drop it into the html document -> enter Src: helloAjax.js -> select Type:text/javascript
[pic]
16) Open the helloAjax.js and copy the code given below in the file
var 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.txt
type any text e.g “Hi Everyone! Have a nice day!”
[pic]
18) Open HelloAjax.html -> place cursor between .. -> 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");
}
}
[pic]
19) Open helloAjax.html source file -> copy the code give below in between ..
Copy the following code between ..
The Html file should look something like this.
[pic]
20) Run the Html file
[pic]
Output would look like -> Click Press Me
[pic]
Enhancing your Ajax application
1) Select New option in the Ajaxprj project -> Choose CSS file from Web Tier -> HTML
[pic]
2) Enter filename: helloAjax.css (it should be in public_html directory)
[pic]
3) Delete the default stylesheet
4) Enter the code given below in the stylesheet file
div.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;
}
[pic]
5) select New from Web tier -> Servlets -> HTTP Servlet
[pic]
6) Enter name: HelloAjax
[pic]
7) Add instance fields
private int counter = 0;
private String name = “”;
8) change servlet doGet method
public 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("Hello Ajax "+name+" ");
}
else
{
out.println("Hello Ajax "+name+" ");
}
out.close();
}
[pic]
9) Change the body of the html file to
The helloAjax.html will look something like this:
[pic]
10) Run the HTML
11) Enter any string
12) Click “Press Me”
[pic]
................
................
In order to avoid copyright disputes, this page is only a partial summary.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.