底层异步通信机制

1、A Ajax的使用1.   A ajax底层异步通信机制：XMLHTTP对于A ajax是如何实现底层的异步通信呢？其实关于这一块的技术XMLHttp早就出现了，只不过最近两年才被给予了高度的重视。在A Ajax的客户端框架中，提供了诸如这样的类型，我们可以通过创建一个该类型的对象，并指定其要调用的服务器端的页面地址，以及对应的参数、超时时间等。但这只不过是对XmlHttp这一技术的包装而已。的技术构成技术构成如下：Ø XMLHTTP对象，内置于浏览器中，实现了客户端和服务器端的异步通信。Ø JSON或者XML，他们定义了客户端和服务

2、器端数据交换的格式。Ø HTML、CSS，数据表现技术。Ø JAVASCRIPT，通过JavaScript来操纵浏览器的对象模型，从而实现人机交互。1.2. 定义一个XmlHttp对象下面的代码就创建了一个跨浏览器的XmlHttp对象的创建方法。   function CreateXMLHTTP()                    

3、   var xmlhttp;                 if(window.XMLHTTPRequest)                        

4、0;                      xmlhttp=new XMLHTTPRequest();                        

5、60;  elseif(window.ActiveXObject)                                           

6、0;  try                                                

7、                       xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");                   

8、;                                        catch(el)         &

9、#160;                                    xmlhttp=new ActiveXObject("Msxml.XMLHTTP");      

10、                                                   if(x

11、mlhttp = null)              throw"创建xmlHttp对象失败"          else              return xmlhttp; 

12、60;                     1.3. XmlHttp对象的Open方法例如通过上面的方法创建了一个xmlHttp对象，可以按照如下的方式调用它的Open方法。xmlHttp.Open(http-method, url, async, userID, password)Open方法中包含了5个参数，前三个是必要的，后两个是可选的(在服务器需要进行身份验证时提供)。参数的含义如下所

13、示： Ø http-method： HTTP的通信方式，比如GET或是 POST Ø url：接收XML数据的服务器的URL地址。通常在URL中要指明 ASP或CGI程序Ø async：一个布尔标识，说明请求是否为异步的。如果是异步通信方式(true)，客户机就不等待服务器的响应；如果是同步方式(false)，客户机就要等到服务器返回消息后才去执行其他操作Ø userID 用户ID，用于服务器身份验证Ø password 用户密码，用于服务器身份验证1.4. XmlHttp异步处理方式

14、通过设定xmlHttp对象的onreadystatechange属性，我们可以指定当xmlhttp对象的状态发生更改时候的处理函数，如：xmlhttp.onreadystatechange =  HandleStateChange;1.5. XmlHttp对象的Send方法用Open方法对xmlHttp对象进行初始化后，调用Send方法发送数据：xmlhttp.Send(data)Send方法的参数类型是Variant，可以是字符串、DOM树或任意数据流。发送数据的方式分为同步和异步两种。在异步方式下，数据包一旦发送完毕，就结束Send进程，客户机执行其他的操作；而在同步方式下，客户

15、机要等到服务器返回确认消息后才结束Send进程。1.6. xmlHttp对象的异步处理函数1.6.1.   readyStateXMLHTTP对象中的readyState属性能够反映出服务器在处理请求时的进展状况。客户机的程序可以根据这个状态信息设置相应的事件处理方法。属性值及其含义如下表所示：0 (未初始化)对象已建立，但是尚未初始化（尚未调用open方法）1 (初始化)对象已建立，尚未调用send方法2 (发送数据)send方法已调用，但是当前的状态及http头未知3 (数据传送中)已接收部分数据，因为响应及http头不全，这时通过responseBody和respon

16、seText获取部分数据会出现错误，4 (完成)数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据 1.6.2.   客户机处理响应信息客户机接收到返回消息后，进行简单的处理，基本上就完成了C/S之间的一个交互周期。客户机接收响应是通过XMLHTTP对象的属性实现的：Ø responseTxt：将返回消息作为文本字符串；Ø responseXML：将返回消息视为XML文档，在服务器响应消息中含有XML数据时使用；Ø responseStream：将返回消息视

