怎么创建基本的Ajax应用

这篇文章主要讲解了“怎么创建基本的Ajax应用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么创建基本的Ajax应用”吧！

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

1，创建Ajax的核心对象XMLHttpRequest

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

function cretaeXHR(){   try{ return new XMLHttpRequest();}catch(e){}   try{ return new ActiveXObject('Msxml2.XMLHTTP.6.0');}catch(e){}   try{ return new ActiveXObject('Msxml2.XMLHTTP.4.0');}catch(e){}   try{ return new ActiveXObject('Msxml2.XMLHTTP.3.0');}catch(e){}   try{ return new ActiveXObject('Msxml2.XMLHTTP');}catch(e){}   try{ return new ActiveXObject('MSXML3.XMLHTTP');}catch(e){}   try{ return new ActiveXObject('MSXML.XMLHTTP');}catch(e){}   try{ return new ActiveXObject('Microsoft.XMLHTTP');}catch(e){}   try{ return new ActiveXObject('MSXML2.ServerXMLHTTP');}catch(e){}   return null;   }

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

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

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

2，发送请求

xhr.open   xhr.send

3，处理响应

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

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

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

完整代码如下：

/**   * 执行基本ajax请求,返回XMLHttpRequest   * Ajax.request(url,{   * async 是否异步 true(默认)   * method 请求方式 POST or GET(默认)   * data 请求参数 (键值对字符串)   * success 请求成功后响应函数，参数为xhr   * failure 请求失败后响应函数，参数为xhr   * });    */   Ajax =   function(){   function request(url,opt){   function fn(){}   var async = opt.async !== false,   method = opt.method || 'GET',   data = opt.data || null,   success = opt.success || fn,   failure = opt.failure || fn;   method = method.toUpperCase();   if(method == 'GET' && data){   url += (url.indexOf('?') == -1 ? '?' : '&') + data;   data = null;   }   var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');   xhr.onreadystatechange = function(){   _onStateChange(xhr,success,failure);   };   xhr.open(method,url,async);   if(method == 'POST'){   xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;');   }   xhr.send(data);   return xhr;   }   function _onStateChange(xhr,success,failure){   if(xhr.readyState == 4){   var s = xhr.status;   if(s>= 200 && s < 300){   success(xhr);   }else{   failure(xhr);   }   }else{}   }   return {request:request};   }();

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

Ajax.request('servlet/ServletJSON',{             data : 'name=jack&age=20',            success : function(xhr){                 //to do with xhr            },             failure : function(xhr){                 //to do with xhr    }    }    );

感谢各位的阅读，以上就是“怎么创建基本的Ajax应用”的内容了，经过本文的学习后，相信大家对怎么创建基本的Ajax应用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！