Hands on Despite what you might read and hear about Google's web dominance, this is not Google-owned world. Yahoo! may be playing second fiddle to the internet's favorite search and ads service, but it still plays one hell of a tune in terms of numbers of users and the services it offers.

If you use Yahoo! for your web search, then Yahoo! provides web services that may be included in web applications to generate dynamic content for an input.

In this article, I plan to follow up on my earlier addition of Asynchronous JavaScript and XML (AJAX) to your Google search, by looking at adding AJAX to web search using Yahoo! Web Services in Oracle JDeveloper 11g. Why JDeveloper 11g? Because this provides a new feature for web and AJAX development - an integrated JavaScript editor.

Limits of AJAX

AJAX is a web technique to transfer XML data between a browser and a server without reloading the web page. Ajax is implemented using the XMLHttpRequest object.

A limitation of XMLHttpRequest is that AJAX requests may be made only to the same web server that serves the web page from where the AJAX request is sent. If the web application is running on one server and the web service is on another server a XMLHttpRequest request does not get sent. Various methods are available to send an AJAX request to a remote server some of which are digitally signing your scripts and using an alternative XMLHttpRequest API. One of the methods, which we shall discuss in this article, is to use a proxy web server that routes AJAX requests from the web application to the web service.

Yahoo! Web Services provide various web search services and content that may be included to develop dynamic web applications. Yahoo! Web Search AJAX Web Services have an advantage over the Google web search AJAX web services. Yahoo! Web Services have the provision to search within a context; contextual web search. For example, search for the term "Eclipse" in the context of "Java IDE". The various Web Search Web Services provided by Yahoo! are discussed in following Table.

Before Yahoo! Web Service may be used, register with Yahoo Web Services to obtain an application identity with which Yahoo! Web Services may be accessed.

Create a web application

First, create a JDeveloper application, WebSearchApp, and project, WebSearchWebService. Create a JSP file, input.jsp, in the project. The web application URL, which is used to register with Yahoo! Web Services, is http://127.0.0.1:8988/WebSearchApp-WebSearchWebService-context-root/input.jsp. In the web application we shall use the Contextual Web Search service to submit a context-base web search query.

The request URL for the contextual web search web service is http://search.yahooapis.com/WebSearchService/V1/contextSearch. The required request parameters to a contextual web search query are appid and context. The value of the appid parameter is the application ID provided by Yahoo! Web Services and the context parameter specifies the context string in which the web search query is sent.

The XML response returned by the Contextual Web Search service conforms to the XML Schema http://search.yahooapis.com/WebSearchService/V1/WebSearchResponse.xsd. In the input.jsp add a form containing fields for application ID, query, results, and context. The form may be submitted using GET or POST, but to use a context with many search terms use the POST method.

Send an AJAX request

To send an AJAX request we shall use a proxy servlet that routes the XMLHttpRequest from the browser to the Yahoo! Web Service. If an XMLHttpRequest is sent without a proxy servlet the XMLHttpRequest does not get sent and an error, such as the one below, is generated.

Error: uncaught exception: Permission denied to call method XMLHttpRequest.open

A proxy servlet may be developed or the HTTP proxy servlet may be used. Download httpProxyPackage.jar. Add the proxy servlet JAR file to the Libraries of the WebSearchWebService project. To the web.xml file add <servlet/> and <servlet-mapping/> elements for the proxy servlet.

<servlet>
        <servlet-name>HttpProxy</servlet-name>
        <servlet-class>com.jsos.httpproxy.HttpProxyServlet</servlet-class>
        <init-param>
            <param-name>host</param-name>
            <param-value>http://search.yahooapis.com/WebSearchService/V1/contextSearch</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>HttpProxy</servlet-name>
        <url-pattern>/servlet/yahoo</url-pattern>
    </servlet-mapping>

The procedure to send an AJAX request is as follows:

