1.Broswer端的Ajax
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>登入成功</h1>
<input type="text" id="username"/>
<input type="text" id="address"/>
<button onclick="queryAll()">查詢</button>
<div>
<table border="1" cellspacing="0" cellpadding="10" width="500px" id="mytable">
<tr><th>id</th><th>Name</th><th>Password</th><th>Address</th></tr>
</table>
</div>
<script>
function queryAll(){
var xhr;
var mytable=document.getElementById("mytable");
var usernameStr=document.getElementById("username").value;
var addressStr=document.getElementById("address").value;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft","XMLHTTP")
}
// xhr.open("get","queryAll.do？username"+usernameStr,true);//隻有get方法才可以把參數加在這裡
xhr.open("post","queryAll.do",true);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
//content-type隻有在為post方法的時候才配置
xhr.onreadystatechange=function(){
mytable.innerHTML="<tr><th>id</th><th>Name</th><th>Password</th><th>Address</th></tr>";
//每次重新整理html資料的時候，就先會把table清空，然後再添加資料
if(xhr.readyState==4&&xhr.status==200){
// console.log(xhr.responseText);
var datalist=JSON.parse(xhr.responseText);//用json将伺服器傳回的字元串轉換成了數組對象
for(var i=0;i<datalist.length;i++){
console.log(datalist[i].id);//通過屬性擷取值，datalist[i]是屬性
console.log(datalist[i].U_name);
console.log(datalist[i].U_pwd);
console.log(datalist[i].U_address);
mytable.innerHTML=mytable.innerHTML+"<tr><td>"+datalist[i].id+"</td><td>"
+datalist[i].U_name+"</td><td>"
+datalist[i].U_pwd+"</td><td>"
+datalist[i].U_address+"</td></tr>";
}
}
};
//xhr.send(null);//get方法下使用這個發送Ajax請求
xhr.send("username="+usernameStr)//post方法将發送的參數寫在這裡
}
</script>
</body>
</html>
2.Server端的響應：
queryUserAll:function(request,response){
console.log(request.body);
let name=request.body.username;
let address=request.body.address;
let sql="select * from t_use where U_name like ?";//單條件查詢
name="%"+name+"%";
dbconfig.getconnectionSql(sql,[name],function(err,data){
if(err==null||err==undefined){
//response.write(data);//原生的nodejs方法便發送不出去，因為data是一個object，不是字元串
//方法一
//response.write(JSON.stringify(data));//将data的object對象轉換成了字元串。**從資料庫中傳回的data都是object類型，不是針對Ajax請求
//response.end();
//方法二
response.send(data);//express架構自動将數組對象轉換成了字元串,
// response.send(data)就相當于response.write(JSON.stringify(data)
console.log(typeof data);//列印出來是object
}
})
}
3.主檔案app.js中的：
app1.post("/queryAll.do",useModule.queryUserAll);
Tips:
1>Ajax隻更新本html中的資料;
2>B端發起Ajax請求，與S端互動進行資料操作，且**S端傳回的是資料（是object類型），需要在B端用JSON進行轉換（JSON.parse(xhr.responseText)）轉換成數組對象;
3>Ajax是通過DOM來更新查詢資料，且隻更新部分資料，不會重新整理整個網頁的資料，像一個應用程式一樣；
4>通過資料庫查詢傳回的data都是object類型，不是針對Ajax；
