首页 > 代码库 > 通用ajax请求方法封装,兼容主流浏览器
通用ajax请求方法封装,兼容主流浏览器
ajax简介
没有AJAX会怎么样?普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面。如果没有AJAX,在youku看视频的过程中如果点击了“顶、踩”、评论、评论翻页,页面就会刷新,视频就会被打断。开发一个看效果:用<video src=http://www.mamicode.com/"diaosi.mp4" autoplay controls>播放视频(只有支持html5的浏览器能播放),然后放一个“赞”按钮的功能(赞的数量存到数据库),看没有ajax会打断视频,看优酷则不会。>
AJAX是一种进行页面局部异步刷新的技术。用AJAX向服务器发送请求和获得服务器返回的数据并且更新到界面中,不是整个页面刷新,而是在HTML页面中使用JavaScript创建XMLHTTPRequest对象来向服务器发出请求以及获得返回的数据,就像JavaScript版的WebClient一样,在页面中由XMLHTTPRequest来发出Http请求和获得服务器的返回数据,这样页面就不会刷新了。XMLHTTPRequest是AJAX的核心对象
有些重复的东西,我们不希望每次使用的时候都自己手动再去重新写一遍,或者重新复制一遍,这时,我就需要对代码进行封装。方法封装的原则:把不变的代码封装起来,把变的东西作为参数传递过去。
//url:ajax请求地址带需要传递的参数,onsuccess:请求成功后执行的js方法 function ajax(url, onsuccess) { var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象,考虑兼容性。XHR xmlhttp.open("POST", url, true); //“准备”向服务器的GetDate1.ashx发出Post请求(GET可能会有缓存问题)。这里还没有发出请求 //DRY:不要复制粘贴代码 //AJAX是异步的,并不是等到服务器端返回才继续执行 xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4) //readyState == 4 表示服务器返回完成数据了。之前可能会经历2(请求已发送,正在处理中)、3(响应中已有部分数据可用了,但是服务器还没有完成响应的生成) { if (xmlhttp.status == 200) //如果Http状态码为200则是成功 { onsuccess(xmlhttp.responseText); } else { alert("AJAX服务器返回错误!"); } } } //不要以为if (xmlhttp.readyState == 4) {在send之前执行!!!! xmlhttp.send(); //这时才开始发送请求。并不等于服务器端返回。请求发出去了,我不等!去监听onreadystatechange吧! }
通用ajax请求方法封装,兼容主流浏览器
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。