使用jquery ajax代替iframe

ThinkTank_引擎 2016-01-04

展開全文

大家在實際編寫網頁時可能會遇到網頁中需要嵌套網頁的情況，這時候通常想法就是通過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中。