OPhone-based Widget online instance development (1) (1)

Overview

Next we will use a real-time update rate to view the program to illustrate the specific development process of the online widgets on the OPhone. Our instance is called exchange rate communication. We can view the exchange rate relationships between various mainstream currencies. Let's take a look at the overall effect.

 

Basic knowledge

To implement the Widget networking example, we need to know about Ajax and DOM in two aspects. Below we will briefly introduce the content we need to use in this example. AjaxAsynchronousJavaScriptandXML, Asynchronous JavaScript and XML) Ajax uses the JavaScript-based XMLHttpRequest object to send asynchronous requests to the Web server to obtain data.

• Android Widget Development Series
• Android Widget development details
• How to Build Activi in Android Widget Development
• Comprehensive Understanding of Web Widget Development
• JIL Widget development tutorial

1) There are two request methods:

Get: query data from the server

Post: send data to the server

2) XMLHttpRequest object methods include:

Open "method", "URL", "async"): sets the request method.

SetRequestHeader: Set the header information of the sent request, including the request Content format and length. The most common method is to set the request format, such as setRequestHeader ("Content-type ", "text/xml ");

Send (): send a request

3) attributes of the XMLHttpRequest object include:

Onreadystatechange: event processing triggered when the status changes

ReadyState: the preceding five states: 0: not initialized; 1: loading; 2: loading; 3: interaction; 4: Completed. We can handle different events in different States. For example, if status 2 is loaded, we can register an onLoading function. In status 4, we can register onComplete)

ResponseText: returned text, which can be directly assigned to an element in html in the form of innerHTML.

ResponseXML: returned content in xml format

Status: the Status of the request. There are many requests. Among them, 200 is required, indicating that the request is successful. The requested document or file has been found and is returned correctly, we will also pay attention to some status of request failure, the most common example is 404, indicating that the requested file is not found

StatusText: text description corresponding to the preceding status, for example, 200 corresponds to OK, 404 corresponds to NotFound

Now let's create a basic Ajax request and Data Processing framework.

The basic content is the first choice to create an XMLHttpRequest type object, then set the basic parameters, then determine the Request status, and provide a callback function to enhance data processing.

We can create a network. js file and copy the following code.

 
 

  
  
/*** Make a request for an XML document.
  
  
** @ Param url * the url for the 'get' call
  
  
* @ Param onSuccess * a call-back for successful completion of request * @ param onError
  
  
* A call-back for request failure */var globalReq; function requestXML (url, onSuccess, onError)
  
  
{// Create an XMLHttpRequest objectGlobalReq=NewXMLHttpRequest (); if (globalReq)
  
  
{// Send the data request globalReq. open ('get', url, true) asynchronously to the given url in Get mode );
  
  
// Set the data format of the request to xml globalReq. setRequestHeader ("Content-type", "text/xml ");
  
  
// The asynchronous callback function traces changes in the Request status.GlobalReq. onreadystatechange=Function()
  
  
{// If the status is not 4, that is, if the request is not completed, it will not be processed and will be returned directly until the whole request process if (globalReq. readyState! = 4)
  
  
{Return;} // if the request process is completed, determine whether the returned status indicates success, that is, whether it is 200 if (GlobalReq. status= 200)
  
  
{// If the request data is successful, onSuccess (globalReq. responseXML) will be processed in the xml format of the request in the callback function onSuccess );}
  
  
Else {// if the request data fails, print the onError ("Web data unavailable" + globalReq. statusText) Cause in the onError callback function );}};
  
  
// Send the request globalReq. send (null );}}
  
  
 
 
 

With the previous introduction and detailed comments in the code, we should be able to understand requestXML, a function requesting xml data in the form of Ajax. It should be noted that, because we are developing the JILWidget of OPhone, we do not have to add compatibility judgments like the ones used in the desktop browser. At the same time, we are only interested in the status of successful or failed data requests after the request is completed, therefore, there are only two callback functions: onSuccess and onError.

In this way, when we need to request network xml data, we can include the above network in the html file. js file, and then upload the request URL and the success and failure call callback function.