美文网首页
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封装

    原生ajax封装

  • ajax

    原生ajax配置详解 对ajax简单封装 调用

  • Ajax

    标签: Ajax 正文 一、实现一个原生Ajax 二、Ajax状态 三、将原生的 ajax 封装成 promise

  • 原生js ajax网络数据请求 XMLHttprequest、A

    再学封装ajax请求 原生JS,AJAX数据封装 兼容性处理 脚本: 请求操作:

  • ajax总结

    1. Ajax 1.1 原生JavaScript封装Ajax 1.2 jquery ajax 及其 快捷方法 $....

  • html5的ajax学习(三)

    一.原生的ajax封装 原生的ajax的调用 二.jquery的ajax 2.1 jquery的语法 三. fun...

  • promise封装原生ajax、jqueryAjax、axios

    原生js的ajax封装+promise 将原生js的ajax请求单独封装成一个数据请求的模块, 需要的时候直接调用...

  • jQuery中的Ajax

    jQuery中的ajax 封装第一层 - 类似于原生ajax的用法$ajax 封装第二层 - 基于第一层再次封装$...

  • 原生ajax封装

  • ajax原生封装

    1、创建ajax对象 2、连接服务器 3、发送请求 4、接收返回数据 function Ajax(type, ur...

网友评论

      本文标题:ajax原生封装

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