一、jquery中的ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>点我发送ajax</button>
<script src='../js/jquery-1.12.3.min.js'></script> //引入jquery框架
<script>
$('button').click(function(){ //给button添加点击事件
$.ajax({
type:'post', //请求类型 get(明文)或post(密文)
url:'yangjieAjax.php', //发送地址
dataType:'json', //数据类型为json
data:{ //data是post独有的,post请求才需要携带数据给后台
uname:'yangjie',
upass:'123456'
},
success:function (res){ //请求完成后,若收到后台返回的数据(res),这个函数自动执行
console.log(res);
}
})
})
jquery的方法虽然简单,但是必须引入jquery框架,然而框架中不是所有内容都能用到,就会造成大量无用代码,占用资源,所以我们用原生js方式发ajax
二、原生ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>点我发送ajax</button>
<script>
document.querySelector('button').onclick = function (){
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() :new ActiveXObject(); //创建xhr对象 兼容IE
xhr.onreadystatechange = function (){ //页面的加载状态监听(会在页面状态发生改变时自动调用)
if(xhr.readyState == 4){ //值为4 证明服务器已经完全收到信息
if(xhr.status == 200){ //值为200 证明前端接收到后台返回的数据
console.log(JSON.parse(xhr.responseText)); //当请求成功时,服务器返回的信息
}else{
console.log(xhr.statusText); //当请求失败时,服务器返回的信息
}
}
}
var formdata = new FormData(); //post需要携带数据给后台,所以创建一个表单来存数据(这个表单只要在send之前构建就可以)
formdata.append('uname','yangjie');
formdata.append('upass','123456');
xhr.open('post','yangjieAjax.php',true); //设置请求发送到哪里,不是真的发送,有三个参数是请求类型,发送地址和是否异步
xhr.send(formdata); //发送请求 如果是get,参数写null
}
原生虽然没有无用代码,但会大量重复代码,书写过于麻烦,所以我们封装一个自己的ajax框架就势在必行
三、封装ajax
;(function(){
function yangjieAjax(jsonObj){
var xhr = new XMLHttpRequest(); //创建xhr对象
function params(data){
var arr = [];
for(var i in data){
arr.push(i+'='+data[i]);
}
return arr.join('&');
}
if(jsonObj.type.toLowerCase() === 'get'){ //处理get请求的参数(因为不确定用户输入是大写还是小写,所以用tolowerCase)
jsonObj.data = params(jsonObj.data); //调用上面的函数 赋值给jsonObj.data
jsonObj.url += jsonObj.url.indexOf('?') == -1 ? '?'+jsonObj.data : '&'+jsonObj.data; //如果没有?就在参数前加?
}else if(jsonObj.type.toLowerCase() === 'post'){ //处理post请求的参数
var formdata = new FormData(); //构建表单
for(var i in jsonObj.data){ //遍历jsonObj.data 拼接到表单数据里
formdata.append(i,jsonObj.data[i]);
}
jsonObj.data = formdata; //然后赋值给jsonObj.data
}
if(jsonObj.async === true){ //如果发送的是异步请求 再发ajax
xhr.onreadystatechange = function (){
if(xhr.readyState == 4){
if(xhr.status == 200){
jsonObj.success(JSON.parse(xhr.responseText));
}else{
jsonObj.error(xhr.statusText);
}
}
}
xhr.open(jsonObj.type,jsonObj.url,jsonObj.async);
if(jsonObj.type.toLowerCase() === 'get'){
xhr.send();
}else if(jsonObj.type.toLowerCase() === 'post'){
xhr.send(jsonObj.data);
}
}
}
window.yangjieAjax = yangjieAjax;
}())
会用自己封装的ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>点我发送请求</button>
<script src ='yangjieAjax.js'></script>
<script>
document.querySelector('button').onclick = function (){
window.yangjieAjax({ //模仿Jquery 与后台约定好参数
type:'post',
url:'yangjieAjax.php',
async:true,
data:{
uname:'yangjie',
upass:'521521'
},
success:function (res){
console.log(res);
}
})
}
</script>
</body>
</html>