基本的封装Ajax之一

开发 后端
AJAX并非缩写词,是一种创建交互式网页应用的网页开发技术。本文主要介绍的是创建一个基本的Ajax的步骤,让我们一起来看。

Ajax,或许已经是老掉牙的话题。我学习总结一下。大概会有6篇,从基本的Ajax直至高级的应用。***会形成一个实用的Ajax工具库。

创建一个基本的Ajax应用不需要太多的代码,大概三个步骤,几十行代码即可。

1,创建Ajax的核心对象XMLHttpRequest

因为浏览器之间的不兼容,IE7之前的版本并没有原生的XMLHttpRequest对象却实现为ActiveX对象。
互联网及各种书籍中有着多种创建方式,有的复杂很多行代码,有的则简洁很少代码。当然复杂的考虑的情形更多一些。如下几乎将IE中所有的情况都考虑到了。

  1. function cretaeXHR(){   
  2. tryreturn new XMLHttpRequest();}catch(e){}   
  3. tryreturn new ActiveXObject('Msxml2.XMLHTTP.6.0');}catch(e){}   
  4. tryreturn new ActiveXObject('Msxml2.XMLHTTP.4.0');}catch(e){}   
  5. tryreturn new ActiveXObject('Msxml2.XMLHTTP.3.0');}catch(e){}   
  6. tryreturn new ActiveXObject('Msxml2.XMLHTTP');}catch(e){}   
  7. tryreturn new ActiveXObject('MSXML3.XMLHTTP');}catch(e){}   
  8. tryreturn new ActiveXObject('MSXML.XMLHTTP');}catch(e){}   
  9. tryreturn new ActiveXObject('Microsoft.XMLHTTP');}catch(e){}   
  10. tryreturn new ActiveXObject('MSXML2.ServerXMLHTTP');}catch(e){}   
  11. return null;   
  12. }  

代码较少的采用对象特性判断,

  1. var xhr = window.XMLHttpRequest ? new XMLHttpRequest() :new ActiveXObject('Microsoft.XMLHTTP');  

我在这里采用精简方式,暂不考虑创建异常的情况。

2,发送请求

  1. xhr.open   
  2. xhr.send  

3,处理响应

  1. xhr.onreadystatechange = function(){   
  2. if(xhr.readyState == 4){   
  3. if(xhr.status == 200){//当然你可以把200~300之间或304的都理解成响应成功   
  4. //callback   
  5. }   
  6. }   
  7. }  

嗯,到这里没什么特别的,所有的书籍上都是这么几个步骤来着。对于初学者来说,要将这几个步骤很好的封装一下形成一个良好的模块还是很困难的。全局变量满天飞不知道怎么去组织代码,初学者开始都是这样的。现在想想是对一门语言没有足够的掌握,尤其是闭包。

这里采用 单例模式 封装成一个对象,即只有一个全局的变量将其赋值给Ajax,该对象有一个request方法。request有两个参数,***个为请求的url(必要的),字符串类型,第二个opt为配置参数(可选的),对象类型。结果处理使用内部私有的_onStateChange函数。

完整代码如下:

  1. /**   
  2. * 执行基本ajax请求,返回XMLHttpRequest   
  3. * Ajax.request(url,{   
  4. * async 是否异步 true(默认)   
  5. * method 请求方式 POST or GET(默认)   
  6. * data 请求参数 (键值对字符串)   
  7. * success 请求成功后响应函数,参数为xhr   
  8. * failure 请求失败后响应函数,参数为xhr   
  9. * });    
  10. */   
  11. Ajax =   
  12. function(){   
  13. function request(url,opt){   
  14. function fn(){}   
  15. var async = opt.async !== false,   
  16. method = opt.method || 'GET',   
  17. data = opt.data || null,   
  18. success = opt.success || fn,   
  19. failure = opt.failure || fn;   
  20. method = method.toUpperCase();   
  21. if(method == 'GET' && data){   
  22. url += (url.indexOf('?') == -1 ? '?' : '&') + data;   
  23. data = null;   
  24. }   
  25. var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');   
  26. xhr.onreadystatechange = function(){   
  27. _onStateChange(xhr,success,failure);   
  28. };   
  29. xhr.open(method,url,async);   
  30. if(method == 'POST'){   
  31. xhr.setRequestHeader('Content-type''application/x-www-form-urlencoded;');   
  32. }   
  33. xhr.send(data);   
  34. return xhr;   
  35. }   
  36. function _onStateChange(xhr,success,failure){   
  37. if(xhr.readyState == 4){   
  38. var s = xhr.status;   
  39. if(s>= 200 && s < 300){   
  40. success(xhr);   
  41. }else{   
  42. failure(xhr);   
  43. }   
  44. }else{}   
  45. }   
  46. return {request:request};   
  47. }();  

如下请求后台的一个servlet,发送参数name=jack,age=20,默认使用异步,GET方式

  1. Ajax.request('servlet/ServletJSON',{    
  2.          data : 'name=jack&age=20',    
  3.         success : function(xhr){    
  4.              //to do with xhr    
  5.         },    
  6.          failure : function(xhr){    
  7.              //to do with xhr    
  8. }    
  9. }    
  10. );   

以上是一个简单封装,用了不到40行的代码。这里的请求参数data只能是键值字符串,有时候希望可以JS对象,以便可以更灵活的传参,下一篇将从改善请求参数开始。

【编辑推荐】

  1. 使用 jQuery 简化 Ajax 开发
  2. 外国设计大师Ajax之父74张图详谈用户体验的要素
  3. 在AJAX开发中集成数据库技术
  4. Ajax和WEB服务数据格式:自定义返回格式
责任编辑:于铁 来源: 博客园
相关推荐

2012-03-15 16:12:57

JavaHashMap

2021-07-06 06:12:43

Shell语法变量

2021-10-30 18:38:49

Java c++反射

2011-08-03 09:37:55

云计算

2011-04-11 15:53:40

C++

2021-02-04 15:08:37

Vue渐进式框架

2011-06-16 13:45:14

2009-01-13 14:37:17

WinForm视频教程MVP

2021-12-15 08:26:03

TCASwiftUIUIKit

2023-11-30 07:45:11

useEffectReact

2012-08-28 09:21:59

Ajax查错经历Web

2021-06-03 19:55:55

MySQ查询优化

2010-06-04 17:43:20

MySQL绿色安装

2017-03-27 21:59:57

TDD开发编程

2022-03-15 15:24:53

操作系统RTOSAT模块

2021-08-30 09:30:29

Kafka高性能设计

2023-03-31 11:21:10

网络协议LoRaWAN

2022-01-13 14:01:39

Rfid克隆防护

2009-09-01 11:20:11

Struts 2AJAX支持

2021-05-06 05:39:30

Inotify监听系统
点赞
收藏

51CTO技术栈公众号