仅仅为了使用一个AJAX去加载JQuery库是不明智的，不使用JQuery，用纯JavaScript实现AJAX异步请求
有时候仅仅只用到异步提交就加载第三方js库是不明智的，纯js异步提交，javascript自写ajax方法,不依赖其他插件，调用方便。
demo.html源码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>纯js异步提交javascript自写ajax方法</title>
<meta name="keywords" content="纯js异步提交,javascript自写ajax方法">
<meta name="description" content="纯js异步提交javascript自写ajax方法,不依赖其他插件，调用方便。">
<style>
</style>
</head>
<body>
<div class="box">
<input type="text" id="param_id" /><br><br>
<input type="text" id="param_name" /><br><br>
<input type="file" id="param_file" /><br><br>
<input type="hidden" id="param_hidden" />
<button onclick="sub_fun();">提交</button>
</div>
</body>
<script type="text/javascript">
/**
* js异步提交自写ajax方法
*/
var zhlC_ajax = {
get: function(url,fn,s,e){
// XMLHttpRequest对象用于在后台与服务器交换数据
var xhr=new XMLHttpRequest();
xhr.open('GET',url,false);
xhr.onreadystatechange=function(){
// readyState == 4说明请求已完成
if(xhr.readyState==4){
if(xhr.status==200 || xhr.status==304){
console.log(xhr.responseText);
s(xhr.responseText);
}else{
e(xhr.responseText);
}
}
}
xhr.send();
},
post: function(url,data,s,e){
var xhr = new XMLHttpRequest();
xhr.open('POST',url);
xhr.onreadystatechange=function(){
if (xhr.readyState==4){
if (xhr.status==200 || xhr.status==304){
s(xhr.responseText);
}else if(xhr.status>=400){
e(xhr.responseText);
}
}
}
xhr.send(data);
}
};
/**
* 选择文件获取文件base64编码
*/
window.onload = function(){
var imagesfile = document.getElementById("param_file");
imagesfile.onchange = function () {
var file = imagesfile.files[0];
//判断文件大小不能超过10M ，免去服务器的压力。
if (file.size > 10 * 1024 * 1024) {
alert("上传文件必须 < 10Mb！");
return false;
}
// 获取文件
var reader = new FileReader(); // 实例化
reader.readAsDataURL(file); // 加载
reader.onload = function () { // 异步加载完成
console.log(reader);
var base64 = reader.result; // 获取 base64 DataURL
document.getElementById("param_hidden").value = base64;
}
}
}
/**
* 数据提交方法
*/
function sub_fun(){
var url = 'test.php';
var id = document.getElementById('param_id').value;
var name = document.getElementById('param_name').value;
var base64 = document.getElementById("param_hidden").value;
console.log(id);console.log(base64);
if(!id || !name || !base64){
alert('参数不能为空');return;
}
var uploadimg = base64File(base64);
var formData = new FormData(); // 实例化创建form表单
formData.append("id", id);
formData.append("name", name);
formData.append("uploadimg", uploadimg); // 增加参数
//var param = 'id='+id+'&name='+name;
zhlC_ajax.post(url,formData,function(data){
console.log('请求成功');
var newDate = JSON.parse(data);
if(newDate.code == 10000){
alert('成功');
}else{
alert('失败'+newDate.msg);
}
},function(data){
console.log('请求失败');
alert('网络异常,稍后再试');
});
}
/**
* 将图片Base64数据转成文件
*/
function base64File(base64Data) {
var arr = base64Data.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
</script>
</html>服务端接收数据以php为例：
<?php
$result = array('code'=>'40000','data'=>array());
$id = isset($_REQUEST['id']) ? $_REQUEST['id'] : '';
$name = isset($_REQUEST['name']) ? $_REQUEST['name'] : '';
$result['data']['id'] = $id;
$result['data']['name'] = $name;
if(!isset($_FILES)){
echo json_encode($result);exit;
}
$file = $_FILES['uploadimg']['tmp_name'];
$path = './upload/';
if(!file_exists($path)){
mkdir($path,0777);
}
$newname = time().rand(100,999);
// base64转blob时pathinfo($_FILES["multipartFile"]["name"], PATHINFO_EXTENSION);方式获取不到文件扩展名
$upfile = $path.$newname.'.jpg'; // 默认给个后缀
if(move_uploaded_file($file,$upfile)){
$suf = getFileType($upfile); // 上传成功后获取文件真实扩展名
$updatefile = $path.$newname.'.'.$suf;
$re = rename($upfile, $updatefile); // 修改文件
if($re){
//@unlink($upfile); // 删除老的文件
$upfile = $updatefile; // 重置新的文件路径
}
$result['code'] = 10000;
$result['data']['filepath'] = substr($upfile, 1);
}
echo json_encode($result);exit;
/**
* 判断文件类型
*/
function getFileType($file){
$filehead = fopen($file,'r');
$bin = fread($filehead, 2); //读取文件2字节
fclose($filehead);
$data = unpack('C2chars', $bin);
$type_code = intval($data['chars1'].$data['chars2']);
switch ($type_code) {
case 7790:
$fileType = 'exe';
break;
case 7784:
$fileType = 'midi';
break;
case 8075:
$fileType = 'zip';
break;
case 8297:
$fileType = 'rar';
break;
case 255216:
$fileType = 'jpg';
break;
case 7173:
$fileType = 'gif';
break;
case 6677:
$fileType = 'bmp';
break;
case 13780:
$fileType = 'png';
break;
default:
$fileType = '';
break;
}
return $fileType;
}
