Ajax - ví dụ. kịch bản Ajax

Internet cung cấp cho người truy cập tầm nhìn của mỗi tài nguyên được lưu trữ trong một mạng, và trình duyệt - truy cập qua giao thức mạng, cơ chế gọi của kịch bản riêng biệt, truyền / nhận thông tin. Tập hợp trang tạo nên các trang web, có một gốc chung - một liên kết duy nhất (tên miền, địa chỉ nút duy nhất).

Không có vấn đề tài nguyên đáp ứng đến thăm tĩnh hoặc động tạo ra một phản ứng. Thậm chí nếu các hình thức và nội dung của các trang phụ thuộc vào bất kỳ điều kiện, đơn vị chia của máy chủ truyền thông và khách hàng (trình duyệt) là thành tài liệu HTML mã, hình ảnh, style sheets, và các tập tin khác nội dung cần thiết và môi trường. Nếu có gì là sai, trình duyệt sẽ hiển thị tất cả những gì là "quản lý" để có được phân tích cú pháp và thực thi.

Nhiều công nghệ đầy hứa hẹn đã nổi lên trong một thời gian dài, nhưng đã bị lãng quên bất công hay chưa được sử dụng đúng cách. AJAX đầu tiên (ví dụ sử dụng đối tượng XMLHttpRequest) xuất hiện từ nhiều năm trước, nhưng sự thành công và sự nổi tiếng đến mãi sau này.

Tất cả hoặc chỉ những gì bạn cần

Trong phiên bản cổ điển của trang web - tên, địa chỉ IP và một liên kết (tất cả các từ đồng nghĩa chỉ định cùng một điểm trong không gian Internet). Điều gì nằm đằng sau trang chính này - nghĩ: trên sáng kiến của mình một "nhà thiết kế" hiện đại, mà thậm chí còn không hỏi tại sao nó lại như vậy? Tại sao trang web này là trang chính mà từ đó bạn có thể tới bất kỳ khác? Tùy chọn này - rõ ràng là không lý tưởng, đó là nội dung cụ thể và các chức năng thực tế.

Một cách đơn giản, nếu một người cần một nha sĩ, nó là địa chỉ thích hợp cho một mục đích cụ thể, chứ không phải vào bếp để phẫu thuật và không để các thư viện cho bác sĩ chuyên khoa tư vấn. Tại nơi này hóa ra, ông thấy, nhưng không nhận được một phòng khám nha khoa đầy đủ. Điều tốt nhất mà có thể mong đợi một người truy cập - registry và hướng (con đường chính xác) đến bác sĩ. Và ngay tại chỗ (khi đến) có thể thay đổi khi một bác sĩ, và đích.

Nhưng đây của trang web thường luôn luôn được nạp đầy đủ đạn dược, không có gì thay đổi khi tải, tính đến thời điểm đó một người nào đó đã đến ... Nhưng ngay cả trong trường hợp nó là một cuộc sống thực tế phòng khám, người đầu tiên khi bạn ghé thăm một mới của khách hàng là đủ để cung cấp thông tin trang , danh bạ và ... registry cửa sổ có thể được với điều kiện là các chuyến thăm tới các trang web đã được thực hiện trong thời gian off-giờ, theo quy định của bác sĩ là không có sẵn, một cuộc hẹn tạm thời được thực hiện trong một văn phòng khác nhau ...

Điểm trong không gian Internet

Câu trả lời điển hình của các nguồn tài nguyên của không gian Internet - để đáp ứng với yêu cầu phát hành một trang trang web (thường là nhà), rồi đến bên kia, theo yêu cầu của khách truy cập. Site Server cũng chứa các hình ảnh, phong cách, mã, kịch bản JavaScript, PHP, và như vậy. Không phải tất cả PHP-files làm trang, một số trong số họ có thể đáp ứng các yêu cầu AJAX: Tiếp nhận, xử lý và gửi thông tin.

Viết một kịch bản một cách nhanh chóng. Nhưng nhận được đến điểm kiểm soát trong không gian Internet, nó là không thể xác định ai và lý do gì giải quyết, đó là kích hoạt là tên, địa chỉ IP và liên kết. Bất kỳ chuyển động trên mạng diễn ra trong các phần mềm, chủ yếu là thông qua một trình duyệt, mà còn thông qua các robot có nguồn gốc khác nhau và đích, thông qua những hành động của các trang web khác.

