07/09/2018, 15:21
Tìm hiểu ví dụ về AJAX ASP
AJAX được sử dụng để tạo các ứng dụng tương tác. Ví dụ về AJAX ASP Ví dụ sau sẽ thể hiện cách một trang web có thể giao tiếp với một máy chủ web trong khi một người sử dụng loại ký tự trong một trường đầu vào: Giải thích ví dụ Trong ví dụ trên, khi ...
AJAX được sử dụng để tạo các ứng dụng tương tác.
Ví dụ về AJAX ASP
Ví dụ sau sẽ thể hiện cách một trang web có thể giao tiếp với một máy chủ web trong khi một người sử dụng loại ký tự trong một trường đầu vào:
Giải thích ví dụ
Trong ví dụ trên, khi người dùng nhập một ký tự vào trường đầu vào, một hàm gọi là “showHint()” được thực hiện. Hàm được kích hoạt bởi sự kiện onkeyup.
Dưới đây là mã HTML:
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "gethint.asp?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>Start typing a name in the input field below:</b></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
Giải thích đoạn mã trên:
Đầu tiên, hãy kiểm tra xem trường đầu vào có rỗng không (str.length == 0). Nếu có, xóa nội dung của trình giữ chỗ txtHint và thoát khỏi hàm.
Nếu trường nhập không rỗng, thực hiện các bước dưới đây:
- Tạo một đối tượng XMLHttpRequest
- Tạo ra các hàm để được thực hiện khi phản ứng của máy chủ khi sẵn sàng
- Gửi yêu cầu tới tệp ASP (gethint.asp) trên máy chủ
- Lưu ý rằng tham số q được thêm vào gethint.asp? Q = “+ str
- Biến str chứa nội dung của trường đầu vào
Tham khảo thêm các khóa học lập trình web từ Front-end đến Back-end do trực tiếp giảng viên quốc tế trường FPT Arena giảng dạy giúp bạn thành thạo kỹ năng lập trình web từ CƠ BẢN – NÂNG CAO với giá chỉ từ 290,000đ:
- Học lập trình front-end cơ bản với bootstrap 4/html5/css3
- Học lập trình front-end nâng cao qua Project thực tế
- Học thiết kế web với Photoshop, CSS theo kiểu SASS
- Học cách sử dụng Git_hub cho lập trình viên
- Học lập trình Back-end PHP theo mô hình MVC cơ bản
- Học lập trình Back-end PHP theo mô hình MVC nâng cao
- Học lập trình Cơ sở dữ liệu với AngularJS
- Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
- Combo lập trình front-end từ cơ bản – nâng cao
- Combo lập trình back-end từ cơ bản đến nâng cao
- Combo lập trình web với word press từ A-Z
