开发者社区> 吞吞吐吐的> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

不懂JQuery的孩子:自封装Ajax函数

简介:
+关注继续查看

前言                                      

  一直没痛下决心学习JQuery,但平时项目中又要用到Ajax,于是自己写一个函数封装一下方便项目中偷懒吧!今天一不小心看到介绍xmlHttp对象的博客,细读一下重新认识了一下xmlHttp对象,获益良多,顺便重构一下自己写的Ajax函数。

  主要参考:轻松掌握XMLHttpRequest对象 

       XMLHTTP.readyState的五种状态

 

认识XmlHttp对象                            

  XmlHttp:提供客户端与http服务器通信的协议。对于IE浏览器通过window.ActiveXObject()获取,其他浏览器用window.XMLHttpRequest()获取。

XmlHttp对象的属性:

XmlHttp对象的方法:

其中readyState有0,1,2,3,4这五个值

0:实例化了xmlHttp对象,还没调用xmlHttp对象的open方法;

1:调用xmlHttp对象的open方法,但还没调用send方法;

2:调用send方法后,服务器返回响应头,这时可以通过xmlHttp.getResponseHeader()来获取响应头;

3:服务器返回部分响应内容,这时可以xmlHttp.responseText有值,但只是部分内容而已,不能保证数据完整;

4:服务器处理完毕,这时xmlHttp.responseText的值为完整的响应内容,数据完整。

注意:

  1.上面的readyState不是每种浏览器都俱全。

  2. 因asp.net默认启动了输出缓存,如果不手动加上Response.Flush()的话,那么最后响应完成后2、3、4状态会一连串地变换。

具体实现                                

代码:

XmlHttpManagerHasPool.js

复制代码
  1 function XmlHttpManagerHasPool()
2 {
3 /*私有方法Start*/
4 var CreateXmlHttp = function(){
5 if(window.XMLHttpRequest)
6 {
7 return new XMLHttpRequest(); //非ie浏览器
8 }
9 else if(window.ActiveXObject)
10 {
11 return new ActiveXObject("Microsoft.XMLHTTP"); //ie浏览器
12 }
13 else
14 {
15 return null;
16 }
17 }
18
19 var xmlHttpPool = null;
20 var initXmlHttpCount = 3;//默认对象池中xmlHttp对象个数
21 var Init_Pool = function(){
22 xmlHttpPool = new Array();
23 var tempXmlHttp = null;
24 for(var i=initXmlHttpCount-1; i>=0; --i)
25 {
26 tempXmlHttp = CreateXmlHttp();
27 if(tempXmlHttp)
28 xmlHttpPool.push(tempXmlHttp);
29 }
30 }
31 /*私有方法End*/
32
33 /*公开方法和事件Start*/
34
35 //下面是一系列事件
36 var OnNoXmlHttp = null;//当无法获取xmlHttp对象时触发,仅接受方法
37 this.SetOnNoXmlHttp = function(method){
38 if(typeof method=="function")
39 OnNoXmlHttp = method;
40 }
41 var OnOpen = null;//当xmlHttp对象调用open方法后触发,仅接受方法。readyState由0变为1
42 this.SetOnOpen = function(method){
43 if(typeof method=="function")
44 OnOpen = method;
45 }
46 var OnPreLoad = null;//当xmlHttp对象调用send方法,服务器发送响应头信息后触发,仅接受方法。readyState由1变为2
47 this.SetOnPreLoad = function(method){
48 if(typeof method=="function")
49 OnPreLoad = method;
50 }
51 var OnLoading = null;//服务器发送部分响应内容后触发,readyState由2变为3,仅接受方法
52 this.SetOnLoading = function(method){
53 if(typeof method=="function")
54 OnLoading = method;
55 }
56 //当status不为200时触发,有默认处理函数,仅接受方法
57 var OnError = function(xmlHttp){
58 alert("Request is fail. Http Status Code:"+xmlHttp.status);
59 }
60 this.SetOnError = function(method){
61 if(typeof method=="function")
62 OnError = method;
63 }
64
65 //初始化xmlHttp对象池
66 this.InitPool = function(){
67 Init_Pool();
68 }
69
70 //参数:postPar——当请求方式为POST时,所要传递的参数
71 // url——异步处理程序url
72 // method——请求方式:GET/POST
73 // onLoadComplete——请求成功后的结果处理程序,该处理程序需要两个参数:第一个参数为XMLHttpRequest对象,第二个参数为触发事件的对象(可选)
74 // argData——附件参数(可选),若要传多个值,可以用数组或map对象
75 this.Startup = function(postPar,url,method,onLoadComplete,argData){
76 //获取xmlHttp对象
77 if(xmlHttpPool==null)
78 {
79 Init_Pool();
80 }
81
82 var xmlHttp = null;
83 if(xmlHttpPool.length>=1)
84 {
85 xmlHttp = xmlHttpPool.shift();
86 }
87 else
88 {
89 xmlHttp = CreateXmlHttp();
90 }
91 if(xmlHttp==null)
92 {
93 if(OnNoXmlHttp)
94 OnNoXmlHttp();
95 return false;
96 }
97
98 //成功获取
99 var argumentLength = arguments.length;
100 xmlHttp.onreadystatechange = function(){
101 switch(xmlHttp.readyState)
102 {
103 case 1:
104 if(OnOpen)
105 OnOpen();
106 break;
107 case 2:
108 if(OnPreLoad)
110 OnPreLoad();
112 break;
113 case 3:
114 if(OnLoading)
115 OnLoading();
116 break;
117 case 4:
118 if(xmlHttp.status == 200 && xmlHttp.statusText == "OK" )
119 {
120 switch(argumentLength)
121 {
122 case 5:
123 if(onLoadComplete!=null)
124 {
125 onLoadComplete(xmlHttp,argData);
126 }
127 break;
128 case 4:
129 if(onLoadComplete!=null)
130 {
131 onLoadComplete(xmlHttp);
132 }
133 break;
134 default:
135 alert("The number of argument is wrong!");
136 return;
137 }
138 }
139 else if(OnError){
140 OnError(xmlHttp);
141 }
142 xmlHttp.abort();//将xmlHttp的readyState设为0
143 xmlHttpPool.push(xmlHttp);//释放回对象池
144 break;
145 default:
146 if(OnError)
147 {
148 OnError(xmlHttp);
149 xmlHttp.abort();//将xmlHttp的readyState设为0
150 xmlHttpPool.push(xmlHttp);//释放回对象池
151 }
152 break;
153 }
154 }
155
156 xmlHttp.open(method,url,true);
157 if(method.toLowerCase() == "get")
158 {
159 xmlHttp.send(null);
160 }
161 else
162 {
163 xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
164 xmlHttp.setRequestHeader("Content-length", postPar.length);
165 xmlHttp.setRequestHeader("Connection", "close");
166 xmlHttp.send(postPar);
167 }
168 }
169 /*公开方法和事件End*/
170 }
复制代码