17、为Stream对象1.6.3.   status通过判断XMLHTTP对象的status，我们可以具体的判断本次请求的实际情况，成功，失败，根据这些状态码我们就可以调用执行成功或者失败的回调函数。长整形标准xmlhttp状态码，定义如下：Number Description 100Continue101Switching protocols200OK201Created202Accepted203Non-Authoritative Information204No Content205Reset Content206Partial Content300Multiple Ch

18、oices301Moved Permanently302Found303See Other304Not Modified305Use Proxy307Temporary Redirect400Bad Request401Unauthorized402Payment Required403Forbidden404Not Found405Method Not Allowed406Not Acceptable407Proxy Authentication Required408Request Timeout409Conflict410Gone411Length Required412Precondi

19、tion Failed413Request Entity Too Large414Request-URI Too Long415Unsupported Media Type416Requested Range Not Suitable417Expectation Failed500Internal Server Error501Not Implemented502Bad Gateway503Service Unavailable504Gateway Timeout505HTTP Version Not Supported如：function HandleStateChange() i

20、f (xmlhttp.readyState = 4) /客户端已经完全加载完毕                    if(xmlhttp.status = 200)                    &#

21、160;        alert("Result = " + xmlhttp.responseXML.xml);        /成功执行，调用成功执行的回调函数else                  /  else   &

22、#160;               .2.   A Ajax系统框架A Ajax提供了完整的客户端和服务器端的模型框架。客户端与服务器端的通信模型。2.1. 客户端框架只要当前的页面中，包含引用ScriptManager控件，系统就会将“MicrosoftAjax.js”加载到客户端，完成整个客户端架构的构建。关于客户端的架构结构请参考下图：具体的类库截图如下：2.2. 服务器端框架服务器端的模型分层如下：A Ajax框架提供的服务

23、器端的类库如下： 3.   针对JavaScript基本类型的扩展JavaScript是一门非常强大的基于对象（Object Based）的语言，但是对面向对象（Object Oriented）的支持还存在一些不足，同时JavaScript内建的类库也比较简单，甚至缺乏一些很常用的功能。ASP.NET ajax在运行时扩展了JavaScript，大大增强了它的面向对象支持能力，并扩展了一些开发时常用的操作。3.1. String对象的扩展NameDescriptionendsWith FunctionDetermines whether the end of th

24、e String object matches the specified string.format FunctionReplaces each format item in a String object with the text equivalent of a corresponding object's value.localeFormat FunctionReplaces the format items in a String object with the text equivalent of a corresponding object's value. Th

25、e current culture is used to format dates and numbers.startsWith FunctionDetermines whether the start of the String object matches the specified string.trim FunctionRemoves leading and trailing white space from a String object instance.trimEnd FunctionRemoves trailing white space from a String objec

26、t instance.trimStart FunctionRemoves leading white space from a String object instance. 3.2. Array对象的扩展NameDescriptionadd FunctionAdds an element to the end of an Array object.addRange FunctionCopies all the elements of the specified array to the end of an Array object.clear FunctionRemoves all

27、 elements from an Array object.clone FunctionCreates a shallow copy of an Array object.contains FunctionDetermines whether an element is in an Array object.dequeue FunctionRemoves the first element from an Array object.enqueue FunctionAdds an element to the end of an Array object.noteUse the add fun

28、ction instead of the Array.enqueue function.forEach FunctionPerforms a specified action on each element of an Array object.indexOf FunctionSearches for the specified element of an Array object and returns its index.insert FunctionInserts a value at the specified location in an Array object.parse Fun

29、ctionCreates an Array object from a string representation.remove FunctionRemoves the first occurrence of an element in an Array object.removeAt FunctionRemoves an element at the specified location in an Array object. 3.3. Date对象的扩展NameDescriptionformat FunctionFormats a date by using the invari

