AJAX

来源:互联网 发布:html5media.js 编辑:程序博客网 时间:2024/06/05 02:06

ajax请求的过程

0: 请求未初始化(还没有调用 open() )1: 请求已经建立,但是还没有发送(还没有调用 send())2: 请求已发送,正在处理中(通常现在可以从响应中获取内容头)3: 请求在处理中,通常响应中已经有部分数据是可用的了,但是服务器还没有完成响应的生成4: 响应已完成,可以获取并使用服务器的响应了

原生ajax简单封装

/**    传参规则: *  ajax({ *      'method': 'POST'/'GET',     // 请求方式 *      'asyn': true/false,         // 是否异步 *      'data': 'user=' + userVal + '&pwd' = '+pwdVal',   // 请求参数      'url':  *      'url': 'http://www.baidu.com',   //  请求地址 *      'fn': function(response){    //   回调函数 *          alert(response) *       } *  }) */function ajax( aJson ){    var method = aJson.method || 'GET';        url = aJson.url,        asyn = aJson.asyn || true,        data = aJson.data || null,        fn = aJson.fn;    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject( 'Microsoft.XMLHttp' );    if( method.toUpperCase() === 'GET' && data){        url = url + '?' + data + & + new Date();  //  拼接  new Date()  的作用是解决IE的缓存问题,此时发送的每次都是变化的        data = null;  //  拼接完之后将data清空, GET  方式发送时 xhr.send( data )中的参数应为空    }    xhr.open( method, url, asyn );    xhr.setRequestHeader( 'content-type', 'application/x-www-form-urlencoded' );  //  声明编码格式    xhr.send( data );  //  发送数据    xhr.onreadystatechange = function(){    //  当状态准备改变时触发的事件        if(xhr.readyState == 4){    //  判断是否为第四个状态            if( xhr.status >= 200 && xhr.status <= 300 ){                fn &&fn(xhr.responseText);            }else{                alert( '请求错误:' + xhr.status )             }        }    }}
原创粉丝点击