AJAX

最新推荐文章于 2022-06-19 13:50:53 发布

StoneIT_ZL

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量298

点赞数

分类专栏： javascript 文章标签： ajax javascript 请求数据

本文链接：https://blog.csdn.net/StoneIT_ZL/article/details/77891760

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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 ) 
            }
        }
    }
}