Kịch bản, giành quyền kiểm soát, có thể biết một cách chính xác chỉ: một lần thông qua những gì trình duyệt của khách truy cập đến, với một tham chiếu từ đó địa chỉ IP, và sự hiện diện của các tập tin cookie. Chỉ sau này có thể cung cấp thông tin để hình thành các trang chính, nhưng chỉ nếu người truy cập đã từng ở đây. Trong mọi trường hợp khác, nó có thể tạo ra chỉ là phản ứng chung từ máy chủ. AJAX ví dụ mà rất dễ tìm thấy trên Internet, nên được sử dụng một cách cẩn thận. Sai sót trong (sử dụng) của đối tượng XMLHttpRequest để theo dõi là không dễ dàng.

Các phản ứng tổng thể và các cuộc đối thoại riêng

Câu trả lời chung từ máy chủ - một trang thông thường, được gọi là hiệu trưởng của cái gọi là chỉ mục, và nó bắt đầu với một trang web đó là mâu thuẫn với các liên kết của nó đến các trang khác có sẵn. Tuy nhiên, nếu người truy cập biết tên của các trang khác, họ đang có trong sự hiểu biết của ông sẽ không kém phần quan trọng so với cái được phát triển. Dưới đây là mô hình cổ điển, tất cả cùng một lúc: thiết kế tổng thể và chức năng mà tập trung vào tất cả các du khách.

đối thoại riêng - một sự tiếp nối của phiên trước của khách truy cập. Các trang web đã biết những gì ông đã làm, rằng ông đã quan tâm đến những gì đã trang xem và đặt nó trong bộ nhớ của mình, đã viết một cái gì đó trong cookie của trình duyệt.

Nó sử dụng hai yêu cầu cơ bản đến máy chủ để tải về trang web và làm việc với ông: POST và GET. kết quả truy vấn là một trang nói chung. Trên trang kết quả, người truy cập có thể kích hoạt các hoặc các sự kiện khác được cấu hình trên tác động của các yếu tố trang nhất định.

các yếu tố trang sự kiện

Trang phần tử có thể là chìa khóa hồi, ý nghĩa - để có những nội dung của một trường văn bản và thấy rằng nó đã viết một khách truy cập. Sự kiện này có thể xảy ra trên một mục trình đơn, hình ảnh, text box. Trong mọi trường hợp, JavaScript chức năng sẽ được chạy, mà có thể thực hiện AJAX yêu cầu như sau:

InitXML ( '../ Mphp / scSrvPhpWord.php? CTask = GoPage' + '& cOwnerCode =' + cOwnerCode
+ '& CSessionCode =' + cSessionCode + '& cActiveItem =' + cActiveItem);

Như vậy InitXML (chức năng) được định nghĩa như sau (biến var scXHR được mô tả bên ngoài của hàm):

chức năng InitXML (scURL) {

scXHR = null;

if (window.XMLHttpRequest)
{thử
{ScXHR = new XMLHttpRequest ();
} Catch (e) {}
} else
if (window.ActiveXObject)
{thử
{ScXHR = new ActiveXObject ( 'Msxml2.XMLHTTP');
} Catch (e)
{thử
{ScXHR = new ActiveXObject ( 'Microsoft.XMLHTTP');
} Catch (e) {}
}
}
if (scXHR)
{
scXHR.open ( 'GET', scURL);
scXHR.onreadystatechange = WaitReplySC;
scXHR.send (null);
};
}

Chức năng này có một URL và khởi tạo một yêu cầu cho nó. Câu trả lời không đồng bộ sẽ đến càng sớm càng sẽ hoàn thành kịch bản được quy định trong URL (trong trường hợp này - scSrvPhpWord.php, nằm ở ../Mphp/ thư mục tương ứng với thư mục gốc của trang web), và sẽ bắt đầu WaitReplySC () chức năng, mà đi vào đầu vào của máy chủ XML-Đáp lại, bao gồm cả tiêu đề và nội dung.

phản ứng máy chủ

Trên thực tế các máy chủ là một PHP-script - một chương trình bắt đầu với việc lắp đặt các điều kiện cần thiết, tải về cơ sở vật chất cần thiết, trước khi điều trị, mà phụ thuộc vào mục đích phát triển:

