javascript範例 - javascript超連結語法




如何使一個JavaScript像Disqus或IntenseDebate (2)

我想創建一個應用程序，可以顯示在任何網頁，就像Disqus或IntenseDebate在文章和網頁上呈現。

它將顯示一個迷你電子商務店面。

我不知道如何開始。 有沒有這些“小部件”的示例代碼，框架或設計模式？

例如，我想展示產品。 我應該首先創建一個web服務或RSS列出所有這些？ 或者，其中一個Ajax腳本可以簡單地消化一個XHTML網頁並顯示它？

感謝任何提示，我真的很感激它。

對於Disqus或IntenseDebate，我沒有做太多的工作，但是我知道如何去做這樣一個小部件。 小部件的實際顯示部分將使用JavaScript生成。 所以說，你有一個ID為commerce_store的div標籤。 您的JavaScript代碼將在文檔第一次加載（或者當一個Ajax請求改變頁面）時搜索文檔，並查找是否存在commerce_store div。 找到這樣的容器後，它會自動生成所有必要的HTML。 如果你還不知道如何做到這一點，你可以穀歌動態添加JavaScript元素。 我建議為你的小部件製作一個自定義的JavaScript庫。 這不需要太瘋狂。 像這樣的東西： 

window.onload = init(){
    widget.load();
}
var widget = function(){
    this.load = function(){
        //search for the commerce_store div
        //get some data from the sql database
        var dat = ajax('actions/getData.php',{type:'get',params:{page:123}});
        //display HTML for data
        for (var i in dat){
            this.addDatNode(dat[i]);
        }
    }
    this.addDatNode = function(stuff){
        //make a node
        var n = document.createElement('div');
        //style the node, and add content
        n.innerHTML = stuff;
        document.getElementById('commerce_store').appendNode(n);
    }
}

當然，你需要設置一些類型的AJAX框架來獲取數據庫信息和事物。 但是這不應該太難。

對於Disqus和IntenseDebate，我相信評論形式和一切都只是HTML（通過JavaScript生成）。 腳本的實際“插件”部分將是ASP，PHP，SQL等的後台框架。最簡單的方法可能只是一些PHP和SQL代碼。 SQL將用於將所有註釋或銷售信息存儲到數據庫中，而PHP將用於操作數據。 像這樣的東西： 

