Học lập trình website PHP tại trung tâm đào tạo Vietpro miễn phí : Bài 18: Sử dụng AJAX trong Javascript
Một tính năng cốt lõi của các ứng dụng web thế kỷ 21 là sự phản ứng tuyệt vời của họ. Một người tiên phong trong kinh doanh làm cho các web nhiều hơn và tương tự như một ứng dụng máy tính để bàn có được Google: ngay sau khi bạn bắt đầu gõ một ký tự trong một hộp Google, tất cả các loại của các đề xuất và kết quả tìm kiếm tiếp tục xuất hiện để tăng tốc độ tìm kiếm của bạn; và một lần nữa, chỉ cần gõ một cái gì đó bằng cách sử dụng bản đồ của Google, và bạn ngay lập tức phá hủy đến hầu như bất kỳ đường phố trên hành tinh này.

Đằng sau chiến công này tuyệt vời của sự thông minh của con người là đến với nhau của một vài công nghệ được gọi chung làAJAX.

Trong bài học này bạn sẽ học:

– AJAX là viết tắt của cái gì và nó là gì?;
– làm thế nào để làm cho một yêu cầu AJAX;
– làm thế nào để xử lý một phản ứng AJAX.

Tôi khuyên bạn nên truy cập vào một máy chủ web để thực hiện các mã ví dụ minh họa trong bài học này. Trong thực tế, AJAX là tất cả về giao tiếp client-server. Trong quan điểm này, bạn có thể tải lên các tập tin của bạn vào một máy chủ lưu trữ hoặc đến một máy chủ địa phương. Các hướng dẫn học php trên trang web này cung cấp một hướng dẫn tuyệt vời về chủ đề này.

1. AJAX là gì ?

Các từ viết tắt AJAX là viết tắt của Asynchronous JavaScript và XML.

Trong thực tế, đó là một sự kết hợp của các tiêu chuẩn Internet được tạo thành:

– dựa trên tiêu chuẩn trình bày cách sử dụng HTML và CSS;
– hiển thị năng động bằng cách sử dụng DOM;
– trao đổi dữ liệu và thao tác bằng cách sử dụng XML;
– hồi dữ liệu không đồng bộ bằng cách sử dụng đối tượng XMLHttpRequest;
– Magic Javascript để dàn xếp toàn bộ quá trình.

Trong các ứng dụng web không AJAX, sự tương tác giữa máy chủ và khách hàng có thể là một sự tẻ nhạt:

– một hành động của người dùng từ các client gửi một yêu cầu đến máy chủ web thông qua HyperText Transfer Protocol (HTTP); các máy chủ web nhận được yêu cầu và xử lý nó bằng cách gọi các kịch bản phía máy chủ, dữ liệu cơ sở dữ liệu, vv, và Trung tâm đào tạo hoc photoshop chuyên nghiệp với đội ngũ giáo viên trẻ gửi một phản ứng lại cho khách hàng thông qua HTTP;

– trình duyệt khách hàng nhận được sự hưởng ứng và tải toàn bộ trang được cập nhật.

Phải đi từ trình duyệt đến máy chủ và trở lại một lần nữa mỗi khi người dùng yêu cầu một số mảnh của dữ liệu từ máy chủ, ngoài trải qua toàn bộ một trang làm mới ở mỗi lần cập nhật, có thể khá căng thẳng trên các máy chủ và người dùng như nhau.

AJAX giúp trong ít nhất là 2 khía cạnh: cập nhật trang từng phần và truyền thông không đồng bộ giữa máy chủ và máy khách.

Điều này có nghĩa là trong một vài từ, là mỗi khi người dùng tương tác với các trang web, chỉ có các bit cần cập nhật được làm mới, không phải toàn bộ trang. Hơn nữa, thực tế là các hoạt động được thực hiện không đồng bộ AJAX, có nghĩa là trong suốt thời gian mà phải mất cho các máy chủ để đáp ứng, trang không bị khóa và người dùng vẫn có thể tương tác với các trang web.

2. Thực hiện yêu cầu AJAX

Một yêu cầu AJAX được thực hiện bằng cách sử dụng đối tượng XMLHttpRequest và phương pháp open() và send(). Điều này được hỗ trợ bởi tất cả các trình duyệt chính. Tuy nhiên, các trình duyệt cũ, cụ thể là varsions cũ của Microsoft Internet Explorer (vesions 5 và 6), hỗ trợ một ActiveXObject. Trở ngại nhỏ này có thể dễ dàng khắc phục bằng cách kiểm tra với tính năng hỗ trợ trong kịch bản.

Phương pháp open(retrievalMethod, url, bool) có 3 đối số:

– retrievalMethod: đây có thể là một GET (được sử dụng để lấy dữ liệu từ máy chủ), hoặc một POST (được sử dụng để gửi dữ liệu đến máy chủ);

– url: đây là vị trí nơi mà dữ liệu được làm sẵn. Nó có thể là một tập tin văn bản, tài liệu XML, hoặc một kịch bản phía máy chủ xử lý dữ liệu từ một cơ sở dữ liệu;

– bool: đây là một giá trị là true/false. Nếu nó sai yêu cầu được thực hiện đồng bộ, nếu đó là sự thật khi yêu cầu được thực hiện không đồng bộ, đó là những gì chúng ta thường muốn.

Các đối tượng XMLHttpRequest có một thuộc tính onreadystatechange giao dịch với những phản hồi từ máy chủ. Này diễn ra trong 5 giai đoạn sau:

0) các request chưa vì open() đã không được gọi là;
1) các yêu cầu được quy định, nhưng send() đã không được gọi là chưa;
2) các yêu cầu đang được gửi đi, bởi vì bây giờ send() đã được gọi;
3) phản ứng đang được nhận, nhưng chưa hoàn thành;
4) đáp ứng được đầy đủ và dữ liệu có sẵn cho các thao tác và hiển thị.

