3. 16/09/2021
3
Copyright by Điện thông minh E-smart
Gửi yêu cầu trang web
Nhận nội dung trang web
Ajax gửi yêu cầu data
Ajax nhận data hiển thị
CLIENT SERVER
4. 16/09/2021
4
Copyright by Điện thông minh E-smart
Tạo đối tượng
XMLHttpRequest
1
Gửi Request tới Server
Nhận và xử lý Response
từ Server
2
3
5. 16/09/2021
5
Copyright by Điện thông minh E-smart
1. Tạo đối tượng XMLHttpRequest
var Tên_biến = new XMLHttpRequest();
2. Gửi Request tới Server:
xhttp.open(“Phương_thức", “URL", Async);
xhttp.send();
Phương_thức: GET hoặc POST
URL: đường dẫn thiết lập trên server
Async: true/false (bất đồng bộ/đồng bộ)
6. 16/09/2021
6
Copyright by Điện thông minh E-smart
3. Nhận và Xử lý Response từ Server
xhttp. onreadystatechange = function (){
if(xhttp. readyState==4 && xhttp.status==200){
Data = xhttp.responseText;
}
};
readyState
0: Requet chưa được khởi tạo
1: Request đã được thiết lập
2: Request đã được gửi
3: Request đang được xử lý
4: Kết thúc Request
status 404 cho "Not Found“
200 cho "OK"
7. 16/09/2021
7
Copyright by Điện thông minh E-smart
Thiết lập URL nhận
Request từ client
1
Xử lý dữ liệu ứng với
Request nhận được
2
Gửi Response về
client
3
8. 16/09/2021
8
Copyright by Điện thông minh E-smart
1. Thiết lập nhận Request từ client:
webServer.on(“URL",Xử_lý_Request);
void Xử_lý_Request(){
String ssid = webServer.arg(“ssid”);
String password = webServer.arg(“pass”);
String s = "Data is saved!";
webServer.send(200,"text/html",s);
}
webServer.send 200: OK 404: not found
Style: text/plain
text/html
application/json
2. Xử lý Request nhận được: 3. Gửi Response về client
9. 16/09/2021
9
Copyright by Điện thông minh E-smart
Định dạng lưu trữ thông tin có cấu trúc
Sử dụng cho truyền tải dữ liệu giữa server và client
JSON
Ví dụ:
{"ssidSTA": "DTM E-SMART", "passSTA": "0919890938"}
Cấu trúc
KEYS: phải là chuỗi
VALUES: array, object, chuỗi, boolean, số hoặc rỗng
10. 16/09/2021
10
Copyright by Điện thông minh E-smart
1. Một chuỗi (string) được đặt giữa cặp dấu nháy kép
Ví dụ: {"ssid":"DTM E-SMART"}
2. Một số
Ví dụ: {"analog":512}
3. Một chuỗi JSON con (gọi là một đối tượng JSON hay JSON object)
Ví dụ: {"wifi_sta":{"ssid":"E-SMART", "pass":"0919890938"}}
4. Một mảng các phần tử con được đặt giữa cặp dấu [ và ]
Ví dụ: {"ssidlist":["E-SMART", "Dien Thong Minh", "HOME"]}
5. Một giá trị boolean
Ví dụ: {"logicD0":true}
6. null
Ví dụ: {"password":null}
11. 16/09/2021
11
Copyright by Điện thông minh E-smart
{"ssid_ap": "tên wifi","pass_ap": "mật khẩu"};
Ví dụ:
ssid_ap = "E-SMART";
pass_ap = "12345678";
String s = "{"ssid_ap": ""+ ssid_ap +"","pass_ap": ""+ pass_ap +""}";
Hoặc:
String s = "{"ssid_ap": ""+ ssid_ap +""," +
""pass_ap": ""+ pass_ap +""}";
12. 16/09/2021
12
Copyright by Điện thông minh E-smart
JSON.parse("Chuỗi json"); tạo ra object JavaScript để xử lý dữ liệu
Tạo object javascript
1
Lấy giá trị từng
object
2
Hiển thị ra 1 ví trí id
3