使用实例——进度条:

aspx文件

复制代码
 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FlushTest.aspx.cs" Inherits="Client.FlushTest" %>
2
3 <input type="button" id="btn" value="Click" onclick="Click()" />
4 <br />
5 <div style="height:20px;width:100px;overflow:hidden;border:solid 1px black">
6 <div id="divProcess" style="height:20px;width:0px;background-color:Green"></div>
7 </div>
8 <div id="divText" style="width:100px">0%</div>
9 <script src="XmlHttpManagerHasPool.js" type="text/javascript"></script>
10 <script type="text/javascript">
11 var dp = document.getElementById("divProcess");
12 var dt = document.getElementById("divText");
13 var xhp = new XmlHttpManagerHasPool();
14 xhp.SetOnNoXmlHttp(function(){alert("noxmlhttp");});
15 function onopen(){
16 dp.style.width = "25px";
17 dt.innerHTML = "25%";
18 }
19 xhp.SetOnOpen(onopen);
20 function onpreload(){
21 dp.style.width = "50px";
22 dt.innerHTML = "50%";
23 }
24 xhp.SetOnPreLoad(onpreload);
25 function onloading(){
26 dp.style.width = "75px";
27 dt.innerHTML = "75%";
28 }
29 xhp.SetOnLoading(onloading);
30
31 function onloadc(){
32 dp.style.width = "100px";
33 dt.innerHTML = "100%";
34 }
35 function Click(){
36 xhp.Startup(null,"Handler1.ashx","get",onloadc);
37 }
38 </script>
复制代码

aspx.cs文件

复制代码
 1    public class Handler1 : IHttpHandler
2 {
3
4 public void ProcessRequest(HttpContext context)
5 {
6 context.Response.ContentType = "text/plain";
7 Thread.Sleep(5000);
8 context.Response.Flush();//发送响应头,readyState由1变为2
9 Thread.Sleep(5000);
10 context.Response.Write("Hello World");
11 context.Response.Flush();//发送部分响应内容,readyState由2变3
12 Thread.Sleep(5000);
13 context.Response.Write("Hello World");
14 //响应内容发送完毕,readyState由3变4
15 }
16
17 public bool IsReusable
18 {
19 get
20 {
21 return false;
22 }
23 }
24 }
复制代码

Ajax封装包基本写好了,不过对于JavaScript依然有很多不清楚的地方,要好好学一下才行。

如果您觉得本文的内容有趣就扫一下吧!捐赠互勉!

本文转自^_^肥仔John博客园博客,原文链接:http://www.cnblogs.com/fsjohnhuang/archive/2012/02/10/2345880.html,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery ajax - ajax()方法
jQuery ajax - ajax()方法
51 0
jQuery ajax - ajax() 方法
jQuery ajax - ajax() 方法 http://www.w3school.com.cn/jquery/ajax_ajax.asp jQuery Ajax 参考手册 实例 通过 AJAX 加载一段文本: jQuery 代码: $(document).
1034 0
JQuery中$.ajax()方法参数详解(转载)
url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。 type: 要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和       delete也可以使用,但仅部分浏览器支持。
834 0
jQuery ajax - ajax() 方法
jQuery ajax - ajax() 方法: http://www.w3school.com.cn/jquery/ajax_ajax.asp   data 类型:String 发送到服务器的数据。
687 0
Dynatable – 基于 HTML5 & jQuery 的交互表格插件
  Dynatable 一款有趣的,语义化,交互式的表格插件,使用 jQuery,HTML5 和 JSON 实现。Dynatable 的目的是提供一种简单的、可扩展的 API,能够轻松的浏览和操作大规模的数据集。
1227 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1062 0
jquery插件整理篇(七)表格插件
(1)Flexigrid Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
899 0
推荐18款非常棒的 jQuery 表格插件
  我们一般都是用HTML表格来显示结构化数据,如今有很多的 jQuery 表格插件可以帮助我们更好的组织和控制表格数据,增强表格的功能和操作。今天要与大家分享的是18个非常优秀的 jQuery 表格插件,有用到朋友可以参考一下。
1344 0
4849
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载