อาแจ็กซ์ - ตัวอย่าง สคริปต์อาแจ็กซ์

Internet ให้ผู้เข้าชมการแสดงผลของทรัพยากรที่เป็นเจ้าภาพในแต่ละเครือข่ายและเบราว์เซอร์ - การเชื่อมต่อผ่านโปรโตคอลเครือข่ายกลไกการเรียกร้องของสคริปแต่ละส่ง / รับข้อมูล ชุดของหน้าเว็บที่ทำขึ้นเว็บไซต์ที่มีรากร่วมกัน - การเชื่อมโยงที่ไม่ซ้ำกัน (ชื่อโดเมนที่อยู่โหนดไม่ซ้ำกัน)

เรื่องทรัพยากรที่ตอบสนองต่อการเข้าชมแบบคงที่หรือแบบไดนามิกไม่สร้างการตอบสนอง แม้ว่ารูปแบบและเนื้อหาของหน้าเว็บที่ขึ้นอยู่กับเงื่อนไขใด ๆ หน่วยแบ่งแยกของเซิร์ฟเวอร์การสื่อสารและลูกค้า (เบราว์เซอร์) เป็นเอกสารที่เสร็จ HTML รหัสภาพแผ่นสไตล์และไฟล์อื่น ๆ เนื้อหาที่จำเป็นและสภาพแวดล้อม หากมีสิ่งผิดปกติ, เบราว์เซอร์จะแสดงทั้งหมดที่ "จัดการ" จะได้รับการแยกและดำเนินการ

เทคโนโลยีที่มีแนวโน้มหลายคนได้โผล่ออกมาเป็นเวลานาน แต่ได้รับการลืมไม่เป็นธรรมหรือยังไม่ได้ถูกนำมาใช้อย่างถูกต้อง AJAX แรก (ตัวอย่างใช้วัตถุ XMLHttpRequest) ที่ปรากฏหลายปีที่ผ่านมา แต่ประสบความสำเร็จและมีชื่อเสียงมามากในภายหลัง

ทั้งหมดหรือเฉพาะสิ่งที่คุณต้องการ

ในรุ่นคลาสสิกของเว็บไซต์ - ชื่อที่อยู่ IP และการเชื่อมโยง (คำพ้องความหมายทั้งหมดกำหนดจุดเดียวกันในพื้นที่อินเทอร์เน็ต) สิ่งที่อยู่เบื้องหลังหน้าหลักนี้ - คิดว่า: ในความคิดริเริ่มของตัวเอง "นักออกแบบ" ที่ทันสมัยซึ่งไม่ได้ถามว่าทำไมจึงเป็นเช่นนั้น? ทำไมเว็บไซต์เป็นหน้าหลักจากการที่คุณสามารถไปที่อื่น ๆ ? ตัวเลือกนี้ - อย่างชัดเจนไม่ เหมาะก็เป็น เนื้อหาที่เฉพาะเจาะจงและฟังก์ชันการทำงานที่เกิดขึ้นจริง

ใส่เพียงแค่ถ้าเป็นคนที่ต้องการทันตแพทย์ก็คือที่อยู่ที่เหมาะสมสำหรับวัตถุประสงค์เฉพาะมากกว่าไปที่ห้องครัวสำหรับการผ่าตัดและไม่ให้ห้องสมุดสำหรับการให้คำปรึกษาการบำบัดโรค ที่สถานที่ที่คนนี้ปรากฏออกมาเขาเห็น แต่ไม่ได้รับการรักษาที่คลินิกทันตกรรมในเต็มรูปแบบ ที่ดีที่สุดที่สามารถคาดหวังของผู้เข้าชม - รีจิสทรีและทิศทาง (เส้นทางที่แน่นอน) ไปหาหมอ และในจุด (เมื่อเดินทางมาถึง) อาจมีการเปลี่ยนแปลงเป็นแพทย์และปลายทาง

