十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章主要讲解了“怎么创建基本的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应用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!