namespace PhpOffice \ PhpWord;

ini_set ( 'display_errors', 1);
error_reporting (E_ALL ^ E_NOTICE);

ignore_user_abort (true);
Hàm set_time_limit (12);

sử dụng PhpOffice \ PhpWord \ MphpObj \ scDocuments;

require_once 'PhpOffice / PhpWord / Autoloader.php';
\ PhpOffice \ PhpWord \ Autoloader :: đăng ký ();

Đại diện cho khởi đầu của một dấu ấn cho thấy bất kỳ lỗi nào, cấm dừng một kịch bản nếu bạn vô hiệu hóa người dùng và thiết lập thời hạn thực hiện trong vòng lặp sự kiện - 12 giây. thư viện liên kết tiếp theo PhpOffice \ PhpWord cho các tài liệu * .docx.

Như đã trình bày ở trên AJAX thách thức ( '... cTask = GoPage' + '& cOwnerCode =' + cOwnerCode + '& cSessionCode =' + cSessionCode + '& cActiveItem =' + cActiveItem) - bốn GET-biến, mà có thể không nên kiểm tra tính sẵn sàng thực tế của họ:

$ CTask = (isset ($ _ GET [ 'cTask']))? $ _GET [ 'cTask']: '';
$ COwnerCode = (isset ($ _ GET [ 'cOwnerCode']))? $ _GET [ 'cOwnerCode']: '';
$ CSessionCode = (isset ($ _ GET [ 'cSessionCode']))? $ _GET [ 'cSessionCode']: '';
$ CActiveItem = (isset ($ _ GET [ 'cActiveItem']))? $ _GET [ 'cActiveItem']: '';

Sau khi thực hiện kịch bản hành động chuẩn bị quyết định:

