客戶端測試：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"] . '"}';

通過字符串來傳遞數據

轉載于:https://www.cnblogs.com/love-life-insist/p/9063791.html

總結

以上是生活随笔為你收集整理的Ajax异步（客户端测试）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。