奇思怪想——ajax加载页面导航

　　ajax现在运用的十分广泛，如果不会ajax你都不好意思说你会js。。。。。。真是尴尬，我就只会一点点。

　　恩，之前有想过用iframe做静态网页的模板，因为有些朋友拜托的网页都很简单，静态的，一般都是一个统一的导航，然后有几个简单的不同的子页面之类的。所以我打算弄个简单的模板，用来使用在这类页面上，iframe的话，js操作的时候会遇到this指针指向错乱（全局情况下），总是使用parent等麻烦事情。

　　后来想到用ajax，用ajax调用页面内容然后加载进入我需要的页面，这也可以实现统一。

　　好的，请求ajax并不是很大的问题，主要是

　　　　1.如何把ajax请求的html字符串截取到我需要的dom节点

　　　　2.或者是直接返回个document，然后我再在这里获取。

　　不过直接返回document节点好像有些问题，因为我的是本地页面，不能设置返回头部，结果返回的是个html文档处理方式，responseText就是这个html字符串，但是responseXML是null，暂时不知道如何解决这种方式

　　另一种方式是直接以html字符串提取，但是。。。。我正则比较渣，不知道如何实现提取所需的dom节点（多层嵌套不知道如何判断关闭标签），所以就用了生成html元素，然后把字符串innerHTML进去，然后再在html元素内遍历节点，选择需要的元素

 ..恩，为了方便，写了个“类”（js说类总觉得很难受），源码如下：

            var PageDom = function(loadHtmlSrc, replaceID) {
                if (typeof loadHtmlSrc == "string" && replaceID) {
                    this.loadHtmlSrc = loadHtmlSrc;
                    this.xhr = null;
                    this.replaceID=replaceID;                                        

                    this.attr = "data-role";
                    this.attr_value = "page";

                    this.eachFlag = false;

                    this.domArray = [];

                    this.getLoadHtml();
                }
                if (typeof loadHtmlSrc != "string") {
                    alert('初始化LoadHtml对象错误，传递加载文件地址参数不存在或类型错误');
                }
                if(!replaceID){
                    alert('初始化LoadHtml对象错误，未传递取缔dom的ID值');
                }
            }

            /**
            这个方法是用来获取欲加载的页面作用
            @method getLoadHtml            
            */
            PageDom.prototype.getLoadHtml = function() {
                var xhr = new XMLHttpRequest();
                var bodyDom = null;
                var that = this;

                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4) {
                        if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304) {
                            console.log("请求成功");
                            console.log(xhr);
                            that.xhr = xhr;

                            bodyDom = that.initHtmlDom();
                            that.findTheDom(bodyDom);
                            document.getElementById(that.replaceID).appendChild(that.domArray[0]);
                        } else {
                            alert("请求不成功");
                            console.log("错误码为：" + xhr.status);
                            console.log("错误说明为：" + xhr.statusText);
                        }
                    }
                }

                xhr.open("get", that.loadHtmlSrc, true);
                xhr.send(null);
            }

            /**
            这个方法用来转化html字符串为html节点，并提取body节点返回
            @return {object} 返回一个body节点
            */
            PageDom.prototype.initHtmlDom = function() {
                var htmlDom = document.createElement('html');
                htmlDom.innerHTML = this.xhr.responseText;
                return htmlDom.children[1];
            }

            /**
            这个方法是用来循环遍历节点寻找我们需要的节点                                                                                                                                                                       
            @method findTheDom   
            @param {object} 需要遍历节点的dom                                                                                                                                                                                                                                                 
            */
            PageDom.prototype.findTheDom = function(dom) {
                var childDom = dom.children;
                if (childDom.length > 0) {
                    for (var i = 0, max = childDom.length; i < max; i++) {
                        if (childDom[i].getAttribute(this.attr) == this.attr_value) {
                            this.eachFlag = true;
                            this.domArray.push(childDom[i]);
                            return;
                        }
                    }
                }
                if (i == max) {
                    for (var j = 0, maxJ = childDom.length; j < maxJ; j++) {
                        this.findTheDom(childDom[j])
                    }
                }
            }

使用规范：

            window.onload = function() {
                var addDom = new PageDom('ziwen.html',"page");                
            }

 

前面参数是请求的地址，后面参数是本页面的某个id，提取标志位data-role="page"（这个和jquery mobile的一样，为了方便理解，可以直接在对象上更改这个配置，this.attr = "data-role";this.attr_value = "page"; ）提取出的dom节点作为page的子节点插入本页面