手写ajax

作者: CRUD_科科 | 来源:发表于2019-06-28 14:48 被阅读0次
function ajax(obj){
    if(typeof obj!="object"){
        console.error("参数类型错误");
        return;
    }
    var url=obj.url;
    if(obj.url==undefined){
        console.error("地址必须指定");
        return;
    }
    var type=obj.type||"get";
    var asynch=obj.asynch===undefined?true:obj.asynch;   //判断是否为异步连接
    var dataType=obj.dataType||"text";

//判断传入的数据类型
    var data=obj.data;
    if(typeof data=="object"){
        var temp="";
        for(var i in data){
            temp+=i+"="+data[i]+"&";
        }
        data=temp.slice(0,-1);
    }
//监听函数
    var xmlObj=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
    xmlObj.onreadystatechange=function(){
        if(xmlObj.readyState==4){
            if(xmlObj.status==200){
                var result;
                if(dataType=="XML"){
                    result=xmlObj.responseXML;
                }else if(dataType=="json"){
                    result=eval("("+xmlObj.responseText+")");
                }else if(dataType=="text"){
                    result=xmlObj.responseText;
                }
                obj.success(result);
            }
        }
    }
//判断获取方式
    if(type=="get"){
        xmlObj.open("get",url+"?"+data,asynch);
        xmlObj.send()
    }else if(type=="post"){
        xmlObj.open("post",url,asynch);
        xmlObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xmlObj.send(data);
    }
}

基于promise的ajax

function ajax({ url = '', type = 'get', dataType = 'json', asynch = 'true' }) {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.open(type, url, asynch);
    xhr.responseType = dataType;
    xhr.onload = function () { //xhr.readState=4 xhr.sratus=200
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject('error');
      }
    }
    xhr.onerror = function (err) {
      reject(err);
    }
    xhr.send();
  })
}

相关文章

  • 自己动手封装AJAX

    一、手写AJAX 首先我们先用原生JS手写一个AJAX: 这是一个POST请求的AJAX,可以通过修改 open ...

  • 手写AJAX与事件委托

    手写AJAX 完整版 简洁版 手写事件代理

  • 知识点---不定时更新

    cookie\session\localstorage跨域webpack手写ajax手写bind排序算法css常用...

  • 手写ajax

    基于promise的ajax

  • 手写AJAX

    首先创建XMLHttpRequest对象,第二步调用open方法,第三步监听对象的onload和onerror事件...

  • 手写 AJAX

    目录 没有 AJAX 的年代,怎么发请求 AJAX 是什么 XMLHttpRequest 的实例属性 XMLHtt...

  • 手写AJAX

    背代码,完整版 var request = new XMLHttpRequest() request.open('...

  • 原生JS写AJAX

    AJAX MDN_AJAX 手写AJAX的主要四个步骤:1.创建XMLHttpReauest2.处理响应(指定响应...

  • 像jQuery那样封装一个ajax

    ajax的手写、封装和自定义设置 1、目标 如果只是会用ajax就行,建议使用jquery等提供ajax功能的库,...

  • 手写原生ajax

    重要参考ajax与XMLHttpRequest阮一峰 XMLHttpRequest Level 2 使用指南 手写...

网友评论

    本文标题:手写ajax

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