封装ajax请求
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
ajax({
url:'./get.php',
data:{a:100,b:200},
dataType:'json',
success:function(response){
console.log('success')
console.log(response)
},
error:function(errorCode){
console.log('error')
console.log(errorCode)
}
})
function ajax(options={}){
if(!options.url){
throw new Error('url required !')
}
if(!(options.request===undefined || options.request.toUpperCase()==='GET' || options.request.toUpperCase()==='POST')){
throw new Error('GET and POST are permitted')
}
if(!(options.async===undefined || typeof options.async==='boolean')){
throw new Error('async has to be Boolean')
}
if(!(options.dataType===undefined || options.dataType==='string' || options.dataType==='json')){
throw new Error('support string and boolean')
}
if(!(options.data===undefined || typeof options.data==='string' || Object.prototype.toString.call(options.data)==='[object Object]')){
throw new Error('data support string and object')
}
var defaults={
url:options.url,
request:options.request || 'GET',
async:typeof options.async==='boolean' ? options.async : true,
dataType:options.dataType || 'string',
data:options.data || '',
success:options.success || function(){},
error:options.error || function(){}
}
if(typeof defaults.data==='object'){
let str=''
for(let key in defaults.data){
str+=key+'='+defaults.data[key]+'&'
}
defaults.data=str.slice(0,-1)
}
var xhr=new XMLHttpRequest()
if(defaults.request.toUpperCase()==='GET' && defaults.data){
defaults.url+='?'+defaults.data
}
xhr.open(defaults.request,defaults.url,defaults.async)
xhr.onreadystatechange=function(){
if(this.status>=200 && this.status<300 && this.readyState===4){
if(defaults.dataType==='json'){
let response=JSON.parse(this.responseText)
defaults.success(response)
}else if(defaults.dataType==='string'){
defaults.success(this.responseText)
}
}
if(this.readyState===4 && this.status>=400){
defaults.error(this.status)
}
}
if(defaults.request.toUpperCase()==='POST'){
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
}
xhr.send(defaults.data)
}
</script>
</body>
</html>
php
<?php
// echo 'ajax';
// $arr=array(
// 'username'=>'uiop',
// 'password'=>'123'
// );
// // print_r($arr);
// echo json_encode($arr);
$arr=array(
"message"=>"GET 法律success",
"data"=>$_GET
);
// echo $_GET['a'];
// $username=$_GET['use']
echo json_encode($arr);
?>