แต่นี่คือเว็บไซต์ที่มักจะเต็มไปเสมอในกระสุนเต็มไม่มีอะไรเปลี่ยนแปลงเมื่อโหลดคำนึงถึงเวลาที่มีคนมา ... แต่แม้ในกรณีที่เป็นคลินิกชีวิตจริงเป็นครั้งแรกที่คุณเข้าเยี่ยมชมลูกค้าใหม่ที่จะให้หน้าข้อมูลที่เพียงพอ รายชื่อและ ... รีจิสทรีหน้าต่างสามารถให้เข้าชมไปยังเว็บไซต์ที่ถูกทำในช่วงนอกเวลาตามที่กำหนดโดยแพทย์ไม่สามารถใช้ได้ชั่วคราวได้รับการแต่งตั้งจะทำในสำนักงานที่แตกต่างกัน ...

จุดในพื้นที่ Internet

การตอบสนองที่คลาสสิกของทรัพยากรของพื้นที่อินเทอร์เน็ต - ในการตอบสนองต่อการร้องขอเพื่อออกหน้าเว็บไซต์ (ปกติบ้าน) และแล้วอื่น ๆ ตามคำร้องขอของผู้เข้าชม เซิร์ฟเวอร์ไซต์นอกจากนี้ยังมีภาพลักษณะ JavaScript สคริปต์รหัส, PHP, ฯลฯ ไม่ PHP ไฟล์ทุกคนทำหน้าบางส่วนของพวกเขาสามารถตอบสนองต่อคำขอ AJAX :. จะได้รับการประมวลผลและส่งข้อมูล

เขียนสคริปต์พริบตา แต่การเดินทางไปยังจุดของการควบคุมในพื้นที่ Internet นั้นมันเป็นไปไม่ได้ที่จะตรวจสอบใครและเหตุผลสำหรับสิ่งที่จ่าหน้าว่าจะมีการใช้เป็นชื่อที่อยู่ IP และเชื่อมโยง การเคลื่อนไหวบนเครือข่ายใด ๆ ที่จะเกิดขึ้นในซอฟแวร์ส่วนใหญ่ผ่านเบราว์เซอร์ แต่ยังผ่านหุ่นยนต์ของแหล่งกำเนิดที่แตกต่างกันและปลายทางผ่านเว็บไซต์อื่น ๆ ของการดำเนินการ

Script, ได้รับการควบคุมอย่างถูกต้องสามารถรู้เพียง: เข้าผ่านสิ่งที่เบราว์เซอร์ของผู้เข้าชมมาที่มีการอ้างอิงจากการที่อยู่ IP และการปรากฏตัวของคุกกี้ เพียงหลังสามารถให้ข้อมูลเป็นไปในรูปที่หน้าหลัก แต่ถ้าผู้เข้าชมได้แล้วที่นี่ ในกรณีอื่น ๆ ก็เป็นไปได้ในการสร้างเพียงการตอบสนองโดยทั่วไปจากเซิร์ฟเวอร์ AJAX ที่ตัวอย่างที่ง่ายต่อการค้นหาบนอินเทอร์เน็ตควรใช้อย่างระมัดระวัง ข้อผิดพลาดใน (ใช้งาน) ของวัตถุ XMLHttpRequest เพื่อติดตามไม่ใช่เรื่องง่าย

การตอบสนองโดยรวมและการสนทนาส่วนตัว

การตอบสนองโดยรวมจากเซิร์ฟเวอร์ - หน้าร่วมกันเรียกว่าหลักของสิ่งที่เรียกว่าดัชนีและมันเริ่มต้นด้วยเว็บไซต์ที่เป็นที่ขัดแย้งกับการเชื่อมโยงไปยังหน้าอื่น ๆ ที่มีอยู่ อย่างไรก็ตามหากผู้เข้าชมรู้ว่าชื่อของหน้าอื่น ๆ ที่พวกเขาอยู่ในความเข้าใจของเขาจะไม่มีความสำคัญน้อยกว่าหนึ่งในนักพัฒนาที่กำหนด นี่คือรูปแบบคลาสสิกทั้งหมดในครั้งเดียว: การออกแบบโดยรวมและการทำงานที่มุ่งเน้นไปที่ผู้เข้าชมทั้งหมด

บทสนทนาส่วนตัว - ความต่อเนื่องของช่วงก่อนหน้านี้ของผู้เข้าชม เว็บไซต์ที่รู้อยู่แล้วว่าสิ่งที่เขาทำว่าเขามีความสนใจในหน้าสิ่งที่ถูกมองและวางไว้ในหน่วยความจำของเขาเขียนอะไรบางอย่างในคุกกี้เบราว์เซอร์

