美文网首页
原生js实现ajax方法总结;

原生js实现ajax方法总结;

作者: love2013 | 来源:发表于2016-11-07 19:53 被阅读383次

function ajax(){

var ajaxData = {

type:arguments[0].type || "GET",

url:arguments[0].url || "",

async:arguments[0].async || "true",

data:arguments[0].data || null,

dataType:arguments[0].dataType || "text",

contentType:arguments[0].contentType || "application/x-www-form-urlencoded",

beforeSend:arguments[0].beforeSend || function(){},

success:arguments[0].success || function(){},

error:arguments[0].error || function(){}

}

ajaxData.beforeSend()

var xhr = createxmlHttpRequest();

xhr.responseType=ajaxData.dataType;

xhr.open(ajaxData.type,ajaxData.url,ajaxData.async);

xhr.setRequestHeader("Content-Type",ajaxData.contentType);

xhr.send(convertData(ajaxData.data));

xhr.onreadystatechange = function() {

if (xhr.readyState == 4) {

if(xhr.status == 200){

ajaxData.success(xhr.response)

}else{

ajaxData.error()

}

}

}

}

function createxmlHttpRequest() {

if (window.ActiveXObject) {

return new ActiveXObject("Microsoft.XMLHTTP");

} else if (window.XMLHttpRequest) {

return new XMLHttpRequest();

}

}

function convertData(data){

if( typeof data === 'object' ){

var convertResult = "" ;

for(var c in data){

convertResult+= c + "=" + data[c] + "&";

}

convertResult=convertResult.substring(0,convertResult.length-1)

return convertResult;

}else{

return data;

}

}

ajax({

type:"POST",

url:"ajax.php",

dataType:"json",

data:{"val1":"abc","val2":123,"val3":"456"},

beforeSend:function(){

//some js code

},

success:function(msg){

console.log(msg)

},

error:function(){

console.log("error")

}

})

相关文章

  • 原生js实现ajax及get post方法

    @拭目以待:首发于原生js实现ajax及get post方法 ajax原生实现,含 post与get方法。原码如下...

  • 原生js实现Ajax

    原生js实现Ajax方法:var Ajax={get: function(url, fn) { var xhr =...

  • 自己实现 Ajax

    用不同方法来实现 Ajax 基本是前端的经典考题了,这篇文章总结了2种常用的实现 Ajax 方法,分别是原生 JS...

  • 原生js实现ajax方法总结;

    function ajax(){ var ajaxData = { type:arguments[0].type ...

  • 原生JS实现AJAX

    原生JS实现AJAX代码,代码如下 如果需要ajax运行方法完成后调用结果的话 需要使用回调函数 或者 promi...

  • Ajax使用专题

    参考:ajax总结 原生Ajax level 1 XMLHTTPRequest 属性,方法和事件 XMLHTTPR...

  • 前端基础知识-示例代码

    1、ajax 2、jsonp a、原生实现方式 b、jquery ajax: c、vue.js d、npm包jso...

  • js原生的ajax

    //下面是原生的js实现的ajax function myajax(){ var xmlhttp; if (win...

  • 原生js实现Ajax

    如果要用原生的JS实现Ajax怎么整呢,让我们一起来整一个试试。 方法: /** 详细说明: 1.Ajax步骤:1...

  • AJAX各种请求

    自己收集总结的一些AJAX的数据请求; 1、原生JS的AJAX请求 var XHR=null; if (windo...

网友评论

      本文标题:原生js实现ajax方法总结;

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