通用ajax请求方法封装,兼容主流浏览器

ajax简介

没有AJAX会怎么样?普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面。如果没有AJAX,在youku看视频的过程中如果点击了“顶、踩”、评论、评论翻页,页面就会刷新,视频就会被打断。开发一个看效果:用<video src="diaosi.mp4" autoplay controls></video>播放视频(只有支持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吧!
}

时间: 2024-10-10 09:16:59

通用ajax请求方法封装,兼容主流浏览器的相关文章

javascript中Ajax请求的封装代码

/****************************ajax请求 start**************************************/ function ajaxClass(_url, _successCallback, _failureCallback, _urlParameters, _callbackParams, _async, _charset, _timeout, _frequency, _requestTimes, _frame) { /** * AJAX

(转)兼容主流浏览器的CSS透明代码

透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } filter:alpha(opacity=50):这个是为IE6设的,可取值在0-100,其它三个0到1.-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器.-khtml-opacity: 0.5

加入收藏兼容主流浏览器代码

//加入收藏 function AddFavorite(){ if (document.all) { addToBookMark(window.location.href, document.title); } else if (window.sidebar) { addToBookMark(document.title, window.location.href); } } function addToBookMark(url,title){ var ua = navigator.userAg

兼容主流浏览器的CSS透明代码

收集一个兼容主流浏览器的透明CSS代码 filter:alpha(opacity=10); -moz-opacity:0.1; -khtml-opacity: 0.1; opacity: 0.1;

将内容复制到剪切板兼容主流浏览器的解决方案

html : <body> <div class="demo-area"> <label for="copy-input">输入要复制到剪切板的文字:</label><br> <textarea id="copy-input" cols="30" rows="10"></textarea><br> <but

ajax请求总是不成功?浏览器的同源策略和跨域问题详解

场景 码农小明要做一个展示业务数据的大屏给老板看,里面包含了来自自己网站的数据和来自隔壁老王的数据.那么自己网站的数据提供了 http://xiaoming.com/whoami 这样的数据接口隔壁老王提供了 http://oldwang.com/isdad 这样的数据接口单独点开都是没有问题的.但是一使用 js 的 ajax 请求就无法收到来自 oldwang.com 的数据了.点开浏览器控制台一看,红字标出(Chrome): XMLHttpRequest cannot load http:/

原生js和jquery发送ajax请求及封装

原生js                                   // ajax get 五部曲function ajax_get(url,data){ // 异步对象 var ajax=new XMLHttpRequest(); // 设置url和请求方式 // url方法 如果有数据要把数据拼接到url中?name=jack&age=20 if(data){ url+=?; url+=data; }else{}; ajax.open('get',url); // 发送请求 aja

javascript创建css、js,onload触发callback兼容主流浏览器的实现

http://www.fantxi.com/blog/archives/load-css-js-callback/ 由于需要写个函数,既可以加载css,又可以加载js,所以对各主流浏览器对加载js.css后是否触发onload事件做了个测试.当然,为了兼容,首先要考虑的是会用到onload和onreadystatechange,但他们并不是万能的.加载js文件onload触发callback不算大问题.css比较特殊,因为Webkeit/FF下加载css不会触发onload事件.所以研究了一晚上

ajax请求方法

ajax请求: 1.这里介绍下原生方法: get方法: function getMethod(){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readystate == 4){ if((xhr.status >=200)&&(xhr.status < 300) || xhr.status == 304){ console.log(responseText); } els