ajax服务器端还有部分内容,我没有完全理解,所以就直接记录下客户端的编成,等理解了回头继续记录下
1,Microsoft AJAX Library
Microsoft Ajax Library就是asp.net ajax的客户端部分,是一个纯客户端框架,并且提供了javaScript扩展和基础类库
2,javaScript的原生类型
Object原生类型:
1, 一个无须的集合,可以存放任意类型的对象.
2, 常作为字典使用,如: var o=new Object();
o.ItemName="";
o["ItemName"]="";
3, 可以使用for-in遍历字典中的每一项
4, 禁止扩展其prototype对象
注意: Microsoft Ajax Library并没有扩展object对象
下面的方法出现在所有对象中,新对象一般都覆盖了这些方法
1,toString() 得到表示当前对象与环境无有关的字符串
2, valueOf() 返回表示该对象的value
3, hasOwnProperty(prorertyName) 对象上是否直接定义了某个属性
4, isPrototypeOf(obj) obj是不是当前对象的prototype对象
5,propertyIsEnumerable(properyName) 某属性是否可遍历
Object常用方法例子:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <title>无标题页</title>
- </head>
- <body>
- <div id="message"></div>
- <script type="text/javascript" language="javascript">
- function display(text){
- document.getElementById("message").innerHTML+=(text+"<br />");
- }
- function useAsDictionary(){
- var o=new Object();
- //俩种赋值方法
- o["name"]="Zhang San";
- o.age=25;
- //俩种取值方法
- display("Name: "+o.name);
- display("Age: "+o["age"]);
- display("---------------------");
- //也可以这么娶值
- display("Name: "+o["name"]);
- display("Age: "+o.age);
- display("---------------------");
- }
- function useForIn(){
- //作为字典覆值取值
- var oo=new Object();
- for(var i=0;i<10;i++){
- var key="key_"+i;
- oo[key]=Math.random();
- }
- //删除一个元素
- delete oo["key_5"];
- for( var key in oo){
- display("Key:"+key +", Value: "+oo[key]);
- }
- }
- //函数调用
- useAsDictionary();
- useForIn();
- </script>
- </body>
- </html>
1,是一个长度可变数组对象的数组对象
2,构造Array对象方法: new Array();定义空数组
new Array(3);长度为2的数组
new Array(1,"haha");有俩个元素的数组
属性方法:
length属性: 数组长度,可读写
toString()方法: 返回逗号分割的字符串
concat([item1[,item2[,...]]])方法:返回一个新数组,保存了原数组所有的元素和所有的参数
push([item1[,item2[,...]]])方法:在数组尾添加一个或多个元素
pop()方法:从数组尾去除并返回元素
shift()方法:从数组头去除并返回元素
unshift([item1[,item2[,...]]])方法:在数组头添加一个或多个元素
join(separator)方法:返回以separator作为分隔符得到一个连接所有元素的字符串, 类似StringBuilder加快连接字符串
reverse()方法:将数组内所有元素逆转
sort(compareFunction)方法:参数为一个方法,用于比较俩个元素
省略了参数则直接使用<,==,>比较俩个元素
slice(start,end)方法:返回新数组,不影响旧数组
新数组包含从下标start开始到下标end-1的元素
如果省略了end则包含从下标start开始至末尾的所有元素
如果参数为负数,则表示数组的“倒数”第几个的下标
如果start元素在end之后或者相同,则返回空数组
splice(start,deletCount[,item1[,item2[,...]]])方法:
最灵活,影响当前数组
从下标start的元素开始,删除deleteCount个元素,并在当前位置开始插入剩余参数的元素
删除元素:splice(2,1) 从第2个元素删除一个元素
插入元素:splice(2,0,"hello","world") 从第2个元素开始删除0个元素,并插入俩个元素
替换元素:splice(2,1,"hello","world") 从第2个元素开始删除1个元素,并插入俩个(也就是说俩个参数替换了删除掉的那个元素)
使用例子:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <title>无标题页</title>
- </head>
- <body>
- <div id="message"></div>
- <script type="text/javascript" language="javascript">
- function display(text){
- document.getElementById("message").innerHTML+=(text+"<br />");
- }
- Array.prototype.display=function(){
- //调用了上面的display方法,然后传入自己字符串
- window.display("a: "+this);
- }
- var a=new Array(1,2,3,4,5);//输出: a={1,2,3,4,5};
- display("Array Test:");
- //给数组尾添加俩个元素
- display("a.push(6,7)");
- a.push(6,7);//{1,2,3,4,5,6,7}
- a.display();
- //给数组头删除一个元素并返回删除的元素
- display("a.shift():"+a.shift());
- a.display();//{2,3,4,5,6,7}
- //给数组头添加一个元素
- display("a.unshift(8)");
- a.unshift(8);
- a.display();//{8,2,3,4,5,6,7}
- //数组末尾删除一个元素并返回删除元素
- display("a.pup():"+a.pop());
- a.display();//{8,2,3,4,5,6}
- //返回一个新数组包含原数组的元素和参数
- display("a.concat(9,10):"+a.concat(9,10)); //{8,2,3,4,5,6,9,10}
- a.display(); //{8,2,3,4,5,6}
- //用"]["分割数组
- display("'['+a.join('][')+']':"+"["+a.join("][")+"]");//{[8][2][3][4][5][6]}
- a.display();//原数组不变{8,2,3,4,5,6}
- //在原来数组中取新数组
- display("a.slice(2,5):"+a.slice(2,5));//得到新数组{3,4,5}
- display("a.slice(2,-2):"+a.slice(2,-2)); //得到新数组{3,4}
- a.display();//原数组不变{8,2,3,4,5,6}
- display("a.splice(3,2):"+a.splice(3,2));//删除(4,5)
- a.display();//{8,2,3,6}
- display("a.splice(2,0,7,8):"+a.splice(2,0,7,8));
- a.display();//{8,2,7,8,3,6}
- display("a.splice(3,1,9,10):"+a.splice(3,1,9,10));
- a.display();//{8,2,7,9,10,3}
- display("a.sort():"+a.sort());
- a.display();//{10,2,3,6,7,8,9}
- display("a.sort(function(x,y){return y-x;})");
- a.sort(function(x,y){return y-x;});
- a.display();//{10,9,8,7,3,2}
- </script>
- </body>
- </html>
Array原生类的扩展(Microsoft ajax Library)
全都是静态方法,为了和其他类库兼容(Prototype),提供了一些常用的方法主要是对原来类方法的简单封装,主要是为了提供语义良好的方法名。
Array.enqueue(array,item)方法: 入队列操作,将item添加至array末尾
Array.dequeue(array)方法: 出队列操作,返回并删除array的第一个元素
Array.addRange(array,items)方法:将items数组中所有元素添加至array末尾
Array.contains(array,item)方法: 如果array中包含item元素,则返回true,否则返回false
Array.clear(array)方法: 清除array中的所有元素
Array.insert(array,index,item)方法: 将item插入至array中下标为index的位置
Array.remove(array,item)方法: 从array中移除下标为index的元素
Array.removeAt(array,index)方法: 从array中移除下标为index的元素
Array.clone(array)方法: 放回一个与array相同的新数组
Array.parse(value)方法: 将表示数组的json 字符串变为一个数组对象
Array.indexOf(array,item,start)方法:获得item在array中的下标,从下标为start开始查找.如果array中没有item元素,那么返回-1
Array.add(array,item)方法:将item添加至array末尾,它和Array.enqueue其实是同一个函数
Array.forEach(array,method,instance)方法: 以instance为上下文this引用,将array中的每个元素依次作为参数,循环调用method方法
下面的例子介绍下 Array.forEach()方法:
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AJAXEnabledWebApplication5._Default" %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head runat="server">
- <title>Untitled Page</title>
- </head>
- <body>
- <form id="form1" runat="server">
- <asp:ScriptManager ID="ScriptManager1" runat="server" />
- <script type="text/javascript" language="javascript">
- function method(elt,index,array){
- this.reslut+="["+index+"."+elt+"]";
- }
- var array="I am Zhang San".split(" ");
- var obj={reslut:""};
- Array.forEach(array,method,obj);
- alert(obj.reslut);
- </script>
- </form>
- </body>
- </html>
Error元生类型
表示错误对象 子类有: EvalError,URIError等
捕获方式:
try{throw new Error()} carch(e){...}
Error对象IE和fireFoc共有属性: message错误信息
特定属性:
IE:description:同message属性
number:错误编号,只有脚本引擎抛出的错误才有该属性
FireFox:fileName:创建错误的文件
lineNumber:创建错误对象的行号
stack:创建错误时的堆栈信息
例子: 抛出捕获显示错误:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <title>无标题页</title>
- </head>
- <body>
- <script type="text/javascript" language="javascript">
- function throwError(){
- throw new Error("Custom Error!");
- }
- try{
- throwError();
- }catch(e){
- var errorMsg=("Message:"+e.message+"/n");
- if(!e.stack)//IE
- {
- errorMsg+=("Description:"+e.description+"/n");
- errorMsg+=("Number:"+e.number+"/n");
- }else{
- errorMsg+=("Line Number:"+e.lineNumber+"/n");
- errorMsg+=("File Name:"+e.fileName+"/t/n");
- errorMsg+=("Stack:"+e.stack);
- }
- alert(errorMsg);
- }
- </script>
- </body>
- </html>
Error原生类型的扩展
Error.create(message,errorInfo)方法:创建新的Error对象
将Error对象的message属性设为true
将errorInfo上的信息附加到Error对象
Error.prototype.popStackFrame()方法:为Error对象整理出更优雅的信息对ie无效,方法是返回Error对象而不是抛出则在返回前条用这个方法
例子:
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="AJAXEnabledWebApplication5.WebForm1" %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head runat="server">
- <title>无标题页</title>
- </head>
- <body>
- <form id="form1" runat="server">
- <div>
- <asp:ScriptManager ID="ScriptManager1" runat="server">
- </asp:ScriptManager>
- <script type="text/javascript" language="javascript">
- function niceError(){
- var e=Error.create("Error Message",{customMessage:"Custom Message"});
- e.popStackFrame();
- return e;
- }
- try{
- throw niceError();
- }catch(e){
- var errorMsg=("Message:"+e.message+"/n");
- errorMsg+=("Line Number:"+e.lineNumber+"/n");
- errorMsg+=("File Name:"+e.fileName+"/t/n");
- errorMsg+=("Stack:"+e.stack);
- alert(errorMsg);
- }
- </script>
- </div>
- </form>
- </body>
- </html>
与Array,String等类型处于同等地位,每个方法均为Function类型的实例
如:typeof(Array)==typeof(Function)=="function"
方法调用时候根据发起的对象来确定this上下文的引用:
Function.prototype.apply(instance,args)
Function.prototype.call(instance,[arg1[,arg2[,...]]])
使用例子:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <title>无标题页</title>
- </head>
- <body>
- <div id="message"></div>
- <script type="text/javascript" language="javascript">
- function display(text){
- document.getElementById("message").innerHTML+=(text+"<br />");
- }
- function aMethod(){
- var result=this.toString();
- for(var i=0;i<arguments.length;i++){
- result+=(","+arguments[i]);
- }
- return result;
- }
- var a=new String("I am String A");
- var b=new String("I am String B");
- a.aMethod=b.aMethod=aMethod;
- display("aMethod():"+aMethod());
- display("a.aMethod():"+a.aMethod());
- display("b.aMethod():"+b.aMethod());
display("a.aMethod.call(b,1,2,3):"+a.aMethod.call(b,1,2,3));
display("b.aMethod.apply(a,[1,2,3]):"+b.aMethod.apply(a,[1,2,3]));
- </script>
- </body>
- </html>
Function原生类型扩展
Function.createDelegate(instance,method)方法:得到一个方法引用,执行它时则会调用method方法,并保证method方 的上下文饮用为instance
Function.createCallBack(method,context)方法:得到一个方法引用,执行它时则调用method方法,并将context作为额外 的参数传入
例子:
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="AJAXEnabledWebApplication5.WebForm2" %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head runat="server">
- <title>无标题页</title>
- </head>
- <body>
- <form id="form1" runat="server" >
- <asp:ScriptManager ID="ScriptManager1" runat="server">
- </asp:ScriptManager>
- <input id="btn" type="button" value="Click Me--Function.createDelegate" />
- <input id="btn2" type="button" value="Click Me--Function.createCallBack" />
- <script language="javascript" type="text/javascript">
- var obj={
- text:"hello",
- onClick:function(e){
- alert(this.text);
- }
- };
- //直接调用 返回hello
- //obj.onClick();
- // $addHandler($get("btn"),"click",obj.onClick);
- var onClickDeleget=Function.createDelegate(obj,obj.onClick);
- $addHandler($get("btn"),"click",onClickDeleget);
- var obj2={
- text:"world",
- onClick:function(e,args){
- alert(this.text+" " +args );
- }
- };
- var onClickDelegate2=Function.createCallback(Function.createDelegate(obj2,obj2.onClick),"world");
- $addHandler($get("btn2"),"click",onClickDelegate2);
- </script>
- </form>
- </body>
- </html>