客戶端測試：GET方法實現Ajax異步
var request = new XMLHttpRequest();
???????????????????????? request.open("GET","sever.php?number="+ document.getElementById("keyword").value);
???????????????????????? request.send();
????????????????????????
???????????????????????? request.onreadystatechange = function(){
????????????????????????????????? if(request.readyState === 4)
????????????????????????????????? {
????????????????????????????????????????? if(request.status === 200)
????????????????????????????????????????? ? {
????????????????????????????????????????????????? ? //更新查詢結果的內容
????????????????????????????????????????????????? ? document.getElementById('search_result').innerHTML = request.responseText;
????????????????????????????????????????????????? ? }
????????????????????????????????? ??? else{
????????????????????????????????????????????????? alert("發生錯誤"+ request.status)
????????????????????????????????????????????????? }
????????????????????????????????????????? }
???????????????????????? }
Content-Type表示：數據的類型，如果設置錯誤，造成錯誤的信息
POST 發送請求
document.getElementById('savebtn').οnclick=function(){
???????????????????????? //發送請求
???????????????????????? var request = new XMLHttpRequest();
???????????????????????? var data = "name=" + document.getElementById('staffName').value
???????????????????????? ?????????? +"&number=" + document.getElementById('staffNumber').value
????????????????????????????????????????? ? ?+"&sex=" + document.getElementById('staffSex').value
????????????????????????????????????????? ?? +"&job=" + document.getElementById('staffJob').value
???????????????????????? request.open("POST","sever.php?");
???????????????? //
?????? 設置請求頭
??????? request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
???????????????????????? request.send(data);
????????????????????????
???????????????????????? request.onreadystatechange = function(){
????????????????????????????????? if(request.readyState === 4)
????????????????????????????????? {
????????????????????????????????????????? if(request.status === 200)
????????????????????????????????????????? ? {
????????????????????????????????????????????????? ? //更新查詢結果的內容
????????????????????????????????????????????????? ? document.getElementById('create_result').innerHTML = request.responseText;
????????????????????????????????????????????????? ? }
????????????????????????????????? ??? else{
????????????????????????????????????????????????? alert("發生錯誤"+ request.status)
????????????????????????????????????????????????? }
????????????????????????????????????????? }
???????????????????????? }
????????????????????????
????????????????????????
????????????????????????
???????????????????????? }
6：JSON方式傳送數據
JSON存儲交換信息的語法是javascript對象
?
var json = '{"staff": [{"name": "張三","age": "10"},{"name": "張三","age": "20"}]}';
?????????????????????????????????
????????????????????????????????? var jsonobj = JSON.parse(json);//JSON字符串轉換成javascript對象
????????????????????????????????? console.log(jsonobj.staff[0].name);
可以使用現在校驗工具直接檢查JSON字符串的格式
?
JSON的方式返回,在客戶端需要進行轉換，JSON.parse(),服務端不需要
$result = '{"success":true,"msg":"找到員工：員工編號：' . $value["number"] .
?????????????????????????????????????????????????????????? '，員工姓名：' . $value["name"] .
?????????????????????????????????????????????????????????? '，員工性別：' . $value["sex"] .
?????????????????????????????????????????????????????????? '，員工職位：' . $value["job"] . '"}';
通過字符串來傳遞數據
)
