Hybrid框架下的app，使用的Ajax。须要注意的是UIWebViewDelegate不会监測到Ajax的request。也就是再运行Ajax代码时。shouldStartLoadWithReuqest等方法并不会被调用。

其解决方法须要Javascript和navtive code一起来做，其基本原理可參考这片文章，其流程是在

Javascript handler中每创建Ajax的请求时。须要将这段js存在ajax_handler.js放在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();

}

当中的"mpAjaxHandler"为自己定义的Scheme，用于差别request是否是由Ajax发出的。

在App端

获得js

static NSString *JSHandler;

+ (void)initialize {

    JSHandler = [[NSString stringWithContentsOfURL:[[NSBundle mainBundle] URLForResource:@"ajax_handler" withExtension:@"js"] encoding:NSUTF8StringEncoding error:nil] retain];

}

加载页面后，运行这段js

- (void)webViewDidStartLoad:(UIWebView *)webView {

    [webView stringByEvaluatingJavaScriptFromString:JSHandler];

}

拦截住Request，不让webview的URL做出改变

#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相关知识

Ajax作为异步Javascript广泛应用在web站点上。

以下是一个来自于w3school的简单使用Ajax的样例：

<html>

<head>

<script type="text/javascript">

function loadXMLDoc()

{

var xmlhttp;

var txt,x,i;

if (window.XMLHttpRequest)

  {// code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp=new XMLHttpRequest();

  }

else

  {// code for IE6, IE5

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

xmlhttp.onreadystatechange=function()

  {

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

    xmlDoc=xmlhttp.responseXML;

    txt="";

    x=xmlDoc.getElementsByTagName("title");

    for (i=0;i<x.length;i++)

      {

      txt=txt + x[i].childNodes[0].nodeValue + "<br />";

      }

    document.getElementById("myDiv").innerHTML=txt;

    }

  }

xmlhttp.open("GET","http://www.w3school.com.cn/example/xmle/books.xml",true);

xmlhttp.send();

}

</script>

</head>

<body>

<h2>My Book Collection:</h2>

<div id="myDiv"></div>

<button type="button" onclick="loadXMLDoc()">GET Book List</button>

</body>

</html>

点击button。通过Ajax的方式获得书单。部分内容參考于stackoverflow

Hybrid--WebView中使用Ajax的更多相关文章

  1. 重新想象 Windows 8.1 Store Apps (81) - 控件增强: WebView 之加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Contract 分享 WebView 中的内容, 为 WebView 截图

    [源码下载] 重新想象 Windows 8.1 Store Apps (81) - 控件增强: WebView 之加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Co ...

  2. 在WebView中如何让JS与Java安全地互相调用

    在现在安卓应用原生开发中,为了追求开发的效率以及移植的便利性,使用WebView作为业务内容展示与交互的主要载体是个不错的折中方案.那么在这种Hybrid(混合式) App中,难免就会遇到页面JS需要 ...

  3. 重新想象 Windows 8.1 Store Apps (81) - 控件增强: 加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Contract 分享 WebView 中的内容, 为 WebView 截图

    原文:重新想象 Windows 8.1 Store Apps (81) - 控件增强: 加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Contract 分享 Web ...

  4. Hybrid App中原生页面 VS H5页面（分享）

    本文部分转自  http://www.jianshu.com/p/00ff5664e000 现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有“混合的” ...

  5. WebView中JS调用Android Method 遇到的坑整理

    WebView是android中常用的一个组件,其作用是展示网页,并让网页和android app进行一些业务逻辑上的交互. 其坑无数,相信用过的都知道,一个一个来解决吧. 1.怎么互调: <! ...

  6. Hybrid App中原生页面 VS H5页面

    Hybrid App中原生页面 VS H5页面   现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有"混合的"意思). Nativ ...

  7. Jquery中的Ajax

    AJAX: * jQuery中的Ajax * 封装第一层 - 类似于原生Ajax的用法 * $.ajax() - 最复杂 * 选项 * url - 请求地址 * type - 请求类型,默认为GET ...

  8. jQuery入门（4）jQuery中的Ajax应用

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  9. 混合开发 webview 中file 控件 点击后无反应解决方法

    最近在做个项目 ,需要 使用 file 控件上传 图片到服务器 ,在手机浏览器中 可以正常选择照片,但是放到 android 应用中的webview中,file 控件点击后就没有反应. 百度了一番后, ...

  10. 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】

    一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...

随机推荐

  1. hdu 2999 sg函数（简单博弈）

    Stone Game, Why are you always there? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/ ...

  2. Docker 架构详解

    Docker 的核心组件包括: Docker 客户端 - Client Docker 服务器 - Docker daemon Docker 镜像 - Image Registry Docker 容器 ...

  3. 【vijos1144】小胖守皇宫（树形DP）

    描述 huyichen世子事件后,xuzhenyi成了皇上特聘的御前一品侍卫. 皇宫以午门为起点,直到后宫嫔妃们的寝宫,呈一棵树的形状:某些宫殿间可以互相望见.大内保卫森严,三步一岗,五步一哨,每个宫 ...

  4. jquery插件的基本写法

    (function($){ var a={name:'2222',age:5555} var b={sex:'男',grade:5555} var c=$.extend({},a,b);//合并到新的 ...

  5. PXC部署，配置，操作原理

    参考:https://www.cnblogs.com/kevingrace/p/5685371.html?utm_source=itdadao&utm_medium=referra       ...

  6. yii使用bootstrap分页样式

    Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstra ...

  7. React-Native Navigator 过渡动画卡顿的解决方案

    在RN0.44版本之前,路由导航跳转几乎是使用的是Navigator组件,在0.44版本以后就不推荐使用了,官方推荐的是react-navigation,当然还是可以在废弃的库中找到: import ...

  8. 一、git clone

    一.git clone $ git clone <版本库的网址> //该命令会在本地主机生成一个目录,与远程主机的版本库同名 $ git clone <版本库的网址> < ...

  9. 利用例子来理解spring的面向切面编程

    最近学习了spring的面向切面编程,在网上看到猴子偷桃的例子,觉得这种方式学习比书本上讲解有趣多了,也便于理解.现在就来基于猴子偷桃写个基本的例子. maven工程:

  10. SD 胡策 Round 1 T3 彩尾巴猹的二进制数

    发现一个区间[L,R]代表的2进制数是3的倍数,当且仅当从L开始的后缀二进制值 - 从R+1开始的后缀二进制值 是 3 的倍数 (具体证明因为太简单而被屏蔽). 于是我们就可以在每个点维护从它开始的后 ...