function addSale(){ //MySQL code here };
function deleteSale(){ //MySQL code here };
function editSale(){ //MySQL code here };
//...

而且你的大PHP文件將會擁有你的小部件所需要做的所有動作（關於改變數據庫），但是，即使有了這個大的PHP文件，仍然需要用你的ajax框架來調用單獨的函數。回顧一下JavaScript框架的actions/getData.php請求，Actions指的是一個PHP文件夾，每個方法一個，例如addSale.php： 

include("../db_connect.php");
db_connect();
//make sure the user is logged in
include("../authenticate.php");
authenticate();
//Get any data that AJAX sent to us
var dat = $_GET['sale_num'];
//Run the method
include("../PHP_methods.php");
addSale(dat);

你想為PHP_methods和運行文件分開文件的原因是，你可能有多個PHP_methods文件。 您可以使用三種方法API，一種用於顯示內容，一種用於請求內容，另一種用於更改內容。 一旦你開始重複使用你的方法，最好把它們放在一個地方。 重寫一次，到處改寫。

所以，真的，這就是所有你需要的部件。 當然，你會想要一個安裝腳本，設置商業數據庫和所有。 但是實際的小部件只是一個包含上述腳本文件的文件夾：

  1. install.php ：獲取數據庫設置
  2. JavaScript庫 ：加載HTML內容和表單並執行ajax請求
  3. CSS文件 ：用於設置HTML內容和表單的樣式
  4. db_connect ：一個用於連接數據庫的通用php腳本
  5. 驗證 ：一個PHP腳本來檢查用戶是否登錄; 這可能會有所不同，具體取決於您是否擁有自己的用戶系統，或正在使用gravitars / facebook / twitter /等。
  6. PHP_methods ：一個包含所有數據庫操作方法的大型php文件
  7. actions文件夾 ：一堆調用必要PHP方法的單個php文件; 用AJAX調用每個這些php文件

理論上，你所要做的就是把這個文件夾複製到任何網站上，然後運行install.php來建立它。 你想要運行的小部件的任何頁面，你只需包括.js文件，它將完成所有的工作。

當然，這就是我如何設置它。 我假定編程語言的變化或者設置細節會有所不同。 但是，基本的想法對於大多數網站插件來說都是相似的。

哦，還有一件事。 如果您打算銷售這個小部件，那麼嘗試並保證所有這些腳本不會再分發是非常困難的。 你最好的選擇是將PHP文件放在你自己的服務器上。 客戶端需要有自己的db_connect.php，連接到自己的數據庫和全部。 但是，實際的ajax請求需要引用遠程服務器上的文件。 請求將需要發送有效的db_connect的URL，以及某種類型的密碼或其他東西。 其實，想一想，我不認為有可能做遠程服務器文件共享。 你必須多研究一下，“因為我當然不知道你會怎麼做。

基本上你有兩個選擇 - 使用iframe來包裝你的內容或使用DOM注入風格。

IFRAMES

Iframes是容易的 - 主機網站包括一個iframe，其中的url包括所有nessessary params。 

<p>Check out this cool webstore:</p>
<iframe src="http://yourdomain.com/store?site_id=123"></iframe>

但是，這帶來了成本 - 考慮到內容，沒有簡單的方法來調整iframe的大小。 初始維度幾乎是固定的。 你可以想出一些跨框架腳本來測量iframe內容的大小，並根據腳本中的數字將其轉發到調整iframe大小的主機站點。 但是這真的很糟糕。

DOM注入

第二種方法是直接將自己的HTML“注入”主頁面。 主機站點從您的服務器加載一個<script>標記，腳本包括所有的信息添加到頁面的HTML。 有兩種方法 - 第一種是在服務器中生成所有的HTML，並使用document.write來注入它。 

<p>Check out this cool webstore:</p>
<script src="http://yourdomain.com/store?site_id=123"></script>

而腳本源將是類似的 

document.write('<h1>Amazing products</h1>');
document.write('<ul>');
document.write('<li><a href="http://yourdomain.com/?id=1">green car</a></li>');
document.write('<li><a href="http://yourdomain.com/?id=2">blue van</a></li>');
document.write('</ul>');

這將原來的<script>標籤替換為document.write調用中的HTML，並且注入的HTML也是原始頁面的一部分，因此不會像調用iframe那樣調整大小等問題。 

<p>Check out this cool webstore:</p>
<h1>Amazing products</h1>
<ul>
<li><a href="http://yourdomain.com/?id=1">green car</a></li>
<li><a href="http://yourdomain.com/?id=2">blue van</a></li>
</ul>

同樣的事情的另一種方法是從HTML中分離數據。 包含的腳本將由兩部分組成 - 繪圖邏輯和序列化形式的數據（即JSON）。 與那種僵硬的document.write方法相比，這為腳本提供了很大的靈活性。 您不需要直接在頁面上直接輸出HTML，而是可以即時生成所需的DOM節點，並將其附加到特定元素。 

<p>Check out this cool webstore:</p>
<div id="store"></div>
<script src="http://yourdomain.com/store_data?site_id=123"></script>
<script src="http://yourdomain.com/generate_store"></script>

第一個腳本由數據組成，第二個腳本由繪圖邏輯組成。 

var store_data = [
    {title: "green car", id:1},
    {title: "blue van", id:2}
];

腳本會是這樣的 

var store_elm = document.getElementById("store");
for(var i=0; i< store_data.length; i++){
    var link = document.createElement("a");
    link.href = "http://yourdomain.com/?id=" + store_elmi[i].id;
    link.innerHTML = store_elmi[i].title;
    store_elm.appendChild(link);
}

雖然比document.write稍微複雜一些，但這種方法是最靈活的。

發送數據

如果你想發送一些數據回你的服務器，那麼你可以使用腳本注入（你不能使用AJAX，因為相同的來源策略，但沒有腳本注入的限制）。 這包括把所​​有的數據放到腳本url（記住，IE的URL長度限制為4kB），服務器響應所需的數據。 

var message = "message to the server";
var header = document.getElementsByTagName('head')[0];
var script_tag = document.createElement("script");
var url = "http://yourserver.com/msg";

script_tag.src = url+"?msg="+encodeURIComponent(message)+"&callback=alert";
header.appendChild(script_tag);

現在你的服務器獲取GET PARAMSMSG msg=message to the server ， callback=alert做了一些事情，並用 

<?
    $l = strlen($_GET["msg"]);
    echo $_GET["callback"].'("request was $l chars");';
?>

這將彌補

警報（“請求是21個字符”）;

如果你改變了某種你自己的功能的alert ，那麼你可以在網頁和服務器之間傳遞消息。




javascript超連結語法   javascript範例   javascript教學pdf   html引用js   javascript   json   widget  


widget