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,一種用於顯示內容,一種用於請求內容,另一種用於更改內容。 一旦你開始重複使用你的方法,最好把它們放在一個地方。 重寫一次,到處改寫。
所以,真的,這就是所有你需要的部件。 當然,你會想要一個安裝腳本,設置商業數據庫和所有。 但是實際的小部件只是一個包含上述腳本文件的文件夾:
- install.php :獲取數據庫設置
- JavaScript庫 :加載HTML內容和表單並執行ajax請求
- CSS文件 :用於設置HTML內容和表單的樣式
- db_connect :一個用於連接數據庫的通用php腳本
- 驗證 :一個PHP腳本來檢查用戶是否登錄; 這可能會有所不同,具體取決於您是否擁有自己的用戶系統,或正在使用gravitars / facebook / twitter /等。
- PHP_methods :一個包含所有數據庫操作方法的大型php文件
- 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
,那麼你可以在網頁和服務器之間傳遞消息。