AJAX được sử dụng để tạo ra các ứng dụng tương tác nhiều hơn.
Ví dụ AJAX PHP
Ví dụ sau đây sẽ chứng minh cách một trang web có thể giao tiếp với máy chủ web trong khi một nhân vật kiểu người dùng trong trường đầu vào:
Thí dụ
Bắt đầu nhập tên trong trường đầu vào bên dưới:
Đề xuất:
Ví dụ giải thích
Trong ví dụ trên, khi người dùng nhập ký tự trong trường đầu vào, một hàm gọi là "showhint []" được thực thi.
Hàm được kích hoạt bởi sự kiện Onkeyup.
Đây là mã HTML:
Thí dụ
Bắt đầu nhập tên trong trường đầu vào bên dưới:
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.php?q=" + str, true];
xmlhttp.send[];
}
}
Đề xuất:
First name:
Suggestions:
Ví dụ giải thích
Trong ví dụ trên, khi người dùng nhập ký tự trong trường đầu vào, một hàm gọi là "showhint []" được thực thi.
Hàm được kích hoạt bởi sự kiện Onkeyup.
Đây là mã HTML:
- hàm showHint [str] {& nbsp; if [str.length == 0] {& nbsp; & nbsp; & nbsp; & nbsp; document.getEuityById ["txthint"]. ; & nbsp; & nbsp; var xmlHttp = new xmlhttprequest []; & nbsp; & nbsp; & nbsp; xmlHttp.onReadyStateChange = function [] {& nbsp; & nbsp; & nbsp; & nbsp; if [this.ReadyState == 4 && this.status == 200] {& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; document.getEuityById ["txthint"]. Internhtml = this.responsetext; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;} & nbsp; & nbsp; & nbsp; & nbsp;}; & nbsp; xmlhttp.open ["get", "gethint.php? q =" + str, true]; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;}}
- Bắt đầu nhập tên trong trường đầu vào bên dưới: & nbsp; Tên đầu tiên: & nbsp; Đề xuất:
- Chạy ví dụ »
- Giải thích mã:
- Đầu tiên, kiểm tra xem trường đầu vào có trống không [str.length == 0]. Nếu có, hãy xóa nội dung của trình giữ chỗ TXTHINT và thoát chức năng.
Tuy nhiên, nếu trường đầu vào không trống, hãy làm như sau:
Tạo đối tượng XMLHTTPREQUEST
Tạo chức năng sẽ được thực thi khi phản hồi máy chủ đã sẵn sàng
// Array with names
$a[] = "Anna";
$a[] = "Brittany";
$a[] = "Cinderella";
$a[] = "Diana";
$a[] = "Eva";
$a[] = "Fiona";
$a[] = "Gunda";
$a[] = "Hege";
$a[] = "Inga";
$a[] = "Johanna";
$a[] =
"Kitty";
$a[] = "Linda";
$a[] = "Nina";
$a[] = "Ophelia";
$a[] = "Petunia";
$a[] = "Amanda";
$a[] = "Raquel";
$a[] = "Cindy";
$a[] = "Doris";
$a[] = "Eve";
$a[] = "Evita";
$a[] = "Sunniva";
$a[] = "Tove";
$a[] = "Unni";
$a[] = "Violet";
$a[] = "Liza";
$a[] = "Elizabeth";
$a[] = "Ellen";
$a[] = "Wenche";
$a[] = "Vicky";
Gửi yêu cầu đến tệp PHP [gethint.php] trên máy chủ
$q = $_REQUEST["q"];
Lưu ý rằng tham số Q được thêm vào URL [gethint.php? Q = "+str]
Và biến STR giữ nội dung của trường đầu vào
if [$q !== ""] {
$q = strtolower[$q];
$len=strlen[$q];
foreach[$a as $name] {
if [stristr[$q, substr[$name, 0, $len]]] {
if [$hint === ""] {
$hint = $name;
} else {
$hint .= ", $name";
}
}
}
}
Tệp PHP - "gethint.php"
echo $hint === "" ? "no suggestion" : $hint;
?>
AJAX Full Form là JavaScript & XML không đồng bộ. Đó là một công nghệ làm giảm các tương tác giữa máy chủ và máy khách. Nó thực hiện điều này bằng cách chỉ cập nhật một phần của trang web thay vì toàn bộ trang. Các tương tác không đồng bộ được bắt đầu bởi JavaScript. Mục đích của AJAX là trao đổi một lượng nhỏ dữ liệu bằng máy chủ mà không cần làm mới trang. full form is Asynchronous JavaScript & XML. It is a technology that reduces the interactions between the server and client. It
does this by updating only part of a web page rather than the whole page.The asynchronous interactions are initiated by JavaScript.The purpose of AJAX is to exchange small amounts of data with server without page refresh. JavaScript là ngôn ngữ kịch bản phía máy khách. Nó được thực hiện ở phía máy khách bởi các trình duyệt web hỗ trợ mã JavaScript.JavaScript chỉ hoạt động trong các trình duyệt đã bật JavaScript. is a client side scripting language. It is executed on the client side by the web browsers that support JavaScript.JavaScript code only works in browsers that have JavaScript enabled. XML là từ viết tắt của ngôn ngữ đánh dấu mở rộng. Nó được sử dụng để mã hóa các tin nhắn ở cả hai định dạng người và máy có thể đọc được. Nó giống như HTML nhưng cho phép bạn tạo các thẻ tùy chỉnh của mình. Để biết thêm chi tiết về XML, hãy xem bài viết trên XML is the acronym for
Extensible Markup Language. It is used to encode messages in both human and machine readable formats. It’s like HTML but allows you to create your custom tags. For more details on XML, see the article on XML Chúng tôi sẽ tạo một ứng dụng đơn giản cho phép người dùng tìm kiếm các khung MVC PHP phổ biến. Ứng dụng của chúng tôi sẽ có một hộp văn bản mà người dùng sẽ nhập tên của khung. Sau đó, chúng tôi sẽ sử dụng MVC AJAX để tìm kiếm một trận đấu sau đó hiển thị tên hoàn chỉnh của khung ngay bên dưới biểu mẫu tìm kiếm. Index.php Type the first letter of the PHP MVC FrameworkAjax là gì?
Tại sao sử dụng Ajax?
Cách tạo ứng dụng AJAX PHP
Bước 1] Tạo trang chỉ mục
PHP MVC Frameworks - Search Engine
PHP MVC Frameworks - Search Engine
Matches:
NƠI ĐÂY,
- Trực tiếp onkeyup = Cảnh hiển thị [this.value], thực thi chức năng JavaScript được hiển thị mỗi khi một khóa được gõ vào hộp văn bản.
Tính năng này được gọi là tự động hoàn thành
Bước 2] Tạo trang Frameworks
frameworks.php
Bước 3] Tạo tập lệnh JS
auto_complete.js
function showName[str]{
if [str.length == 0]{ //exit function if nothing has been typed in the textbox
document.getElementById["txtName"].innerHTML=""; //clear previous results
return;
}
if [window.XMLHttpRequest] {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest[];
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject["Microsoft.XMLHTTP"];
}
xmlhttp.onreadystatechange=function[] {
if [xmlhttp.readyState == 4 && xmlhttp.status == 200]{
document.getElementById["txtName"].innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open["GET","frameworks.php?name="+str,true];
xmlhttp.send[];
}
HERE,
- If if [str.length == 0] Kiểm tra độ dài của chuỗi. Nếu là 0, thì phần còn lại của tập lệnh không được thực thi.
- IF IF [window.xmlhttprequest] Các phiên bản Internet Explorer của Internet Explorer 5 và 6 sử dụng ActiveXObject để triển khai AJAX. Các phiên bản và trình duyệt khác như Chrome, Firefox sử dụng xmlhttprequest. Mã này sẽ đảm bảo rằng ứng dụng của chúng tôi hoạt động trong cả IE 5 & 6 và các phiên bản cao khác của IE và trình duyệt.
- XMLHTTP.onReadyStateChange = Chức năng, Chức năng Kiểm tra xem tương tác AJAX có hoàn tất và trạng thái là 200 sau đó cập nhật khoảng txtname với kết quả được trả về.
Bước 4] Kiểm tra ứng dụng AJAX PHP của chúng tôi
Giả sử bạn đã lưu tệp index.php trong phututs/ajax, duyệt đến url //localhost/phptuts/ajax/index.php
Nhập chữ C vào hộp văn bản bạn sẽ nhận được kết quả sau.
Ví dụ trên cho thấy khái niệm về AJAX và cách nó có thể giúp chúng ta tạo ra các ứng dụng tương tác phong phú.
Bản tóm tắt
- Ajax là từ viết tắt của JavaScript và XML không đồng bộ
- AJAX là một công nghệ được sử dụng để tạo các ứng dụng tương tác phong phú giúp giảm sự tương tác giữa máy khách và máy chủ bằng cách chỉ cập nhật các phần của trang web.
- Internet Explorer phiên bản 5 và 6 sử dụng ActiveXObject để thực hiện các hoạt động AJAX.
- Internet Explorer phiên bản 7 trở lên và trình duyệt Chrome, Firefox, Opera và Safari sử dụng XMLHTTPREQUEST.