1. Initiate an AJAX request from an HTML event such as a button click
2. Create a XMLHttpRequest object
3. Open a connection with the web service URL using the open() method of the XMLHttpRequest object
4. Register a callback function to be invoked when the Ajax request is complete
5. Send the AJAX request with the send() method
6. Update the web page with the web service response

In the input.jsp, to the input element of type button add a onclick event handler to invoke a JavaScript function displaySearchResults(). In the displaySearchResults function create an XMLHttpRequest object. XMLHttpRequest is supported as a native object in some browsers such as Netscape 6 or later and Internet Explorer 7 and as an ActiveXObject in other browsers such as IE 6.

Specify the proxy servlet URL to which an AJAX request is to be sent. Obtain the values for query, results and context request parameters from the input form. Open an XMLHttpRequest request using the open() method. Register a callback function that is to be invoked when the request state changes using the onreadystatechange property of the XMLHttpRequest object. Send the XMLHttpRequest request using the send() method. In the callback function check if the request is complete and invoke the JavaScript function processResponse() to update the web page with the Web Service response. The complete input.jsp is available in this zipped folder.

Integrated JavaScript editor

JDeveloper 11g includes an integrated JavaScript editor for creating JavaScript. In the previous section we added the JavaScript directly to the JSP, but the JavaScript may also be created in a separate .js file and the .js file added to the JSP using the <script/> tag. Create a JavaScript file by selecting File>New and in the New Gallery window Web Tier>HTML>JavaScript File. Copy the JavaScript from the input.jsp JSP to the JavaScript file and delete the JavaScript from the JSP.

One of the features of the JavaScript editor is syntax highlighting. To add syntax highlighting select Tools>Preferences and in the Preferences window Code Editor>Syntax Colors. Select JavaScript in the Language list. The Font Style, Foreground color and Background color may be set for the different JavaScript constructs in the Syntax Colors window.

JavaScript editor also provides code completion. As the JavaScript syntax varies in the different browsers we need to specify the browser for which code completion is to be implemented. Select JavaScript Editor in the Preferences window and select a Target Browser for code completion. In the JavaScript file right click and select Source>Completion Insight or Smart Completion Insight for code insight.

Another useful feature of the JavaScript editor is Go To Declaration, to navigate to or from a JavaScript variable or function. You can try this by selecting a use for the variable xmlHttpRequest and then right click and select Go To Declaration to go to the declaration of the xmlHttpRequest variable. JavaScript editor also provides brace matching and code folding.

Error underling and error audits are also helpful. Here's a simple way to test them: add an error by removing the '{' for a function declaration. An error analysis will then be run and the error underlined. Usages for a variable or function may be retrieved by selecting the variable/function and selecting Find Usages. For example, select xmlHttpRequest, right click and select Find Usages. The usages of the xmlHttpRequest variable get listed in the log window.

A JavaScript file is integrated with the Structure pane from which different variables and functions may be navigated to. JavaScript editor also provides refactoring to rename or delete a variable or function. To refactor, right click and select Refactor>Rename or Delete Safely. To add the JavaScript file to the input.jsp drag and drop the file from the Application navigator to the JSP. A <script/&gt element for the JavaScript file gets added to the JSP.

Run the AJAX web search

Next, we shall run the AJAX web application to send a query using AJAX an update the web page with the query response. Right click on input.jsp and select Run. In the web search form specify a query term and a context term. As an example, search for the term "AJAX" in the context of "web services". Click on the Submit Query button. The web page gets updated with the AJAX web service response.

More than one context terms may be specified and the number of results to be returned may also be specified. As an example specify results as five and specify context terms as "web services", "XML", and "ADF" for query term "AJAX". The specified number of web pages get displayed for the context based web search.

Conclusion

You now have the recepie for building fast and efficient web services. Contextual web search using Yahoo Web Services will help you narrow down your search results. The addition of AJAX will help reduce response times and the amount of network bandwidth consumed as the complete web page is not reposted.®