<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//ajax流程：前台送查询json到后台，后台返回查询结果json给前台，前台利用json.parse解码后循环添加到页面中
//通用函数，后面调用
function $ajax({type = "get", url, data, success, error}){ //data发送数据 success成功后执行函数 error失败后执行函数
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP")
}
if(type == "get" && data){
url += "?" + querystring(data);
}
xhr.open(type, url, true);
if(type == "get"){
xhr.send();
}else{
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); //设置提交数据格式
data ? xhr.send(querystring(data)) : xhr.send();
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
if(success){
success(xhr.responseText);
}
}else{
if(error){
error("Error：" + xhr.status);
}
}
}
}
}
function querystring(obj){
var str = '';
for(var attr in obj){
str += attr + "=" + obj[attr] + "&";
}
return str.substring(0, str.length - 1);
}
//具体应用
window.onload = function(){
var aBtns = document.getElementsByTagName("button");
aBtns[0].onclick = function(){ //前台送出json
$ajax({
url: "web/ajax_in.php",
data: {
username: "小明",
age: 18,
password: "123abc"
},
success: function(result){
alert("GET请求到的数据：" + result);
},
error: function(msg){
alert("GET请求数据错误：" + msg);
}
})
}
aBtns[1].onclick = function(){ //前台送出json
$ajax({
type: "post",
url: "web/ajax_in.php",
data: {
username: "小花",
age: 18,
password: "123abc"
},
success: function(result){
alert("POST请求到的数据：" + result);
},
error: function(msg){
alert("POST请求数据错误：" + msg);
}
})
}
}
</script>
</head>
<body>
<button>GET请求</button>
<button>POST请求</button>
</body>
</html>
如果是php服务器端，接收直接用：
$data = $_GET['username'];
$data =$_POST['username'];
$allData = file_get_contents('php://input'); //全接收