異步請求的ajax在前後臺傳遞參數和數據非常方便，尤其在可視化數據分析方面具有異常的優勢，下面講解一下AJAX請求的步驟和代碼，分爲兩個部分，一部分是原生的JS請求，一個是Jquery請求：
一、原生JS請求使用的是XMLHttpRequest（）
var xhr = new XMLHttpRequest();
xhr.open("post","validate.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 1.get的參數在url拼接了，所以不需要在這個函數中設置
// 2.post的參數在這個函數中設置(如果有參數)
xhr.send(null) //Get
//xhr.send("username="+name); //Post
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){
console.log(xhr.responseText);
}
Get方法如下
var xhr = new XMLHttpRequest();
xhr.open("get","validate.php?username="+name);
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){ console.log(xhr.responseText); document.querySelector(".showmsg").innerHTML = xhr.responseText;;
}
}
Post方法如下
var xhr = new XMLHttpRequest();
xhr.open("post","validate.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("username="+name);
xhr.onreadystatechange = function(){
// 判斷服務器是否響應，判斷異步對象的響應狀態
if(xhr.status == 200 && xhr.readyState == 4){
document.querySelector(".showmsg").innerHTML = xhr.responseText;
}
}
在客戶端使用get請求時,服務器端使用Request.QueryString來獲取參數,而客戶端使用post請求時,服務器端使用Request.Form來獲取參數.
二、Jquery中的Ajax
$.ajax({
type:"get",// get或者post
url:"abc.php",// 請求的url地址
data:{},//請求的參數
dataType:"json",//json寫了jq會幫我們轉換成數組或者對象 他已經用JSON.parse弄好了
timeout:3000,//3秒後提示錯誤
beforeSend:function(){
// 發送之前就會進入這個函數
// return false 這個ajax就停止了不會發 如果沒有return false 就會繼續
},
success:function(data){ // 成功拿到結果放到這個函數 data就是拿到的結果
},
error:function(){//失敗的函數
},
complete:function(){//不管成功還是失敗 都會進這個函數
}
})
// 常用
$.ajax({
type:"get",
url:"",
data:{},
dataType:"json",
success:function(data){
}
})
$.ajax() 都可以發
$.post(url,data,success,datatype):本質上只能發送post請求
$.get(url,data,success,datatype):本質上只能發送get請求
完整的Ajax示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
query httprequest
</title>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js">
</script>
</meta>
</head>
<body>
<button id="bid">
123123
</button>
<script type="text/javascript">
$('#bid').click(function(){
$.ajax({
url:'3.query.php',//地址
dataType:'json',//數據類型
type:'GET',//類型
timeout:2000,//超時
//請求成功
success:function(data,status){
//alert(data);
//alert(status);
},
//失敗/超時
error:function(XMLHttpRequest,textStatus,errorThrown){
if(textStatus==='timeout'){
alert('請求超時');
setTimeout(function(){
alert('重新請求');
},2000);
}
//alert(errorThrown);
}
})
})
</script>
</body>
</html>
一個完整的示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts</title>
<script src="js/echarts.min.js"></script>
<script src="js/jquery-3.1.1.js"></script>
</head>
<body>
<!-- 爲 ECharts 準備一個具備大小（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 新建productName與nums數組來接受數據，因爲我們
var productName = [];
var nums = [];
//AJAX接收數據主體
$.ajax({
type:"GET",
url:"/project",
dataType:"json",
async:false,
success:function (result) {
for (var i = 0; i < result.length; i++){
productName.push(result[i].productName);
nums.push(result[i].nums);
}
},
error :function(errorMsg) {
alert("獲取後臺數據失敗！");
}
});
// 指定圖表的配置項和數據
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
//結合
data: productName
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
//結合
data: nums
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
另外一個示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts</title>
<script src="js/echarts.min.js"></script>
<script src="js/jquery-3.1.1.js"></script>
</head>
<body>
<!-- 爲 ECharts 準備一個具備大小（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
title : {
text: '某站點銷售情況',
subtext: '純屬虛構',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
},
series : [
{
name: '訪問來源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:(function () {
var datas = [];
$.ajax({
type:"POST",
url:"/project",
dataType:"json",
async:false,
success:function (result) {
for (var i = 0; i < result.length; i++){
datas.push({
"value":result[i].nums, "name":result[i].productName
})
}
}
})
return datas;
})(),
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
</script>
</body>
