原生ajax的封装
get请求 post请求 有参无参都可以实现
返回数据类型,需要自己处理,返回字符串格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" id='name'>
<input type="text" id='psd'>
<button id='btn'>登录</button>
<!--
$.ajax({
type:'get',
url:'06get.php',
data:{
name:name,
psd:psd
},
success:function(res){
console.log(res);
}
})
-->
<script>
var btn=document.getElementById('btn');
btn.onclick=function(){
var name=document.getElementById('name').value;
var psd=document.getElementById('psd').value;
// console.log(name,psd);
//执行ajax 我们希望像 jquery一样
myajax({
type:'post',
url:'06get.php',
data:{
name:name,
psd:psd
},
success:function(res){
console.log(res);
},
error:function(err){
console.log(err);
}
})
}
//函数 myajax( json数据) 参数类型固定:{type:'',url:'',data:'',success:}
function myajax(jsonData){//形参
var xhr=new XMLHttpRequest();
//准备发送 xhr.open('get/post',url,true);
//js和jquery 的区别:js里面get请求方式 和post 不同 同时参数需要拼接url
//get 数据拼接到url上面 post直接发送
//data是否存在发送数据 如果存在传参---data里面有数据
console.log(jsonData.data);
var newStr='';
// var str='';//存放字符串
if(jsonData.data){
console.log(jsonData.data);//{name:'',psd:''} 对象的格式修改下 最终:name=qq&psd=123
var data=jsonData.data;
var arr=[];
for(var i in data){
console.log(i)
console.log(data[i]);
var str=i+'='+data[i];
arr.push(str);
}
console.log(arr);//[name=qq,psd=123]
newStr=arr.join('&');//处理好的数据 请求的
console.log(newStr); //name=ee&psd=11
//请求的地址
}
if(jsonData.type.toLowerCase()=='get'){
xhr.open('get',jsonData.url+'?'+newStr);
xhr.send();
}else if(jsonData.type.toLowerCase()=='post'){
xhr.open('post',jsonData.url);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");
xhr.send(newStr);
}
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
//成功 获取数据
//console.log(xhr.responseText);//字符串 文本内容
jsonData.success(xhr.responseText);
}else{
jsonData.error(xhr.status);
}
}
}
}
</script>
</body>
</html>