30、ant (culture-independent) culture.localeFormat FunctionCreates a date from a locale-specific string using the current culture.parseLocale FunctionCreates a date from a locale-specific string using the current culture.parseInvariant FunctionCreates a date from a string using the invariant culture.

31、60;3.4. Number对象的扩展 NameDescriptionformat FunctionFormats a number by using the invariant culture.localeFormat FunctionFormats a number by using the current culture.parseInvariant FunctionReturns a numeric value from a string representation of a number.parseLocale FunctionCreates a number from

32、a locale-specific string. 3.5. ErrorNameDescriptionargument FunctionCreates an Error object that represents the Sys.ArgumentException exception.argumentNull FunctionCreates an Error object that represents the Sys.ArgumentNullException exception.argumentOutOfRange FunctionCreates an Error object

33、 that represents the Sys.ArgumentOutOfRangeException exception.argumentType FunctionCreates an Error object that represents the Sys.ArgumentTypeException exception.argumentUndefined FunctionCreates an Error object that represents the Sys.ArgumentUndefinedException exception.create FunctionCreates an

34、 Error object that has optional additional error information.invalidOperation FunctionCreates an Error object that represents the Sys.InvalidOperationException exception.notImplemented FunctionCreates an Error object that represents the Sys.NotImplementedException exception.parameterCount FunctionCr

35、eates an Error object that represents the Sys.ParameterCountException exception.popStackFrame FunctionUpdates the fileName and lineNumber properties of an Error instance to indicate where the error was thrown instead of where the error was created. Use this function if you are creating custom error

36、types. 3.6. Sys.StringBuilder类3.6.1.   ConstructorsStringBuilder ConstructorCreates a new instance of StringBuilder and optionally accepts initial text to concatenate.3.6.2.   Membersappend MethodAppends a string to the end of the StringBuilder instance.appendLine MethodAppe

37、nds a new string with a line terminator to the end of the StringBuilder instance.clear MethodClears the contents of the StringBuilder instance.isEmpty MethodDetermines whether the StringBuilder instance has any content. toString MethodCreates a string from the contents of a StringBuilder instance.3.

38、7. Object新增的如下两个方法：NameDescriptiongetType FunctionReturns the type of a specified object instance.getTypeName FunctionReturns a string that identifies the run-time type name of an object. 3.8. 使用举例3.8.1.   String   <scripttype="text/javascript"> 

39、60;    var a = " abc "    / 同 C#    document.write(a.startsWith("a");    document.write(" ");    document.write(a.endsWith("c");    document.write("<br

40、/>");       a = a.trimStart();    document.write(a.startsWith("a");    document.write("<br />");     a = a.trimEnd();    document.write(a.endsWith("c"); 

