惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Scott Helme
Scott Helme
N
Netflix TechBlog - Medium
AI
AI
Security Latest
Security Latest
GbyAI
GbyAI
P
Proofpoint News Feed
Y
Y Combinator Blog
A
Arctic Wolf
G
Google Developers Blog
U
Unit 42
爱范儿
爱范儿
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
V
Vulnerabilities – Threatpost
Know Your Adversary
Know Your Adversary
Cisco Talos Blog
Cisco Talos Blog
T
Tor Project blog
C
CXSECURITY Database RSS Feed - CXSecurity.com
T
Threatpost
L
Lohrmann on Cybersecurity
C
CERT Recently Published Vulnerability Notes
C
Check Point Blog
B
Blog RSS Feed
The GitHub Blog
The GitHub Blog
Microsoft Azure Blog
Microsoft Azure Blog
博客园 - 【当耐特】
博客园 - Franky
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
C
Cisco Blogs
云风的 BLOG
云风的 BLOG
NISL@THU
NISL@THU
D
Darknet – Hacking Tools, Hacker News & Cyber Security
Microsoft Security Blog
Microsoft Security Blog
T
The Blog of Author Tim Ferriss
阮一峰的网络日志
阮一峰的网络日志
Latest news
Latest news
L
LINUX DO - 最新话题
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
美团技术团队
WordPress大学
WordPress大学
L
LangChain Blog
Stack Overflow Blog
Stack Overflow Blog
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
酷 壳 – CoolShell
酷 壳 – CoolShell
大猫的无限游戏
大猫的无限游戏
The Hacker News
The Hacker News
Simon Willison's Weblog
Simon Willison's Weblog
V
V2EX
Project Zero
Project Zero
博客园_首页

博客园 - 桂圆

经典语句(人生经典语句 爱情经典语句) 我对GOOGLE MAP API 的一些简单调用 - 桂圆 关于FileUpload上传大文件的问题解决办法 搁浅了我也 无法启动IIS服务解决办法 我对FreeTextBox简单使用 C#格式化数据结果表 - 桂圆 - 博客园 使用JavaScript 为GridView 行添加淡入淡出效果 C#文件操作 - 桂圆 - 博客园 获取GridView中指定的控件 - 桂圆 - 博客园 ScriptManager调用 无参数WebService 通用不间断滚动JS封装类 使用UrlRewritingNet.Dll实现URL 重写 【软件设计精要与模式】到手 JS应用(资料很全) SQLServer Transact SQL全集(转) JavaScript基础知识 WinForm控件开发【转载】 使用ICSharpCode.TextEditor.dll 做的一个代码高亮记事本
prototype 轻量级WEB开发的首选ajax框架
桂圆 · 2007-05-23 · via 博客园 - 桂圆

下面的内容来源自http://www.sergiopereira.com/articles/prototype.js.html,本人学习的同时作个笔记,与读者分享一下经验心得。

吕的部落格:www.Lvjiyong.Com

 这次介绍几个相类的函数:$()、$F()、$A、$H$R

$() 相当于document.getElementById()其中间的参数可以是一个ID或多个ID。

示例:

<HTML>
<HEAD>
<TITLE> Test Page </TITLE>
<script src="prototype-1.4.0.js"></script>
<script>
function test1()
{
var d = $('myDiv');
alert(d.innerHTML);
}
function test2()
{
var divs = $('myDiv','myOtherDiv');
for(i=0; i<divs.length; i++)
{
alert(divs[i].innerHTML);
}
}
</script>
</HEAD>
<BODY>
<div id="myDiv">
<p>吕的部落格欢迎您,我是内容一ID为myDiv</p>
</div>
<div id="myOtherDiv">
<p>吕的部落格欢迎您,我是内容二ID为myOtherDiv</p>
</div>
<input type="button" value="取得myDiv的HTML代码" onclick="test1();"><br>
<input type="button" value="取得myDiv与myOtherDiv的HTML代码" onclick="test2();"><br>
</BODY>
</HTML> 

哈哈哈,我是内容一ID为myDiv

呵呵呵我是内容二标题为myOtherDiv

知道怎么用了吧就是使用$('控件ID')取得该ID对应的对象。不懂?无话说了去看看Javascript比较基本的东西吧

好了下面说说$F()这个函数,它实际是是$()的特别版本而已,$()返回具有ID的对象,而$F()只是返回具有ID的对象的值(注意首先这个对像要有value这个属性,返回的也只是一个值而不是对像)该函数主要应用于取得输入框内的值。

示例:

<script>
function test3()
{
alert(  $F('userName')  );
}

</script>

<input type="text" id="userName" value="www.Lvjiyong.Com">
<input type="button" value="取得userName的值" onclick="test3();">

userName:

$A()的用法就更有特殊性,主要应用于具有NodeLists 属性的对象.使用$A('对象ID')返回的是一组Array对象,哈哈哈,这回又是对象了,还是看一下实际应用的例子吧:

<script>

function showOptions(){
var someNodeList = $('lstEmployees').getElementsByTagName('option');
var nodes = $A(someNodeList);

nodes.each(function(node){
alert(node.nodeName + ': ' + node.innerHTML);
});
}
</script>

<select id="lstEmployees" size="3" >
<option value="1">Lvjiyong.com</option>
<option value="2">www.Lvjiyong.Com</option>
<option value="3">吕的部落格</option>
</select>

