用原生的ajax发送请求
var xhr = new XMLHttpRequest();
xhr.open(‘请求方式(post/get)‘, ‘请求url‘,true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
// 接收完毕
var obj = JSON.parse(xhr.responseText); //获取请求回来的数据
}
};
xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded; charset-UTF-8‘);
xhr.send("发送的数据");
用jQuery的Ajax发送请求
$.ajax({
url: ‘/url/‘,
type: ‘请求方式‘,
data: 数据,
success:function(res){
}
})
用伪Ajax
<iframe id="ifm1" url=‘发起请求的url‘ style="display: none;"></iframe>
发送请求
<form id="form1" action="发起请求的url" method="POST" enctype="multipart/form-data" target="与iframe的name绑定">
<iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
<input type="file" name="fafafa" onchange="changeUpalod();" />
<input type="submit" onclick="iframeSubmit();" value="Form提交"/>#}
</form>
获取返回的数据
function iframeSubmit(){
$(‘#ifm1‘).load(function(){
var text = $(‘#ifm1‘).contents().find(‘body‘).text();
var obj = JSON.parse(text);
})
}
因为iframe里面的数据是服务端返回了才有,也就是说服务端返回就会触发onload事件,所以说我们可以在提交的时候给iframe绑定load事件,等服务器返回就会触发这个事件
发送文件
原生ajax
var file_obj = document.getElementById(‘fafafa‘).files[0];
var fd = new FormData();
fd.append(‘fafafa‘,file_obj);
fd.append(‘pwd‘,‘123‘)
xhr.send(fd);
jQuery中的ajax
function jqSubmit(){
// $(‘#fafafa‘)[0]
var file_obj = document.getElementById(‘fafafa‘).files[0];
var fd = new FormData();
fd.append(‘username‘,‘root‘);
fd.append(‘fafafa‘,file_obj);
$.ajax({
url: ‘/upload_file/‘,
type: ‘POST‘,
data: fd,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
success:function(arg);
}
})
原生Ajax与jQuery的Ajax和伪Ajax