41、60;  document.write("<br />");       a = " " + a + " "    a = a.trim();    document.write(a.startsWith("a");    document.write(" ");    document.writ

42、e(a.endsWith("c");    document.write("<br />");      var user =             Name: "webabcd",        Birthday: new Date(1980, 2, 14)

43、60;   ;      / String.localeFormat();    document.write(String.format("Name：0，Birthday：1:yyyy-MM-dd", user.Name, user.Birthday);    document.write("<br />");        

44、; / 自定义格式化的实现    Type.registerNamespace('Demo');       Demo.CustomFormattedString = function()                Demo.CustomFormattedStotype =       &#

45、160;    / 实现toFormattedString方法，从而实现自定义格式化        toFormattedString: function(format)                    return"自定义格式化：" + format;  

46、60;             Demo.CustomFormattedString.registerClass('Demo.CustomFormattedString');     document.write(String.format("0:测试信息", new Demo.CustomFormattedString();        

47、          </script>输出结果：false falsetruetruetrue trueName：webabcd，Birthday：1980-03-14自定义格式化：测试信息3.8.2.   Array   <scripttype="text/javascript">          f

48、unction btnArray_onclick()            Sys.Debug.clearTrace();          var ary = 'a', 'b', 'c'       var result;     

49、;   / 向数组末尾处添加一个元素        Array.add(ary, 'd');        Sys.Debug.trace("数组ary的元素数：" + ary.length + "，最后一个为：" + aryary.length - 1);        var b = &#

50、39;e', 'f'       / 向数组末尾处添加一个数组        Array.addRange(ary, b);        Sys.Debug.trace("数组ary的元素数：" + ary.length + "，最后一个为：" + aryary.length - 1);   

51、           / clone一个数组       var c = Array.clone(ary);        Sys.Debug.trace("数组c的元素数：" + c.length + "，最后一个为：" + cc.length - 1);    &#

52、160;         / 清除数组内所有元素        Array.clear(c)        Sys.Debug.trace("数组c的元素数：" + c.length + "，最后一个为：" + cc.length - 1);       &#

53、160;      / 移除数组首元素，返回值为移除的元素        result = Array.dequeue(ary);        Sys.Debug.trace("数组ary的元素数：" + ary.length + "，移除的元素：" + result);       &

54、#160;      / 向数组末尾处添加一个元素        Array.enqueue(ary, "g");        Sys.Debug.trace("数组ary的元素数：" + ary.length + "，最后一个为：" + aryary.length - 1);     

55、         / 数组内是否包含某个元素，返回true或false        result = Array.contains(ary, "c");        Sys.Debug.trace("数组ary的元素数：" + ary.length + "，其中有“c”吗？" + result);

56、0;             / 移除数组中的某个元素        Array.remove(ary, 'g');        Sys.Debug.trace("数组ary的元素数：" + ary.length + "，最后一个为：" + aryary.length -

57、 1);         / 移除数组中的某个元素        Array.removeAt(ary, 4);        Sys.Debug.trace("数组ary的元素数：" + ary.length + "，最后一个为：" + aryary.length - 1);    &#

58、160;         / 向数组中添加一个元素        Array.insert(ary, 4, 'f');        Sys.Debug.trace("数组ary的元素数：" + ary.length + "，最后一个为：" + aryary.length - 1);  

59、60;     / 数组中某个元素的位置，返回值为某元素的位置索引        result = Array.indexOf(ary, 'd');        Sys.Debug.trace("数组ary的元素数：" + ary.length + "，搜索其中“d”的位置：" + result);    &#

60、160;   result = Array.indexOf(ary, 'd', 3);        Sys.Debug.trace("数组ary的元素数：" + ary.length + "，从索引“3”处开始，搜索其中“d”的位置：" + result);          var s = "'g', 'h'

61、;"       / 将字符串解析为数组        Array.addRange(ary, Array.parse(s);        Sys.Debug.trace("数组ary的元素数：" + ary.length + "，最后一个为：" + aryary.length - 1);    

62、          / foreach        Array.forEach(ary, appendToString, "|");          function appendToString(arrayElement, index, array)      &

63、#160;    / “this”在这里代表上下文参数，即“|”        Sys.Debug.trace(arrayElement + this + index);          </script>输出结果：数组ary的元素数：4，最后一个为：d数组ary的元素数：6，最后一个为：f数组c的元素数：6，最后一个为：f数组c的元素数：0，最后一个为：undefined数组ary

64、的元素数：5，移除的元素：a数组ary的元素数：6，最后一个为：g数组ary的元素数：6，其中有“c”吗？true数组ary的元素数：5，最后一个为：f数组ary的元素数：4，最后一个为：e数组ary的元素数：5，最后一个为：f数组ary的元素数：5，搜索其中“d”的位置：2数组ary的元素数：5，从索引“3”处开始，搜索其中“d”的位置：-1数组ary的元素数：7，最后一个为：hb|0c|1d|2e|3f|4g|5h|6 Array的foreach使用语法：Array.forEach(array, method, context);参数说明：TermDefinitionarrayT

65、he Array object to enumerate.methodThe function to call for each element in the array.instanceThe context for calling method.举例：var a = 'a', 'b', 'c', 'd'a5 = 'e'var result = '' function appendToString(element, index, array)     / &

66、quot;this" is the context parameter, i.e. '|'.    result += element + this + index + ','Array.forEach(a, appendToString, '|');/ View the results: a|0,b|1,c|2,d|3,e|5,alert(result);    3.8.3.   Date   <scriptt

67、ype="text/javascript">      var d = new Date();      / d.localeFormat();   / 格式化Date    document.write(d.format("yyyy年MM月dd日HH时mm分ss秒，星期dddd");       documen

68、t.write("<br />");       / Date.parseLocale();   / 将字符串解析为Date    document.write(Date.parseInvariant("1980-02-14", "yyyy-MM-dd");      </script>输出结果：2008年01月23日13时

69、39分29秒，星期WednesdayThu Feb 14 00:00:00 UTC+0800 1980 3.8.4.   Number   <scripttype="text/javascript">    var a = 999.999;      / a.localeFormat();   / 格式化数字    document.write(a.for

70、mat("p");    document.write("<br />");    document.write(a.format("d");    document.write("<br />");    document.write(a.format("c");    document.write("<b

71、r />");    document.write(a.format("n");    document.write("<br />");    var x = "100"   var y = "200"   / Number.parseLocale();   / 解析字符串为数字 

72、0;  document.write(Number.parseInvariant(x) + Number.parseInvariant(y);    </script>输出结果：999.99 %999.999¤999.99999.99300 3.8.5.   StringBuilder   <scripttype="text/javascript">       funct

73、ion buildString(title)                   / 创建一个StringBuilder对象           var sb = new Sys.StringBuilder("aaa");     

74、0;     / toString() - 将StringBuilder对象的内容转换为字符串            Sys.Debug.trace("StringBuilder：" + sb.toString();                 

75、     / 添加指定字符串到StringBuilder对象的结尾            sb.append("bbb");            Sys.Debug.trace("StringBuilder：" + sb);     &#

76、160;      / 添加指定字符串到StringBuilder对象的结尾并添加一个换行符            sb.appendLine("ccc");            Sys.Debug.trace("StringBuilder：" + sb); 

77、0;                    / 添加一个换行符到StringBuilder对象的结尾            sb.appendLine();           /

78、 toString(separator) - 在StringBuilder对象内的每一个元素的结尾处添加指定字符串           / 然后将StringBuilder对象的内容转换为字符串            Sys.Debug.trace("StringBuilder：" + sb.toString('xxx'); 

79、60;          / 清除StringBuilder对象所有内容            sb.clear();           Sys.Debug.trace("StringBuilder：" + sb);   

80、60;                  / StringBuilder对象的内容是否为空           var bln = sb.isEmpty();            Sys.Debug

81、.trace("StringBuilder：" + bln);                function pageLoad()                    buildString();    &

82、#160;      </script>输出结果：StringBuilder：aaaStringBuilder：aaabbbStringBuilder：aaabbbccc StringBuilder：aaaxxxbbbxxxcccxxx StringBuilder：StringBuilder：true  3.8.6.   Object    Type.registerNamespace("Demo");  

83、;  Demo.Message = function(content, publishTime)        this._content = content;       this._publishTime = publishTime;        Demo.Message.registerClass('Demo.Message');   

84、; var d = new Date();   var testMessage = new Demo.Message('hello', d);      / 顾名思义：getTypeName    document.write(Object.getTypeName(testMessage);       document.write("<br />");

85、60;     / 顾名思义：getType    document.write(Object.getType(testMessage);执行结果如下：Demo.Messagefunction(content, publishTime) this._content = content; this._publishTime = publishTime; 3.9. 新增类型Type 3.9.1.   Type-提供面向对象最基本的支持下表中给中的方法有的类似于静态方法，通过Type直接调用，如Reg

86、isterNamespace，有的是通过具体的类型来调用，如：RegiesterClass等。NameDescriptioncallBaseMethod MethodInvokes a base class method with specified arguments. getBaseMethod MethodReturns the implementation of a method from the base class of the specified instance.getBaseType MethodReturns the base type of an instance.getInterfaces MethodReturns an Array object that contains the list of interfaces that the type implements.getName MethodReturns the name of the