Miễn 100% phí hồ sơ du học Nhật + Tặng 5~9 triệu/bạn

Saturday, February 10, 2018

[Lập trình] Very first AJAX

Tôi không biết gì về AJAX, trừ Ajax Amsterdam, cho tới khi đọc được sách thánh hiền tại đây.
AJAX is a developer's dream, because you can:
  • Read data from a web server - after the page has loaded
  • Update a web page without reloading the page
  • Send data to a web server - in the background

AJAX is not a programming language.
AJAX is a technique for accessing web servers from a web page.
AJAX stands for Asynchronous JavaScript And XML.
Điều quan trọng là tư duy lập trình: Kỹ thuật này làm được gì và sử dụng thế nào.

Vì thế tôi copy y chang và chỉ sửa lại code thôi. Nếu bạn tư duy logic (hợp lý) thì việc học tập trở nên dễ dàng hơn nhiều: Kiến thức, công cụ là để phục vụ con người chứ không phải ngược lại. (Vì cũng có những người sùng bái kiến thức kiểu hàn lâm, kinh viện.)

Trên localhost (dùng localhost cho nhanh đỡ phải tải lên server) trong thư mục "mark" tôi tạo hai file ajax.html và sha1_ajax.php (tên gì cũng OK).

File ajax.html sẽ dùng kỹ thuật AJAX để lấy nội dung của file sha1_ajax.php để hiển thị mà không phải tải lại trang. File này là để tạo mã hóa sha1 của string mà bạn nhập trong textbox ở ajax.html.

Chóng cả mặt! Look like this:


Ví dụ bạn nhập 'hello' vào textbox, rồi nhấn nút 'Encrypt' thì AJAX (JavaScript) sẽ lấy nội dung chuỗi SHA1 sinh ra bởi sha1.ajax.php và hiển thị mà không tải lại cả trang web.

Ghi chú: Khi chưa nhấn nút thì sẽ thế này:


Nếu dùng AJAX lập trình công cụ học tiếng Nhật thì sẽ khá COOL nhỉ!

Nội dung các file trong bài:

ajax.html
<!DOCTYPE html>
<html>
<head>
<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  var x = document.getElementsByName("mystring")[0].value;
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "sha1_ajax.php?string="+x, true);
  xhttp.send();
}
</script>
</head>
<body>
<div>
  <h2>Very first AJAX</h2>
  String to crypt: <input autocomplete="on" id="mystring" name="mystring" type="text" /><br />
  Sha1 cryption: <span id="demo">N/A</span><br /><br />
  <button type="button" onclick="loadDoc()">Encrypt</button>
</div>
</body>
</html>
sha1_ajax.php
<?php
$output = "";
if (isset($_GET['string'])) {
$output = sha1($_GET['string']);
} else {
$output = "Please provide 'string' parameter.";
}
echo $output;
?>
 >>Trang Programming

No comments:

Post a Comment