It's ease to use.And tutorial is HERE:http://www.svendtofte.com/code/learning_venkman/index.php
文章来源:http://blueoxygen.dflying.net/3/archive/75_ajax_tool_box---venkman.html
]]>
See DFlying's finding:Yep,No Block Scope concept in JavaScript.Only the global and function Scope.You can use "var" to declare a global variable and use "var" agian to declare a homonymous variable in a function.In the function ,the second one works.But there is no Block scope.
Check the codes below,it's a demo for "NO BLOCK SCOPE"
function test(o) {var i = 0; // i is defined throughout functionif (typeof o == "object") {var j = 0; // j is defined everywhere, not just blockfor(var k = 0; k < 10; k++) { // k is defined everywhere, not just loopdocument.write(k);
}document.write(k); // k is still defined: prints 10}document.write(j); // j is defined, but may not be initialized}
But,You still need to care javascript's FUNCTION SCOPE.Also see code snippet:
var scope = "global";
function f( ) {alert(scope); // Displays "undefined", not "global"var scope = "local"; // Variable initialized here, but defined everywherealert(scope); // Displays "local"}f( );
Right,thought you alert(scope) first and then define a new functin scope variable scope.However,once you define a function scope vriable,it will hide the global variable in the function body,whatever the definition order.
文章来源:http://blueoxygen.dflying.net/3/archive/68_variables_scope_in_javascript.html
]]>
AutoAssist is an auto completion web widget that written in pure JavaScript. It can help enhance the accessibility of existing website, let the users to work effective and feel comfortable. AutoAssist Javascript only and is built upon prototype and rico. Its main features are :
* improve the User Experience
* Don't require an Ajax experience
* pretty managed JavaScript, easy to understand and customize
* works well on Mozilla/FireFox, IE and Opera
* have a nice solution for fast user typing, reduce a lot of corresponding server loading (20% - 80% *)
The code for the screenshot is very simple :
var foo = function() {
var tt = new AutoAssist("t", {setRequestOptions: function() {
var pars = "name=" + this.txtBox.value;
return { url: "/country.php", parameters: pars };
}});
}
Event.observe(window, "load", foo);You can find a ten minutes tutorial for AutoAssist explaining in details how to use this script to create an auto-complete list based on country data.
By the way,script.aculo.us also has it's impelmention:http://demo.script.aculo.us/ajax/autocompleter
文章来源:http://blueoxygen.dflying.net/3/archive/53_ajax_auto-complete_component.html
]]>
]]>
CZ为我们以前经帔R到过的动态列表问题，当选择一个下拉框的时候，另外一个的数据动态生?BR>
q是个极其简单的应用。不q我们讲q入繁Q最后的CZ会展现Google Suggestcd的自动提C。而且我们会不停的Ҏ个示例重构，标题?-1也表明有1-2{?BR>1-1是完全自己处理AJAX的各U问题，1-2预计引入其他cd来操作XMLQ?-3预计用buffalo完成此示例。之后每个示例如果有必要都会有此cd比。由于代码很单ƈ且有注释Q所以文章以代码卛_展现应用?BR>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Dynamic List </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="./script/prototype.js"></script>
<script>
var xmlHttp; //XHR Object
function refreshBookList() {
var bookCate = $F('bookCate');
//clear Books select box
if(bookCate == ""){
clearBookList();
return;
}
//we use XML file directly for demonstrating.
//In real application,you should generate *.xml file by server side
var url;
if(bookCate == "SAP"){
url = "./SAP.xml";
}else {
url = "./SIEBEL.xml"
}
var pars = "";
//Create a new XHR object
xmlHttp = new Ajax.Request(url,{method: 'get',onComplete: handleListChange});
}
//remove list values of select box
function clearBookList() {
var books = $('bookList');
while(books.childNodes.length >0){
books.removeChild(books.childNodes[0]);
}
}
//callback function
function handleListChange(originalRequest){
clearBookList();
var books = $('bookList');
var results = originalRequest.responseXML;
var option = null;
var booksXML = results.getElementsByTagName("books")[0];
for(var i = 0; i < booksXML.childNodes.length;i++){
//get book tag
var listItem = booksXML.childNodes[i];
option = document.createElement('option');
option.appendChild(document.createTextNode(listItem.firstChild.nodeValue));
books.appendChild(option);
}
}
</script>
</head>
<body>
<form action="#">
Book Categroies:
<select name="bookCate" id="bookCate" onchange="refreshBookList();">
<option>Select One</option>
<option value="SAP">SAP Books</option>
<option value="SIEBLE">SIEBEL Books</option>
</select>
<br/><br/>
<select name="bookList" id="bookList" size="6" style="width:300px"></select>
<br/>
</form>
</body>
</html>
SAP.xml<html>
<head>
<title> Dynamic List </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="./script/prototype.js"></script>
<script>
var xmlHttp; //XHR Object
function refreshBookList() {
var bookCate = $F('bookCate');
//clear Books select box
if(bookCate == ""){
clearBookList();
return;
}
//we use XML file directly for demonstrating.
//In real application,you should generate *.xml file by server side
var url;
if(bookCate == "SAP"){
url = "./SAP.xml";
}else {
url = "./SIEBEL.xml"
}
var pars = "";
//Create a new XHR object
xmlHttp = new Ajax.Request(url,{method: 'get',onComplete: handleListChange});
}
//remove list values of select box
function clearBookList() {
var books = $('bookList');
while(books.childNodes.length >0){
books.removeChild(books.childNodes[0]);
}
}
//callback function
function handleListChange(originalRequest){
clearBookList();
var books = $('bookList');
var results = originalRequest.responseXML;
var option = null;
var booksXML = results.getElementsByTagName("books")[0];
for(var i = 0; i < booksXML.childNodes.length;i++){
//get book tag
var listItem = booksXML.childNodes[i];
option = document.createElement('option');
option.appendChild(document.createTextNode(listItem.firstChild.nodeValue));
books.appendChild(option);
}
}
</script>
</head>
<body>
<form action="#">
Book Categroies:
<select name="bookCate" id="bookCate" onchange="refreshBookList();">
<option>Select One</option>
<option value="SAP">SAP Books</option>
<option value="SIEBLE">SIEBEL Books</option>
</select>
<br/><br/>
<select name="bookList" id="bookList" size="6" style="width:300px"></select>
<br/>
</form>
</body>
</html>
<?xml version="1.0" encoding="ISO-8859-1"?>
<books>
<book>
ABAP
</book>
<book>
BW
</book>
<book>
FI module
</book>
</books>
SIEBEL.xml<books>
<book>
ABAP
</book>
<book>
BW
</book>
<book>
FI module
</book>
</books>
<?xml version="1.0" encoding="ISO-8859-1"?>
<books>
<book>
SIEBEL
</book>
<book>
CRM
</book>
</books>
<books>
<book>
SIEBEL
</book>
<book>
CRM
</book>
</books>
]]>
目前比较公认的有三种数据传输交互方式QXHTML Fragment,JSON,XML。当然也有不同的声音Q这里也会介l?/P>
- XHTML片断
q种方式也被UCؓAHAH, 目前很多遗留pȝxAJAX的光改善一下交互，节省一下带宽，大多数采用了此种方式。我们以 StrutsZ子，比如在页面上有一个按钮，点击后得到现在我收藏的图书列表，则此图书列表(Table元素l成)便可以以XHTML片断的Ş式返回客LQ然后利用XHR对象的responseText属性得刎ͼ讄道某DIV中?BR>
for (Iterator it = sortedPresidentsList.iterator(); it.hasNext();) 
{
HashMap hm = (HashMap)it.next();
html += "<tr>";
html += "<td>" + (String)hm.get("firstName") + "</td>";
html += "<td>" + (String)hm.get("middleName") + "</td>";
html += "<td>" + (String)hm.get("lastName") + "</td>";
html += "<td>" + (String)hm.get("firstYearInOffice") + "</td>";
html += "<td>" + (String)hm.get("lastYearInOffice") + "</td>";
html += "</tr>";
}
html += "</table>";
// Write the HTML to response
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println(html);
out.flush();
for (Iterator it = sortedPresidentsList.iterator(); it.hasNext();) {HashMap hm = (HashMap)it.next();html += "<tr>";html += "<td>" + (String)hm.get("firstName") + "</td>";html += "<td>" + (String)hm.get("middleName") + "</td>";html += "<td>" + (String)hm.get("lastName") + "</td>";html += "<td>" + (String)hm.get("firstYearInOffice") + "</td>";html += "<td>" + (String)hm.get("lastYearInOffice") + "</td>";html += "</tr>";}html += "</table>";// Write the HTML to responseresponse.setContentType("text/html");PrintWriter out = response.getWriter();out.println(html);out.flush();q是一个Struts的例子，Action中response直接flush输出。当然也可以让Struts导向到结果jsp面Q请求的XHR可以得到jsp生成的HTML内容?BR>~点是：当返回有Form的内容的时候会崩溃。CSS样式讄复杂?/P>
- XML
XML在很多AJAXCZ当中作ؓ数据传递的标准。而XMLh很好的数据语义描q性，服务器端生成方式众多Q而几乎所有浏览器都支持对XML 的解析。以JavaScript解析服务器端q回的XMLZ子，只需要XHR的responseXML属性即可获得XML由javascript解析 (L我在BlogJAVA写的操作CZ) 而XML的生方式似乎所有h都认准了
<channel><title>Dan's Data</title><description>New and interesting computer hardware, gadgets and toys reviewed. And letters. Lots of letters.</description><link>http://www.dansdata.com/</link><item><title>Ultrasone HFI-650 headphones</title><description>They look like the 550s, they feel like the 550s, they've got marketing buzzwords like the 550s - are they worth the extra money?</description><link>http://www.dansdata.com/quickshot025.htm</link></item>..
一c，gq样子语义描q更清楚。但是我从michael那里得到启示Q确实，用此cL式传输数据几乎无法在客户端统一处理。从我的showcase中大家也可以看到QJavascript解析XML后更新DOM直就是体力活Q枯燥且Ҏ出错Q而此UXMLq回的数据则会千差万别，以寻扄定tag的节点的方式怎么能统一处理呢？于是Q第二种XML传输方式应运而生?/P>
<list><type>java.util.List</type><map><type>yourapp.domain.Book</type><string>title</string><string>JavaScript, the Definitive Guide</string><string>publisher</string><string>O'Reilly</string><string>author</string><string>David Flanagan</string><string>cover</string><string>/images/cover_defguide.jpg</string><string>blurb</string><string>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</string></map><map><type>yourapp.domain.Book</type><string>title</string><string>DOM Scripting</string><string>publisher</string><string>Friends of Ed</string><string>author</string><string>Jeremy Keith</string><string>cover</string><string>/images/cover_domscripting.jpg</string><string>blurb</string><string>Praesent et diam a ligula facilisis venenatis.</string></map></list>q样子只要客L和服务器端达成共识string long int{代表的数据cd可以在两端q原成自己可用的对象。而这也是micheal认ؓ真正的AJAX应该有的形态，其中AJAX引擎便承担v了这份工作?BR>~点QXML的构造和解析在没有类库辅助的情Ş下是一个灾难，而XML文g的传输效率似乎也不如单的文本高。我讲会在后面的blog中提及XML文g的生方法，以及客户端一些解析的框架?/P>
- JSON
JSON是JavaScript Object Notation的羃写，是一份规范，定义了极其简单的数据描述形式。几乎在所有主语a上都有实现。JSON对象是名/值对的集合，所以一个简单的JSON对象为：
var testObj={
"name" : david,
"sex" : Male,
"work" : SE
}
客户端javascript调用eval()可以解析由服务器端产生的JSON丌Ӏvar jsonExpression =
( + req.responseText + );
var customer = eval(jsonExpression);
而服务器?JAVA)也有相应的lib来操作：JSONObject 的toString()
~点Q虽然JSONz高效，但是转化为Javascript对象通过eval()也就是说QAJAX的传输邦定在了JSON上面Q这PM让h不很攑ֿ。ƈ且JSON对象难于阅读与理解，不如XML直观?/P>
除了会在下一AJAX的blog介绍JAVA对象序列化到XML以外Q会一些从头开始构建应用的例子Q其中不会用buffalo DWR一cȝ框架Q我会尝试选用不同的方案作为数据传输方式供大家参考?/P>
]]>
]]>