มันใช้สองคำขอพื้นฐานไปยังเซิร์ฟเวอร์เพื่อดาวน์โหลดเว็บไซต์และทำงานร่วมกับเขา: โพสต์และได้รับ ผลการค้นหาเป็นทั้งหน้า ในหน้าผลลัพธ์ให้ผู้เข้าชมสามารถเปิดใช้งานเหตุการณ์เหล่านี้หรืออื่น ๆ ที่มีการกำหนดค่าในการดำเนินการขององค์ประกอบของหน้าบาง

องค์ประกอบของเหตุการณ์ที่เกิดขึ้นหน้า

องค์ประกอบของหน้าสามารถเป็นกุญแจสำคัญที่จะหาข้อมูลความหมาย - ที่จะใช้เนื้อหาของฟิลด์ข้อความและพบว่ามันเขียนผู้เยี่ยมชม เหตุการณ์ที่สามารถเกิดขึ้นได้ในรายการเมนู, ภาพ, กล่องข้อความ ในกรณีใด ๆ JavaScript ฟังก์ชั่นจะถูกเรียกใช้ซึ่งสามารถดำเนินการ AJAX คำขอดังต่อไปนี้:

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

ดังนั้น InitXML () ฟังก์ชันกำหนดดังนี้ (scXHR var ตัวแปรอธิบายด้านนอกของฟังก์ชั่น):

ฟังก์ชั่น InitXML (scURL) {

scXHR = null;

ถ้า (window.XMLHttpRequest)
{ลอง
{ScXHR = XMLHttpRequest ใหม่ ();
} catch (จ) {}
} else
ถ้า (window.ActiveXObject)
{ลอง
{ScXHR = ใหม่ ActiveXObject ( 'Msxml2.XMLHTTP');
} catch (จ)
{ลอง
{ScXHR = ActiveXObject ใหม่ ( 'Microsoft.XMLHTTP');
} catch (จ) {}
}
}
ถ้า (scXHR)
{
scXHR.open ( 'รับ' scURL);
scXHR.onreadystatechange = WaitReplySC;
scXHR.send (null);
};
}

ฟังก์ชั่นนี้จะใช้เวลา URL และเริ่มต้นการร้องขอสำหรับมัน คำตอบไม่ตรงกันจะมาเร็วที่สุดเท่าที่จะตอบสนองความสคริปต์ที่ระบุไว้ใน URL (ในกรณีนี้ - scSrvPhpWord.php ตั้งอยู่ในโฟลเดอร์ ../Mphp/ เทียบกับรากของเว็บไซต์) และจะเริ่ม WaitReplySC () ฟังก์ชันซึ่งจะไปใส่ของเซิร์ฟเวอร์ XML ที่ตอบสนอง รวมทั้งชื่อเรื่องและเนื้อหา

ตอบสนองของเซิร์ฟเวอร์

ที่จริงเซิร์ฟเวอร์เป็น PHP สคริปต์ - โปรแกรมที่เริ่มต้นด้วยการติดตั้งเงื่อนไขที่จำเป็นให้ดาวน์โหลดสิ่งอำนวยความสะดวกที่จำเป็นก่อนการรักษาซึ่งขึ้นอยู่กับวัตถุประสงค์ในนักพัฒนา:

namespace PhpOffice \ PhpWord;

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

ignore_user_abort (จริง);
set_time_limit (12);

ใช้ PhpOffice \ PhpWord \ MphpObj \ scDocuments;

require_once 'PhpOffice / PhpWord / Autoloader.php';
\ PhpOffice \ PhpWord \ Autoloader :: ลงทะเบียน ();

เป็นตัวแทนของจุดเริ่มต้นของการทำเครื่องหมายแสดงให้เห็นข้อผิดพลาดใด ๆ ห้ามหยุดสคริปต์เมื่อผู้ใช้ล็อกออกและกำหนดระยะเวลาในการดำเนินการกรณีห่วง - 12 วินาที ไลบรารีการเชื่อมโยงต่อไป PhpOffice \ PhpWord สำหรับเอกสาร * .docx

