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. scrapy之小试身手

    要爬取的网址是:http://quotes.toscrape.com/ 磕磕绊绊的写完了 spiders import scrapy from kkk.items import * class Quo ...

  2. Vue列表渲染，改变数据视图层监测不到的问题

    由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue 当你修改数组的长度时,例 ...

  3. hibernate 4.3 在使用获取数据获取不到数据库中最新变更的数据问题解决

    hibernate 4.3 在使用获取数据获取不到数据库中最新变更的数据问题解决,应该是因为缓存问题 问题过程和现象: 查询一个数据列表=>数据库中手动update了数据=>刷新页面,数据 ...

  4. centos7配置国内yum源

    文章目录 1.什么是yum仓库? 2.yum仓库配置 2.1.阿里镜像仓库配置 2.1.1.配置步骤 2.1.2.epel源 安装和配置 2.1.3.查看yum源 2.2.配置 清华大学镜像仓库 1. ...

  5. 如何选择IO流

    1)确定是数据源和数据目的(输入还是输出) 源:输入流 InputStream Reader 目的:输出流 OutputStream Writer 2)明确操作的数据对象是否是纯文本 是:字符流Rea ...

  6. luogu 3709 大爷的字符串题 构造 莫队 区间众数

    题目链接 题目描述 给你一个字符串a,每次询问一段区间的贡献 贡献定义: 每次从这个区间中随机拿出一个字符\(x\),然后把\(x\)从这个区间中删除,你要维护一个集合S 如果\(S\)为空,你\(r ...

  7. 52深入理解C指针之---不透明指针

    该系列文章源于<深入理解C指针>的阅读与理解,由于本人的见识和知识的欠缺可能有误,还望大家批评指教.一.size_t:用于安全表示长度,所有平台和系统都会解析成自己对应的长度 1.定义:s ...

  8. 算法 & 数据结构——收纳箱算法？？？

    . 最近工作上有一个需求,需要将图片打包成图集,以便于让资源更紧凑,利用率更高,提升性能,游戏行内的同志应该很熟练这个操作．通常我们需要用一个app来完成这项工作,最出名的莫过于Texture Pac ...

  9. AxureRP8 实现时间功能

    利用AxureRP8中空间的动态面板的状态改变时间设置文本的值,从而实现时间功能,如下内容. 1.新建index页面,如已有index页面忽略这步即可. 2.拖入一个文本标签,将文本标签的名称命名为: ...

  10. loading上下左右居中

    .loading { width: 50px; height: 60px; text-align: center; font-size: 10px; position:fixed; left:50%; ...