prototype终结篇

最新推荐文章于 2025-08-10 11:59:41 发布

原创最新推荐文章于 2025-08-10 11:59:41 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#prototype #xmlhttprequest #function #ajax #asynchronous #parameters

1.1 Dom的扩展

document.getElementsByClassName（className, parentElement）返回所有CSS className属性等于className参数的元素，如果没有给出parentElement.那么将搜索document body（注意这个函数返回的是数组）.

Element的扩展，大部分都是对css的操作，个人认为没有什么意思，不过有一点要注意的是设置class属性的时候，ie和其他浏览器有区别，所以className[ie],class[其他浏览器]属性两个都要设。

Insertion.Before（node,content）

Insertion.After

这两个函数是往node的同级节点里头插入。

Insertion.Top

Insertion.Bottom

这两个函数往node的字节点中插入。

这四个完全可以做成类变量，而prototype把它做成实例变量，很纳闷，调用极其部方便（new Insertion.Top(node,content)）；

1.2 Event

Event.observe(window, 'load', showMessage, false);

function showMessage() {

alert('Page loaded.');

}

</script>

observe(element, name, observer, useCapture)

stopObserving(element, name, observer, useCapture)

1.3 Form

1.3.1 Field类

Filed类的方法都是类变量，直接Field.fun()调用

Filed.clear()

Fileld. Focus();

Fileld.select();

缺少Field.check();

1.3.2 Form类

调用方法Form.fun();

Method	Kind	Description
serialize(form)	instance	返回url参数格式的项目名和值的列表，如'field1=value1&field2=value2&field3=value3'。
findFirstElement(form)	instance	返回Form中第一个Enable的对象。
getElements(form)	instance	返回包含所有在表单中输入项目的 Array 对象。
getInputs(form [, typeName [, name]])	instance	返回一个 Array 包含所有在表单中的 <input> 元素。另外，这个列表可以对元素的类型或名字属性进行过滤。
disable(form)	instance	使表单中的所有输入项目无效。
enable(form)	instance	使表单中的所有输入项目有效。
focusFirstElement(form)	instance	激活第一个表单中可视的，有效的输入项目。
reset(form)	instance	重置表单。和调用表单对象的 reset() 方法一样。

接下来是两个监视类，看下面例子：

function fff()

{

var t=new Form.Element.Observer($('aaa'),1,change);//1秒监视一次

}

function change()

{

alert('aaa changed');

}

</script>

</form>

Form.Element.Observer监听表单元素值发生变化

Form.Observer监听整个表单

Form.Element.EventObserver

Form.EventObserver

这两个类同上面两个区别是，当发生onchang(text,password等)事件或者onclick(radio checkbox)事件时产生回掉。

1.4 AJAX

先举一个例子：

function searchSales()

{

var empID = $F('lstEmployees');

var y = $F('lstYears');

var url = 'http://yoursever/app/get_sales';

var pars = 'empID=' + empID + '&year=' + y;

var myAjax = new Ajax.Request(

url,

{

method: 'get',

parameters: pars,

onComplete: showResponse

});

}

function showResponse(originalRequest)

{

//put returned XML in the textarea

$('result').value = originalRequest.responseText;

}

</script>

<option value="5">Buchanan, Steven</option>

<option value="8">Callahan, Laura</option>

<option value="1">Davolio, Nancy</option>

</select>

</select>

然后搞懂Ajax.Request的几个参数就行了。

Property	Type	Default	Description
method	String	'post'	HTTP 请求方式。
parameters	String	''	在HTTP请求中传入的url格式的值列表。
asynchronous	Boolean	true	指定是否做异步 AJAX 请求。
postBody	String	undefined	在HTTP POST的情况下，传入请求体中的内容。
requestHeaders	Array	undefined	和请求一起被传入的HTTP头部列表，这个列表必须含有偶数个项目，任何奇数项目是自定义的头部的名称，接下来的偶数项目使这个头部项目的字符串值。例子:`['my-header1', 'this is the value', 'my-other-header', 'another value']`
onXXXXXXXX	Function(XMLHttpRequest, Object)	undefined	在AJAX请求中，当相应的事件/状态形成的时候调用的自定义方法。例如 `var myOpts = {onComplete: showResponse, onLoaded: registerLoaded};`. 这个方法将被传入一个参数，这个参数是承载AJAX操作的 `XMLHttpRequest` 对象，另一个是包含被执行X-JSON响应HTTP头。
onSuccess	Function(XMLHttpRequest, Object)	undefined	当AJAX请求成功完成的时候调用的自定义方法。这个方法将被传入一个参数，这个参数是承载AJAX操作的 `XMLHttpRequest` 对象，另一个是包含被执行X-JSON响应HTTP头。
onFailure	Function(XMLHttpRequest, Object)	undefined	当AJAX请求完成但出现错误的时候调用的自定义方法。这个方法将被传入一个参数，这个参数是承载AJAX操作的 `XMLHttpRequest` 对象，另一个是包含被执行X-JSON响应HTTP头。
onException	Function(Ajax.Request, exception)	undefined	当一个在客户端执行的Ajax发生像无效响应或无效参数这样的异常情况时被调用的自定义函数。它收到两个参数，包含异常Ajax操作的Ajax.Request对象和异常对象。
insertion	an Insertion class	undefined	一个能决定怎么样插入新内容的类，能 Insertion.Before, Insertion.Top, Insertion.Bottom, 或 Insertion.After. 只能应用于Ajax.Updater 对象.
evalScripts	Boolean	undefined, false	决定当响应到达的时候是否执行其中的脚本块，只在 `Ajax.Updater` 对象中应用。
decay	Number	undefined, 1	决定当最后一次响应和前一次响应相同时在 `Ajax.PeriodicalUpdater` 对象中的减漫访问的次数，例如，如果设为2，后来的刷新和之前的结果一样，这个对象将等待2个设定的时间间隔进行下一次刷新，如果又一次一样，那么将等待4次，等等。不设定这个只，或者设置为1，将避免访问频率变慢。
frequency	Number	undefined, 2	用秒表示的刷新间的间隔，只能应用于 Ajax.PeriodicalUpdater 对象。