Hybrid -- use Ajax and webviewajax in WebView

Hybrid -- use Ajax and webviewajax in WebView

For apps in the Hybrid framework, Ajax is used. It should be noted that UIWebViewDelegate does not monitor Ajax requests, that is, when Ajax code is executed again, shouldStartLoadWithReuqest and other methods will not be called.

The solution requires Javascript and navtive code to work together. For the basic principle, refer to this article. The process is in

When you create an Ajax request in Javascript handler, you need to put the Javascript code ajax_handler.js in the app.

var s_ajaxListener = new Object();s_ajaxListener.tempOpen = XMLHttpRequest.prototype.open;s_ajaxListener.tempSend = XMLHttpRequest.prototype.send;s_ajaxListener.callback = function () {    window.location='mpAjaxHandler://' + this.url;};XMLHttpRequest.prototype.open = function(a,b) {  if (!a) var a='';  if (!b) var b='';  s_ajaxListener.tempOpen.apply(this, arguments);  s_ajaxListener.method = a;    s_ajaxListener.url = b;  if (a.toLowerCase() == 'get') {    s_ajaxListener.data = b.split('?');    s_ajaxListener.data = s_ajaxListener.data[1];  }}XMLHttpRequest.prototype.send = function(a,b) {  if (!a) var a='';  if (!b) var b='';  s_ajaxListener.tempSend.apply(this, arguments);  if(s_ajaxListener.method.toLowerCase() == 'post')s_ajaxListener.data = a;  s_ajaxListener.callback();}

The "mpAjaxHandler" is a custom Scheme used to identify whether a request is sent by Ajax.

On the App side

Obtain js

static NSString *JSHandler;+ (void)initialize {    JSHandler = [[NSString stringWithContentsOfURL:[[NSBundle mainBundle] URLForResource:@"ajax_handler" withExtension:@"js"] encoding:NSUTF8StringEncoding error:nil] retain];}

After loading the page, execute this section of js

- (void)webViewDidStartLoad:(UIWebView *)webView {    [webView stringByEvaluatingJavaScriptFromString:JSHandler];}

Intercepts the Request and prevents the webview URL from being changed.

#define CocoaJSHandler          @"mpAjaxHandler"- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {    if ([[[request URL] scheme] isEqual:CocoaJSHandler]) {        NSString *requestedURLString = [[[request URL] absoluteString] substringFromIndex:[CocoaJSHandler length] + 3];        NSLog(@"ajax request: %@", requestedURLString);        return NO;    }    return YES;}

Ajax knowledge

Ajax is widely used on web websites as Asynchronous Javascript. The following is an example of w3school's simple use of Ajax:

Click the button to obtain the ticket through Ajax. For more information, see stackoverflow.


Who will give an ajax instance in jquery?
Good!
$. Post (url, {id: 123, name: 'jar'}, function (returndata ){
Alert (returndata );
});
----------------
It's easy. If you don't understand it, ask who is the best. Thank you! ^ _*

How to Use AJAX to develop WEB applications?
I. Introduction

AJAX, An Asynchronous JavaScript and XML acronyms, is a recent technical term. Asynchronous means that you can send a request to a server through Hypertext Transfer Protocol (HTTP) and continue processing other data while waiting for the response. This means that, for example, you can call a server script to retrieve data from a database in XML format and send the data to the server script stored in a database, or simply load an XML file to fill your Web site without refreshing the page. However, while the new technology provides great capabilities, it also raises a lot of debate over the "Back" button. This article will help you determine when AJAX is the best choice in the real world.

First, I suppose you have a basic understanding of the acronyms JavaScript and XML. Although you can request any types of text files through AJAX, I will focus on XML here. I will explain how to use AJAX in the real world and how to evaluate its value in a project. After reading this article, you will understand what AJAX is, under what circumstances, why, and how to use this technology. You will learn how to create objects, send requests, and customize responses while maintaining an intuitive user experience.

I have created a sample project suitable for this article (you can download the source code ). This example implements a simple request-it loads an XML file containing the page content and analyzes the data to display it in an HTML page.
II. General attributes and Methods

Tables 1 and 2 provide an overview of properties and methods-they are supported by browsers such as Windows Internet Explorer 5, Mozilla, Netscape 7, Safari 1.2, and Opera.

Table 1 attributes

Attribute description

Onreadystatechange the event processor is activated when the request object changes.

ReadyState returns the value indicating the current status of the object.

ResponseText is the version of the response string from the server.

ResponseXML is a DOM-compatible document object from the server's response.

Status is the status code of the response from the server.

StatusText returns status messages in the form of a string.

Table 2 Method

Method description

Abort () cancels the current HTTP request.

GetAllResponseHeaders () Retrieves all HTTP header values.

GetResponseHeader ("headerLabel") retrieves an HTTP header value from the response body.

Open ("method", "URL" [, asyncFlag [, "userName" [, "password"]) initializes an MSXML2.XMLHTTP request and specifies a method from the request, URL and authentication information.

Send (content) sends an HTTP request to the server and receives the response.

SetRequestHeader ("label", "value") specifies the name of an HTTP header.
III. Where to start

First, you need to create an XML file-we will request it and analyze it as the page content. The file you are requesting must reside on the same server as the target project.

Next, create the requested HTML file. This request occurs when the page is loaded by using the onload method in the page body. Next, the file needs an ID div tag, so that we can locate it when we are ready to display the content. When you finish all of this, the subject of your page goes up as follows:
<Body onload = "makeRequest ('xml/content. xml');">

<Di ...... remaining full text>