switch ($ cTask) {

trường hợp 'GoPage': // (điều này là một thách thức trong quá trình tải ban đầu hoặc làm mới trang)

$ COwnerCode = 'cOwner';
$ CSessionCode = 'cSession';
$ CContents = 'cContents';
$ CStatus = 'cStatus';
$ CHTML = iconv ( 'UTF-8', 'CP1251', 'mã hóa yếu tố ");
$ CActiveItem = iconv ( 'UTF-8', 'CP1251', 'biến');

$ CReply = "scSrvRM | GoPage | bộ | {$ cOwnerCode}` {$ cSessionCode} | {$ cContents} `{$ cStatus} | {$ cHTML} | {$ cActiveItem}";

break;

}

và phần cuối cùng của kịch bản:

header ( "Content-Type: text / xml; accept-charset = utf-8");
tiêu đề ( "Cache-Control: no-cache");
echo '';
$ CReply = iconv ( 'CP1251', 'UTF-8', $ cReply); // chuyển đổi từ 'CP1251' trong 'UTF-8'
echo $ cReply;

Nhận được phản ứng của khách hàng

Trên trang đó được nạp trong trình duyệt, người ta thấy rằng ngay sau khi máy chủ sẽ chuẩn bị một phản ứng, nó sẽ được xử lý chức năng WaitReplySC:

hoạt WaitReplySC () {

try {

if (scXHR.readyState == 4) {
if (scXHR.status == 200) {// xử lý phản ứng

var TestReply = scXHR.responseText;

if ((TestReply.indexOf ( 'Parse error')> 0) ||
(TestReply.indexOf ( 'Thông báo')> 0)) alert (scXHR.responseText);

var CDATA = scXHR.responseText;
var ADATA = cData.split ( '|');

var cCmd = ADATA [1];
var CPO = ADATA [2];
var aOwnerSession = ADATA [3] .split ( '`');
cOwnerCode = aOwnerSession [0];
var cSessionCode = aOwnerSession [1];
var aContentStatus = ADATA [4] .split ( '`');
var cContent = aContentStatus [0];
var cStatus = aContentStatus [1];
var cHTML = ADATA [5]; // server HTML-response
var cVarValues = ADATA [6]; // biến cho các hình thức

switch (cCmd) {

trường hợp 'GoPage':

var dTestLine = document.getElementById ( 'scTestLine');
dTestLine.innerHTML = 'Trả lời = [' + cOwnerCode + ''
+ CSessionCode + ''
+ CContent + ''
+ CStatus + ''
+ CHTML + ''
+ CVarValues + ']';

break;
}

} Else {
. Document.getElementById ( 'scAreaStatus') innerHTML = "Lỗi !!!";
}
}
} Catch (e) {}

}

Do đó, bằng cách sử dụng AJAX-ví dụ, trang web được tải trong trình duyệt được (trong phần tử scTestLine):

Trả lời = [cOwner, cSession, cContents, cStatus, mã hóa yếu tố, các biến]

Trên đại diện của mã, jQuery và WordPress

Trang trong trình duyệt và các văn bản kịch bản viết bằng UTF-8, để sử dụng iconv () chức năng để chuyển đổi ký tự tiếng Nga. Phần còn lại của bộ xương thể hiện bằng mã là rất đơn giản và có thể dễ dàng lặp lại đối với bất kỳ mục đích cụ thể.

Có thể thay đổi chỉ trong phản ứng máy chủ xử lý WaitReplySC () chức năng và mã kịch bản thực tế mà tạo ra các phản ứng. Gọi InitXML chức năng (đối với một scURL nói riêng và dữ liệu liên quan đến nó) được đặt trong xử lý sự kiện trên các yếu tố trang và xác định ý nghĩa của các yếu tố này.

ví dụ biểu diễn của AJAX hướng tới "bằng tay" sử dụng công nghệ.

Trong hệ thống quản lý nội dung khác nhau (SMS) khả năng được mô tả theo những cách khác nhau, như một quy luật, theo phong cách của một đặc trưng riêng. Ví dụ, khả năng gọi jQuery AJAX được thực hiện jQuery.ajax () chức năng trong một trong hai mức độ cao hơn: jQuery.get () và jQuery.post (). Các tham số được truyền url và cài đặt (tập hợp các cặp giá trị + key). jQuery.ajax () trả về XMLHttpRequest đối tượng.

JQuery để theo dõi kết quả của hàm-phương pháp đề xuất: XHR.done () - sự thành công của các yêu cầu. XHR.fail () - Lỗi xử lý.

jqXHR.done () phương pháp yavlyatsya xử lý thay thế hoàn thành AJAX yêu cầu. Thay thế phương pháp lỗi thời jqXHR.success ().

Tương tự như vậy, việc sử dụng trên Wordpress AJAX-công nghệ. Ở đây, tất cả mọi thứ đã được cấy ghép chính nó trong hệ thống quản lý nội dung, bạn chỉ cần sử dụng các cấu trúc được đề xuất. Các tài liệu được cung cấp một mô tả chi tiết.

AJAX ứng dụng phụ thuộc chủ yếu vào lựa chọn của công cụ này, mặc dù hướng dẫn phiên bản có thể sử dụng song song hoặc bổ sung cho các nội dung được lựa chọn quản lý hệ thống, một hoặc một phiên bản khác của jQuery. Sau đó là hữu ích để làm việc trên riêng của họ, bởi vì hầu như tất cả các tin nhắn SMS hiện đại sử dụng nó, nhưng mỗi người theo cách riêng của mình.

Một ví dụ điển hình của ứng dụng

sử dụng đơn giản và mũ của AJAX - Giỏ hàng trực tuyến cửa hàng. trang cửa hàng luôn chứa đầy hàng hóa, mặc dù trong thực tế họ có thể không. Tải lại thường mất thời gian đáng kể, nhưng khi một người truy cập chọn một sản phẩm, ông có thể luôn luôn chỉ cần bỏ anh ta hoặc thay đổi người được chọn, rằng các trang web luôn là mong muốn để hiển thị một cách nhanh chóng.

Thông thường nó được thực hiện theo hình thức giỏ và các dấu hiệu xung quanh mục đã chọn. Nếu không có việc sử dụng AJAX thay đổi năng động để các yếu tố này là có vấn đề.

AJAX-scripts mà thực hiện cơ chế để thêm / gỡ bỏ các mục vào giỏ hàng của bạn, trở thành thực tế trong nhiều tin nhắn SMS.

Để truyền dữ liệu bình thường thông qua hình thức AJAX có thể được hình thành một cách thông thường (đối với nhập tên và mật khẩu):