原生axaj函数与upload函数

/* 封装ajax函数
 * @param {string}opt.type http连接的方式，包括POST和GET两种方式
 * @param {string}opt.url 发送请求的url
 * @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的
 * @param {object}opt.data 发送的参数，格式为对象类型
 * @param {function}opt.success ajax发送并接收成功调用的回调函数
 */
    function ajax(opt) {
        opt = opt || {};
        opt.method = opt.method.toUpperCase() || 'POST';
        opt.url = opt.url || '';
        opt.async = opt.async || true;
        opt.data = opt.data || null;
        opt.success = opt.success || function () {};
        var xmlHttp = null;
        if (XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        }
        else {
            xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
        }var params = [];
        for (var key in opt.data){
            params.push(key + '=' + opt.data[key]);
        }
        var postData = params.join('&');
        if (opt.method.toUpperCase() === 'POST') {
            xmlHttp.open(opt.method, opt.url, opt.async);
            xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
            xmlHttp.send(postData);
        }
        else if (opt.method.toUpperCase() === 'GET') {
        	// 20181215 get方法时判断是否带参数
        	if( postData ){
	            xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
        	} else {
	            xmlHttp.open(opt.method, opt.url, opt.async);
        	}
            xmlHttp.send(null);
        } 
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                opt.success(xmlHttp.responseText);
            }
        };
    }
	
/* 使用方法
ajax({
    method: 'POST',
    url: 'index.php',
    data: {
        name1: 'value1',
        name2: 'value2'
    },
    success: function (response) {
       console.log(response);
    }
}); 
*/

 

 

/* 封装上传函数upload	
 *@  author：kajweb @ MaoMing Guangdong China
 *@  更新时间：2017年6月13日 01：36
 *@  只支持HTML5
 *@		upload({
 *@			url		: {string},		//URL
 *@			data	: {object},		//传入的FormData
 *@			success : {function},	//成功执行的回调函数
 *@			faild   : {function}	//失败执行的回调函数
 *@		})
 */

/*
 *@		Ver 1.4
 *@		添加后缀过滤参考函数
 */

function upload(opt){
	opt.url=opt.url;
	opt.data = opt.data || null;
	opt.success = opt.success || function () {};
	opt.faild = opt.faild || function () {};
	var oReq = new XMLHttpRequest();
	oReq.open("POST", opt.url, true);
	oReq.onload = function(oEvent) {
		if (oReq.readyState == 4 && oReq.status == 200) {
			opt.success(oReq.responseText)
		} else {
			opt.faild(oReq.status)
		}
	};
	oReq.send(opt.data);
}


//一下两种方法二选一，效果好像一样
getElement = document.getElementsByTagName("form")[0]
getElement = document.querySelector("form")



//一下两种添加数据的方法
//添加全部表单
var MyData = new FormData(getElement);

//只上传文件
var MyData = new FormData();
var setUpfile={
	FormName:"file",
	ElementData:document.getElementById("file").files[0],
	//UploadName:"1.txt"
}
	setUpfile.uploadName2=setUpfile.uploadName2||null;
	MyData.append(setUpfile.FormName,setUpfile.ElementData,setUpfile.UploadName);
	
/* 	
//后缀过滤
	ElementData = document.getElementById("file").files[0].name
	ElementDataType=ElementData.split(".")
	//方法一， .后面的
	var ElementDataType = ElementDataType[ElementDataType.length - 1]
	//方法二， 后面四位
	var ElementDataType = ElementData.substr(ElementData.length-4,ElementData.length);
	allowType = "jpg||jpeg||png||gif";
	if(ElementDataType.indexOf(allowType)){ 	}else{	}
*/
	
/*
	//暂时没用的
	var oBlob = new Blob([oFileBody], { type: "text/xml"});
	MyData.append("webmasterfile", oBlob);
*/

	
//显示图片的函数 img为DOM节点
	//img.src=window.URL.createObjectURL(document.getElementById("file").files[0])

	
	
//调用函数
upload({
	url:"upload.php",
	data:MyData,
	success: function (response) {
       console.log(response);
    },
	faild : function (response) {
       console.log("Error " + response + " occurred uploading your file.<br \/>");
    }
});


/*
文件名 : upload.php
描述 : 显示上传文件的信息

<?php
//本文件用于查看单个文件上传
if ( empty($_FILES["file"]["size"]) || $_FILES["file"]["error"] > 0 )
  {
  echo "Error: " . $_FILES["file"]["error"] . "<br />";
  }
else
  {
  echo "Upload: " . $_FILES["file"]["name"] . "<br />";
  echo "Type: " . $_FILES["file"]["type"] . "<br />";
  echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
  echo "Stored in: " . $_FILES["file"]["tmp_name"];
  }
?>
*/

upload上传以multipart/form-data

 

ajax上传以application/x-www-form-urlencoded

 

upload的data以FormData的方式加入

ajax的data以Json的方式加入