Sau khi hoàn thành (giai đoạn 4),  nhiệt tình và học lap trinh android cơ bản nâng cao tại VietPro!tài sản tình trạng các đối tượng XMLHttpRequest được gán một mã trạng thái HTTP mô tả các kết quả của các yêu cầu như sau:

– 200: thành công!
– 401: trái phép – xác thực là cần thiết và không được cung cấp;
– 403: Cấm – máy chủ từ chối trả lời;
– 404: không tìm thấy – những nguyên được yêu cầu không thể được tìm thấy.

Đây là một đoạn mã đơn giản mà dịch những gì vừa được nói ra thực hành:


//Global variable to store the XMLHttpRequest object

varmyRequest;

//Package the request into its own function

functiongetData()

{

//Feature-testing technique to make sure the browser

//supports the XMLHttpRequest object

if(window.XMLHttpRequest)

{

//create a new instance of the object

myRequest=newXMLHttpRequest();

}

//else - the XMLHttpRequest object is not supported:

//create an instance of ActiveXObject

else

{

myRequest=newActiveXObject("Microsoft.XMLHTTP");

}

//Use the open(retrievalMethod, "myDataFile.txt", bool) method

myRequest.open("GET",url,true);

//Use send() with a null argument - we have nothing to send:

myRequest.send(null);

//attach a function to handle onreadystatechange,

//that is, the response from the server:

myRequest.onreadystatechange=getData;

}
3. Cách xử lý các hoạt động AJAX

Nếu trình duyệt của khách hàng yêu cầu dữ liệu văn bản, các phản ứng máy chủ sẽ tự động được lưu trữ trong các nguồnresponseText.

Nếu trình duyệt của khách hàng yêu cầu dữ liệu ở định dạng XML, các phản ứng máy chủ được lưu trữ trong các nguồnresponseXML.

Đây là một đoạn mã mà minh họa điều này trong thực tế.


//Package the response-handling code in a function

functiongetData()

{

//Make sure the response is at the completion stage (4):

if(myRequest.readyState===4)

{

//if it is, make sure the status code is 200 (success):

if(myRequest.status===200)

{

//if all is well, handle the response:

vartext=myRequest.responseText;

alert(text);

}

}

}


4. Yêu cầu từ AJAX – Ví dụ: đáp lại yêu cầu từ người dùng

Để theo dõi chủ đề , bạn cần một máy chủ và 1 tập tin văn bản đơn giản tải lên cùng một máy chủ mà máy chủ là mã JavaScriptcủa bạn.

Các trang bạn xây dựng cho phép người dùng bấm vào nút để hiển thị văn bản được lưu trữ trong tập tin văn bản của bạn bằng cách sử dụng AJAX.

Đây là một dạng HTML đơn giản với thẻ <header> và một phần tử button:


<!DOCTYPE html>
<html>
<head>
<title>Lesson18:Making AJAX Calls</title>

</head>
<body>
<h1>Lesson18:Making AJAX Calls-Plain Text Response</h1>

<div>

<h2 id="myHeader">Click the button tocall your data</h2>

<input type="button"value="Click Me!"onclick="getText('lesson18_test.txt')"/>

</div>

<script type="text/javascript">

//JavaScript AJAX code here

</script>

</body>
</html>


Đây là các mã JavaScript mà đi kèm theo thẻ <script> trong trang HTML trên:


//Prepare the global variable for the request

varmyRequest;

//Write the getText(url) function

functiongetText(url)

{

//check support for the XMLHttpRequest object

if(window.XMLHttpRequest)

{

myRequest=newXMLHttpRequest();

}

//else, create an ActiveXObject for IE6

else

{

myRequest=newActiveXObject("Microsoft.XMLHTTP");

}

//Call the open() method to make the request

myRequest.open("GET",url,true);

//Send the request

myRequest.send(null);

//Assign the getData() function to the

//onreadystatechange property to handle server response

myRequest.onreadystatechange=getData;

}



/**********************************************/



//This function handles the server response

functiongetData()

{

//Get a reference to the header element where

//the returned result will be displayed

varmyHeader=document.getElementById("myHeader");

//Check the response is complete

if(myRequest.readyState===4)

{

//Check the status code of the response is successful

if(myRequest.status===200)

{

//Store the response

vartext=myRequest.responseText;

//Assing the returned text to the nodeValue

//property of the header element (you can also use

//innerHTML here if you feel it simplifies your task)

myHeader.firstChild.nodeValue=text;

}

}

}
Lưu và kiểm tra trên trình duyệt.



4. AJAX – XML format response

Các trang bạn đang đi để xây dựng trong ví dụ thứ hai này cho phép người dùng bấm vào một nút để hiển thị một loạt các ngôn ngữ lập trình đến từ một tập tin XML sử dụng AJAX.

Để theo dõi trong bài tập, chuẩn bị một tài liệu XML đơn giản và một trang HTML.

Đây là những gì tài liệu XML của tôi hình như:


<?xml version="1.0"?>

<languages>
<language>PHP</language>
<language>Ruby On Rails</language>
<language>C#</language>
<language>JavaScript</language>
</languages>
Lưu tập tin trên như lesson18_test.xml trong cùng một vị trí như trang HTML của bạn.

Dưới đây là các trang HTML:


<!DOCTYPE html>
<html>
<head>
<title>Lesson18:Making AJAX Calls</title>

</head>
<body>
<h1>Lesson18:Making AJAX Calls-XML Response</h1>

Lưu file và chạy kiểm tra trên trình duyệt.
Nguồn:
Bài 18: Sử dụng AJAX trong Javascript