使用jquery ajax代替iframe

大家在实际编写网页时可能会遇到网页中需要嵌套网页的情况，这时候通常想法就是通过iframe标签。

但实际用过的人都知道其有种种的不方便，比较直观的问题就是iframe的自适应高度，这也是处理起来比较麻烦的问题，随便百度下都是一大串的代码。

iframe貌似还有个重大的缺点，那就是搜索引擎的“爬虫”程序无法解读这种页面，当“爬虫”遇到多个页面嵌套的网页时只看到框架却找不到链接，然后认定此网站是死站点并离开。

学过SEO（搜索引擎优化）的朋友都知道，这对网页无疑是毁灭性的打击。

 

但是我们确实需要嵌套网页怎么办？比如：

这里拿个微信举例，用户都知道当切换下面的功能时顶部的页头及询问的工具栏样式是不变的。所以我们只需要在用户点击下面不同的功能按钮时改变中间的内容即可。

那即使不考虑SEO，至少布局上有没有比iframe更方便的东西呢?jquery ajax就能做到，它不仅能发起请求还能装载页面。

 

稍微介绍下jquery ajax，首先我们来比较下传统和jquery的ajax的不同

传统javascript ajax封装函数：

function ajax(method,url,param,flag,returnFun){
    var httpRequest="";
    if(window.XMLHttpRequest){
        httpRequest=new XMLHttpRequest();
    }else if(window.ActiveXObject){
        httpRequest=new ActiveXObject("Microsoft.XMLHTTP");
    }
    httpRequest.onreadystatechange=function(){
        if(httpRequest.readyState==4 && httpRequest.status==200){
            returnFun(httpRequest.responseText);
        }
    };
    if(method=="get"){
        var queryString="";
        if(param !="" || param !=null){
            queryString="?"+param;
        }
        httpRequest.open("get",url+queryString,flag);
        httpRequest.send(null);
    }else if(method=="post"){
        httpRequest.open("post",url,flag);
        httpRequest.setRequestHeader("content-type","application/x-www-form-urlencoded");
        httpRequest.send(param);
    }
}

封装后的写法：

ajax("post","../login.do","username="+username+"&pwd="+pwd,true,function(text){}

参数：1.请求方式 2.请求路径 3.参数传递 4.是否异步刷新 5.回调函数

jquery ajax：

$.ajax({ 选项 })

jquery ajax的选项有很多，简单例几个常用的比如：

data：数据

cache：是否缓存

success/error：成功/失败时的回调函数

type：请求类型

url：请求路径

要想更深入的了解可以下个jquery API看看。

 

比较实用的两种用法

第一种用法，对服务器的数据进行操作：

    var username="jack";
    var password=123;
    $.ajax({
        type:"post",
        url:"../insert.do",
        data:"username="+username+"&password="+password,
        success:function(msg){
            if(msg=="ok"){
                alert("complete");
            }    
        }
    })

这就是个最简单的通过node.js添加数据的jquery ajax请求。

type设置类型为post；url设置请求路径；data设置要传递的参数，注意写法；如果要查询数据，回调函数中的回调值msg一般转换为JSON字符串的格式传回，要显示出来通过JSON.parse(msg)转换为JSON对象。

 

第二种用法，就是如何装载页面：

     $.ajax({
         url: "index.html",
         cache: false,
         success: function(html){
             $("#content").html(html);
         }
     });

注意此时回调函数的返回值不再是JSON字符串类型的数据了，而是html网页。

做个简陋的例子：

 <div id="content" style="border: 1px solid red;width: 210px"></div>
    <button onclick="turnPage('weixin.html')">微信</button>
    <button onclick="turnPage('tongxunlu.html')">通讯录</button>
    <button onclick="turnPage('zhaopengyou.html')">找朋友</button>
    <button onclick="turnPage('wo.html')">我</button>

 function turnPage(url){
        $.ajax({
            type:"post",
            url:url,
            success:function(html){
                $("#content").html(html);
            }
        })
    }

设置一id为content的没有定义高度的div，下有四个按钮对应四个不同路径。路径值作为参数传递给turnPage函数，获取指定页面的所有内容，将获取的内容装入id为content的div中。

点击“微信”跳转到weixin.html页面，其中只有一个h1标签：

点击“找朋友”跳转到zhaopengyou.html页面，其中只有一个p标签

可以看到，jquery ajax不仅可以将页面装载到想要的地方，同时框架高度也是根据装载页面内容的高度自动变化的，这也是用jquery ajax来装载页面的优势之一。

 

感谢您的浏览，希望能对您有所帮助。