<input type="button" value="显示options" onclick="showOptions();" >

$H()是一个对象转化为Hash对象,我还没实际用过,看样子主要可能还是用于将对象转为参数方便传送(.NET序列化简单明了版?),我们看看示例吧:

<script>
function testHash()
{
//let's create the object创建对象
var a = {
first: 10,
second: 20,
third: 30
};

//now transform it into a hash转为Hash
var h = $H(a);
alert(h.toQueryString()); //转为字符串,哈哈哈可以使用Ajax方式把这个对象的属性传到后台了displays: first=10&second=20&third=30
}

</script>

下面说一下今天最后要说的最后一个函数:$R()

The $R() function is simply a short hand to writing new ObjectRange(lowerBound, upperBound, excludeBounds). 哈这绝对是个很有意思的函数:指定上下限即交回你有序的Range

示例:

<script>
function demoDollar_R(){
var range = $R(10, 20, false);
range.each(function(value, index){
alert(value);
});
}

</script>

<input type="button" value="$R的例子" onclick="demoDollar_R();" >

Try.these() 的作用和C#里的try{}catch{try{}catch{.....}}作用一样,就是按顺序执行一串的函数,直到这些函数的其中某个正常工作,这个看起来没用的(因为javascrpt本身就有try{}catch(e){}但是实际上这个东西用在某些时候却让你感到很轻常很自然,比如些有语句Firefox与IE不兼容,这种情况下可以分别写两个专门对Firefox与IE的函数,然后使用

<script>
function testTry{
return Try.these(
function() {专门针对IE},
function() {专门针对Firefox}
);//吕的部落格:http://www.lvjiyong.com
}
</script>

这样事先我们不用再检查浏览器类型,当是IE时,执行专门针对IE自动跳出,而Firefox则在执行专门针对IE时不能正常工作,所以将继续尝试执行专门针对Firefox,如此可以针对更广的应用,让我们的感觉也觉得轻松。

本文主要讲如何使用prototype.js中的Ajax进行一些小应用方面的开发,不讲Ajax原理。

在prototype.js中我以后会用到的有两个Ajax类,一个是Ajax.Request 别一个是Ajax.Updater。AjaxRequest继承自Ajax.Base。Ajax.Updater继承自Ajax.Request ,说这些没有别的意思,主要是想让读者明白,随着继承的延续,类的功能也将特殊化。

我是个粗人不过讲那么多道理,就举个例子开始吧。哦,差点忘了说一件事,Ajax在普通浏览器如XP下是默认不能跨域请求,而在2003下不加入可信站点是不可使用的。所以有些应用不能一味地使用Ajax实现,不然呵呵,记得给自己留后路,像Gmail,它默认使用Ajax实现,但如果系统不能执行Ajax的话就提示用户可以使用普通HTML实现。还有所谓跨域就是如我的域名是www.LvJiyong.com 我可以使用Ajax请求www.LvJiyong.com 的所有允许访问的资源,而假如我想访问www.1818city.com 域名下的资源浏览器将会拒绝,有些人想用Ajax实现文件上传,可行性就更夸张,必须把安全级别降到最低才行。另:在本地测试时是允许访问任何域下的资源的,不要企图在网站上直接使用Ajax取得其它网站下的资料,在ASP里我们可以使用服务端的XMLHTTP实现,而在ASP.NET下允许的方法更多,在此不说了,又开始废话。

好,现在开始举例,先讲一下特殊中的特殊Ajax.Updater。不知道读者有没有尝试注册本BLOG的会员,验证码就是使用Ajax.Updater去实现的,在页面载入的时候注册一个事件来监视验证码输入框的变化,当输入的长符符合验证码长度时,自动触发向Ajax.Updater验证验证码的页面发出请求,系统如果检测验证码错误,则返回“验证码错误”,否则返回空值,表示正确。而Ajax.Updater的应用灵巧的就是在这种情况下的使用(只需要显示返回值的情况)。

<script>
function getHTML()
{
var url = 'http://www.lvjiyong.com/1818city/Default.aspx';
var pars = 'test=lvjiyong.com';

 var myAjax = new Ajax.Updater(
'placeholder',
url,
{
method: 'get',
parameters: pars
});

/*

使用GET方法主要是传递少数的参数,记住只适合传送少量的参数传下参数,在'http://www.lvjiyong.com/1818city/Default.aspx'是没有对参数进行处理的,只是显示如何传递参数

传递参数分为Post与GET大家应该都是知道的,当Post时就用Request.Form["参数名"]取值,Get时用Request.QueryString["参数值"]取值。处理回数据后响应请求,响应的文本内容将会自动填充到ID为placeholder的容器中。

使用Post提交格式如:(主要注意是传递Post数据,当然也可以在Post时在url中写上参数传递querystring值。)

var postData = "内容";

var myAjax = new Ajax.Updater(
'placeholder',
url,
{
method: 'post',
postBody:postData});

*/
  
 }
</script>

<input type=button value=GetHtml onclick="getHTML()">
<div id="placeholder"></div>

默认情况下使用这种方法请求即可,但要再细微点可以多设置参数,这个将在以后使用Ajax.Request时深入说一下。

开始胡敲了,先停住吧,最近精神状态一直不好.明天讲一下参数,并说下怎么实现当Ajax请求发生时出现"Loading...",而成功后自动消失.