手机网站开发——在线阅读模块
来源:互联网 发布:粒子群算法java代码 编辑:程序博客网 时间:2024/06/08 15:07
手机浏览器的加载速度等限制了手机在线阅读的开发
在PC浏览器上,开发人员可以利用各种插件来进行在线阅读的开发;而手机浏览器的在线阅读插件几乎不存在;最终利用XMLHttpRequest进行开发
1:XMLHttpRequest 可以提供不重新加载页面的情况下更新网页,在页面加载后在客户端向服务器请求数据,在页面加载后在服务器端接受数据,在后台向客户端发送数据。可以接收任何形式的文档,但编码格式为UTF-8,否则读取的文件为乱码
2:不同的浏览器使用不同的方法来创建 XMLHttpRequest 对象。
Internet Explorer 使用 ActiveXObject。
其他浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。
要克服这个问题,可以使用这段简单的代码:
var XMLHttp=null;
if (window.XMLHttpRequest)
{
XMLHttp=new XMLHttpRequest()
}else if (window.ActiveXObject)
{
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
3:具体过程如下
XMLHttp.open('get', '../data/reading/book/txt_1.txt', true);
XMLHttp.onreadystatechange= ready;
XMLHttp.send(null);
open()函数,初始化 HTTP 请求参数;
open(method, url, async, username, password)method 参数是用于请求的 HTTP方法。
1) method值包括 GET、POST 和 HEAD
2) url 参数是请求的主体。大多数浏览器实施了一个同源安全策略,并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。
3) async 参数指示请求使用应该异步地执行。如果这个参数是 false,请求是同步的,后续对 send() 的调用将阻塞,直到响应完全接收。如果这个参数是 true 或省略,请求是异步的,且通常需要一个 onreadystatechange 事件句柄。
4) username 和 password 参数是可选的,为 url 所需的授权提供认证资格。如果指定了,它们会覆盖 url 自己指定的任何资格。
这个方法初始化请求参数以供 send() 方法稍后使用
上述代码利用open()函数初始化了HTTP请求函数,并利用send()函数将其发送,
send()函数
这个方法导致一个 HTTP请求发送。如果之前没有调用 open(),或者更具体地说,如果 readyState 不是 1,send() 抛出一个异常。否则,它发送一个 HTTP 请求,该请求由以下几部分组成:之前调用 open() 时指定的 HTTP 方法、URL 以及认证资格(如果有的话)。
一旦请求发布了,send() 把 readyState 设置为 2,并触发 onreadystatechange 事件句柄。
如果之前调用的 open() 参数 async 为 false,这个方法会阻塞并不会返回,直到 readyState 为 4 并且服务器的响应被完全接收。
否则,如果 async 参数为 true,或者这个参数省略了,send()立即返回,并且正如后面所介绍的,服务器响应将在一个后台线程中处理。
完全接收后,readyState将置为4function ready() {
if(XMLHttp.readyState==4) {
var length = XMLHttp.responseText.length;
for(var i=0; i<length; i++){
if(XMLHttp.responseText[i] == " "){
Text = Text + "<br />";
}
Text = Text + XMLHttp.responseText[i];
}
page_number = Math.ceil(length/5000);
show_currentpage(0);
}
}
send()函数发布请求后,进入ready()函数,进行readyState的判断,若为4,则表示数据准备好了,可以进行读取;返回的文本存储在XMLHttp.responseText中
遇到的问题:由于在读取文件的过程中,对换行符/Tab键/连续的空格只读取为一个空格,因此会造成在线浏览器排版的困难;到目前为止没有想到比较好的方法,比如对获取到的responseText进行判断,若每次遇到空格,则添加一个<br>标签进行换行,但这样对段内的空格也会做同样的处理,从而显示不正常
4:对文本进行分页阅读
思路:对获取到的文本responseText进行分段,每页显示2000字节(这个由自己定),定义show_currentpage(page)方法进行页面的切换
另外,每次跳转页面后,要回到页顶,$('body,html').animate({scrollTop:0},800);可以实现
利用monocle插件进行在线阅读,不需要安装其他东西或者配置环境,只需将下面的css和js文件包含进来
<link rel="stylesheet" type="text/css" href="tests.css" />
<link rel="stylesheet" type="text/css" href="monocore.css" />
<script type="text/javascript" src="monocore.js"></script>
Monocle.DEBUG = true;
// Initialize the reader element.
Monocle.Events.listen(
window,
'load',
function () { window.reader = Monocle.Reader('txt_content'); }
);
上面的语句初始化Monocle插件,并将id为txt_content控件里面的内容在插件中显示
遇到的困难:页面完成书本加载需要时间,而monocore插件将内容包含入其框架之内的js代码与书本内容
加载貌似是并行执行(也可能不是,不知道什么原因)的,导致出现bug,内容无法完全加载入monocore插件中
解决方法:XMLHttp.open('get', '../data/reading/book/txt_1.txt', false); 在打开本地文件时,将第三个
参数置为false,从而后面的ready()函数只能等加载完成后在进行操作,把monocore部分的代码放在ready()函数里面
这样就解决了问题
- 手机网站开发——在线阅读模块
- 手机网站开发——在线聊天室
- 手机网站开发——订餐模块
- 手机新闻阅读网站开发心得
- 手机开发实战40——手机模块设计1
- 手机开发实战41——手机模块设计2
- [方便WAP网站开发]在线手机WAP模拟器或软件
- 在线招聘网站开发截图(企业模块)
- Android源码在线阅读网站
- 程序员杂志在线阅读 豆瓣的架构—专访豆瓣网站的技术总监洪强宁
- Android开发—智能家居系列-----手机连接WIFI模块
- 手机网站开发——网页音频播放器
- 在线阅读电子书网站功能大比拼
- Java/Android源码在线阅读网站
- 怎么开发手机网站手机网站开发手机网站建设
- 手机开发网站
- 手机网站开发必修课
- 手机网站开发
- Windows Blue请愿清单:十五项必须改进的特性
- 完全卸载oracle11g
- 使用jQuery弹出层,信息框居中
- linux 安装lynx
- c++最新资料大全
- 手机网站开发——在线阅读模块
- 微软密谋恢复Windows开始按钮:引开发者质疑
- UIScrollView实现类似91助手抽屉效果
- xCode崩溃,设置全局断点
- 数据校验
- myeclipse内存溢出问题解决方法
- ARRAYSIZE:计算数组长度
- Resin远程信息泄露漏洞
- IOS控件UIScrollView