ตามที่ปรากฏข้างต้น AJAX ท้าทาย ( '... cTask = GoPage' + 'และ cOwnerCode =' + cOwnerCode + 'และ cSessionCode =' + cSessionCode + 'และ cActiveItem =' + cActiveItem) - สี่ GET-ตัวแปรซึ่งอาจจะไม่ ควรตรวจสอบห้องว่างที่เกิดขึ้นจริงของพวกเขา

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

หลังจากดำเนินการสคริปต์การดำเนินการเตรียมการตัดสินใจ:

สวิทช์ ($ cTask) {

กรณี 'GoPage': // (นี่คือความท้าทายในช่วงเริ่มต้นการดาวน์โหลดหรือรีเฟรชหน้า)

$ COwnerCode = 'cOwner';
$ CSessionCode = 'cSession';
$ CContents = 'cContents';
$ CStatus = 'cStatus';
$ cHTML = iconv ( 'UTF-8', 'CP1251', 'การเข้ารหัสองค์ประกอบ ");
$ CActiveItem = iconv ( 'UTF-8', 'CP1251', 'ตัวแปร');

$ CReply = "scSrvRM | GoPage | ชุด | {$ cOwnerCode}` {$ cSessionCode} | {$ cContents} `{$ cStatus} | {$ cHTML} | {$ cActiveItem}";

ทำลาย;

}

และส่วนสุดท้ายของสคริปต์:

ส่วนหัว ( "Content-Type: ข้อความ / XML; ยอมรับ charset = UTF-8");
ส่วนหัว ( "Cache-Control: ไม่มีแคช");
echo '';
$ CReply = iconv ( 'CP1251', 'UTF-8', $ cReply); // การแปลงจาก 'CP1251' ใน 'UTF-8'
echo $ cReply;

รับการตอบสนองลูกค้า

บนหน้าเว็บที่มีการโหลดในเบราว์เซอร์มันก็พบว่าทันทีที่เซิร์ฟเวอร์จะเตรียมความพร้อมการตอบสนองก็จะมีการประมวลผลการทำงาน WaitReplySC:

ทำงาน WaitReplySC () {

try {

ถ้า (scXHR.readyState == 4) {
ถ้า (scXHR.status == 200) {// การประมวลผลการตอบสนอง

var TestReply = scXHR.responseText;

ถ้า ((TestReply.indexOf (แยกวิเคราะห์ข้อผิดพลาด ')> 0) ||
(TestReply.indexOf (Notice)> 0)) การแจ้งเตือน (scXHR.responseText);

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

var cCmd = ADATA [1];
var CPOs = 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 การตอบสนอง
cVarValues var = ADATA [6]; // ตัวแปรสำหรับแบบฟอร์ม

สวิทช์ (cCmd) {

กรณี 'GoPage:

var dTestLine = document.getElementById ( 'scTestLine');
dTestLine.innerHTML = 'ตอบ = [' + cOwnerCode + ''
+ CSessionCode + ''
+ CContent + ''
+ CStatus + ''
+ CHTML + ''
+ CVarValues + ']';

ทำลาย;
}

} else {
. document.getElementById ( 'scAreaStatus') innerHTML = "ข้อผิดพลาด !!!";
}
}
} catch (จ) {}

}

ดังนั้นการใช้ AJAX-ตัวอย่างหน้าจะโหลดในเบราว์เซอร์ได้รับ (ในองค์ประกอบของ scTestLine):

ตอบ = [cOwner, cSession, cContents, cStatus องค์ประกอบการเข้ารหัสค่าตัวแปร]

กับการเป็นตัวแทนของรหัส jQuery และเวิร์ดเพรส

หน้าในเบราว์เซอร์และข้อความสคริปต์ที่เขียนใน UTF-8 สำหรับใช้ iconv () ฟังก์ชันการแปลงตัวอักษรรัสเซีย ส่วนที่เหลือของโครงกระดูกที่แสดงโดยรหัสง่ายมากและสามารถทำซ้ำได้อย่างง่ายดายสำหรับวัตถุประสงค์เฉพาะใด ๆ

อาจมีการเปลี่ยนแปลงเฉพาะในการตอบสนองเซิร์ฟเวอร์ประมวลผลที่ WaitReplySC () ฟังก์ชั่นและรหัสสคริปต์ที่เกิดขึ้นจริงที่สร้างการตอบสนอง โทร InitXML ฟังก์ชั่น (สำหรับเฉพาะ scURL และข้อมูลที่เกี่ยวข้องกับมัน) จะอยู่ในตัวจัดการเหตุการณ์ในองค์ประกอบของหน้าและกำหนดความหมายขององค์ประกอบเหล่านี้

ตัวอย่างที่นำเสนอของ AJAX ที่มุ่งเน้นไปที่ "คู่มือ" การใช้เทคโนโลยี

ในระบบการจัดการเนื้อหาต่างๆ (SMS) ความสามารถในการอธิบายไว้ในรูปแบบที่แตกต่างกันเป็นกฎในรูปแบบของความจำเพาะโดยเฉพาะอย่างยิ่ง ยกตัวอย่างเช่น jQuery AJAX เป็นไปได้ที่จะตระหนักโทร jQuery.ajax () ฟังก์ชั่นทั้งในระดับที่สูงขึ้น: jQuery.get () และ jQuery.post () พารามิเตอร์จะถูกส่ง URL และการตั้งค่า (ชุดคู่ค่า + แป้น) jQuery.ajax () ผลตอบแทน XMLHttpRequest วัตถุ

JQuery เพื่อติดตามผลของการเสนอฟังก์ชั่นวิธีการ: XHR.done () - ความสำเร็จของการร้องขอ XHR.fail () - จัดการข้อผิดพลาด

jqXHR.done () วิธี yavlyatsya ทางเลือกการจัดการความสำเร็จของ AJAX คำขอ แทนที่ล้าสมัย jqXHR.success () วิธีการ

ในทำนองเดียวกันการใช้ใน Wordpress AJAX เทคโนโลยี ที่นี่ทุกอย่างมีการฝังตัวเองในระบบการจัดการเนื้อหาที่คุณจะต้องใช้โครงสร้างที่นำเสนอ เอกสารที่ให้คำอธิบายรายละเอียด

AJAX ประยุกต์ใช้ขึ้นอยู่กับหลักเกี่ยวกับเครื่องมือที่เลือกแม้ว่ารุ่นคู่มือสามารถนำมาใช้ในแบบคู่ขนานหรือนอกเหนือไปจากระบบการจัดการเนื้อหาที่เลือกอย่างใดอย่างหนึ่งหรือรุ่นของ jQuery อีก หลังจะเป็นประโยชน์ในการทำงานของตัวเองเพราะเกือบทุก SMS ที่ทันสมัยใช้ แต่ในแต่ละวิธีการของตัวเอง

ตัวอย่างคลาสสิกของการประยุกต์ใช้

การใช้งานที่ง่ายและชี้แจงของ AJAX - รถเข็นร้านค้าออนไลน์ หน้าร้านค้าที่เต็มไปเสมอกับสินค้า แต่ในความเป็นจริงพวกเขาอาจจะไม่ โหลดมักจะต้องใช้เวลามาก แต่เมื่อผู้เข้าชมเลือกผลิตภัณฑ์ที่เขาสามารถเสมอเพียงแค่ให้ขึ้นไปบนเขาหรือเปลี่ยนเลือกหนึ่งที่เว็บไซต์อยู่เสมอพึงปรารถนาที่จะแสดงได้อย่างรวดเร็ว

มักจะมีการตระหนักในรูปแบบของกระเช้าและเครื่องหมายเลือกรอบรายการ โดยไม่ต้องใช้การเปลี่ยนแปลงแบบไดนามิก AJAX เพื่อองค์ประกอบเหล่านี้เป็นปัญหา

AJAX สคริปต์ที่ใช้กลไกในการเพิ่ม / ลบรายการซื้อของคุณกลายเป็นพฤตินัยในหลาย SMS

สำหรับการส่งข้อมูลผ่านแบบฟอร์มปกติ AJAX อาจจะเกิดขึ้นในลักษณะธรรมดา (สำหรับการใส่ชื่อและรหัสผ่าน):