手机网站开发——在线阅读模块

手机浏览器的加载速度等限制了手机在线阅读的开发

在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将置为4

function 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()函数里面
这样就解决了问题