美文网首页
ajax原生封装

ajax原生封装

作者: heachou | 来源:发表于2017-02-06 14:37 被阅读0次

    1、创建ajax对象

    2、连接服务器

    3、发送请求

    4、接收返回数据

    function Ajax(type, url, data, success, failed){

        // 创建ajax对象

        var xhr = null;

        if(window.XMLHttpRequest){

            xhr = new XMLHttpRequest();

        } else {

            xhr = new ActiveXObject('Microsoft.XMLHTTP')

        }

        var type = type.toUpperCase();

    // 用于清除缓存

        var random = Math.random();

        if(typeof data == 'object'){

            var str = '';

            for(var key in data){

            str += key+'='+data[key]+'&';

        }

        // 替换掉最后的"&"

        data = str.replace(/&$/, '');

        }

        if(type == 'GET'){

            if(data){

            xhr.open('GET', url + '?' + data, true);

        } else {

            xhr.open('GET', url + '?t=' + random, true);

        }

        xhr.send();

        } else if(type == 'POST'){

            xhr.open('POST', url, true);

    // 如果需要像 html 表单那样 POST 数据,请使用 setRequestHeader() 来添加 http 头。

            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

            xhr.send(data);

        }

    // 处理返回数据

    xhr.onreadystatechange = function(){

        if(xhr.readyState == 4){

            if(xhr.status == 200){

    // 成功

                 success(xhr.responseText);

            } else {

    // 失败

                   if(failed){

                        failed(xhr.status);

                    }

              }

          }

       }

    }

    相关文章

      网友评论

          本文标题:ajax原生封装

          本文链接:https://www.haomeiwen.com/subject/fbxuittx.html