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

推荐订阅源

博客园 - 三生石上(FineUI控件)
Martin Fowler
Martin Fowler
月光博客
月光博客
AI
AI
B
Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
C
CXSECURITY Database RSS Feed - CXSecurity.com
WordPress大学
WordPress大学
GbyAI
GbyAI
L
Lohrmann on Cybersecurity
O
OpenAI News
Schneier on Security
Schneier on Security
P
Palo Alto Networks Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
T
Troy Hunt's Blog
V2EX - 技术
V2EX - 技术
W
WeLiveSecurity
L
LINUX DO - 最新话题
人人都是产品经理
人人都是产品经理
S
Security Affairs
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
A
Arctic Wolf
Recorded Future
Recorded Future
Microsoft Security Blog
Microsoft Security Blog
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
G
GRAHAM CLULEY
N
Netflix TechBlog - Medium
TaoSecurity Blog
TaoSecurity Blog
C
Check Point Blog
Scott Helme
Scott Helme
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
Apple Machine Learning Research
Apple Machine Learning Research
PCI Perspectives
PCI Perspectives
www.infosecurity-magazine.com
www.infosecurity-magazine.com
Vercel News
Vercel News
The Hacker News
The Hacker News
Y
Y Combinator Blog
Latest news
Latest news
SecWiki News
SecWiki News
Hugging Face - Blog
Hugging Face - Blog
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
Google Online Security Blog
Google Online Security Blog
Webroot Blog
Webroot Blog
Google DeepMind News
Google DeepMind News
Recent Commits to openclaw:main
Recent Commits to openclaw:main
C
Cisco Blogs
博客园_首页
H
Hackread – Cybersecurity News, Data Breaches, AI and More
宝玉的分享
宝玉的分享
L
LINUX DO - 热门话题

博客园 - 桂圆

经典语句(人生经典语句 爱情经典语句) 我对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...",而成功后自动消失.