Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 52 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
52
Dung lượng
1,46 MB
Nội dung
1 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC DÂN LẬP HẢI PHÒNG -o0o - TÌM HIỂU KỸ THUẬT AJAX VÀ VIẾT ỨNG DỤNG THỰC NGHIỆM ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY NGÀNH CƠNG NGHỆ THƠNG TIN Sinh viên thực hiện: Đào Thị Thanh Huyền Giáo viên hướng dẫn: Ths Đỗ Văn Chiểu Mã số sinh viên: 110559 Mangh■■ng Luôn 123doc Th■a thu■n l■icam s■ tr■ h■u k■t s■ nghi■m t■im■t d■ng s■website mang kho m■i th■ m■ l■i d■n CH■P vi■n nh■ng cho ■■u kh■ng ng■■i NH■N quy■n chia dùng, l■ CÁC s■l■i v■i và■I■U t■t công h■n mua nh■t 2.000.000 ngh■ bán KHO■N cho tàihi■n ng■■i li■u TH■A tài th■ hàng li■u dùng hi■n THU■N ■■u ■ t■t Khi ■■i, Vi■t c■ khách b■n l■nh Nam Chào online hàng v■c: Tác m■ng tr■ không tài phong thành b■n khác chun ■■n thành tíngì d■ng, v■i so nghi■p, viên 123doc v■i cơng c■a b■n hồn ngh■ 123doc g■c h■o, thơng B■n và■■ n■p có tin, cao th■ ti■n ngo■i tính phóng vào ng■, Khách trách tài to,kho■n nhi■m thu nh■ c■a ■■i hàng tùy123doc, v■i ý cót■ng th■b■n d■ ng■■i dàng s■ dùng ■■■c tra c■u M■c h■■ng tàitiêu li■u nh■ng hàng m■t■■u quy■n cáchc■a l■i123doc.net sau xác,n■p nhanh ti■n tr■ chóng thành website th■ vi■n tài li■u online l■n nh■t Vi■t Nam, cung c■p nh■ng tài li■u ■■c khơng th■ tìm th■y th■ tr■■ng ngo■i tr■ 123doc.net Nhi■u event thú v■, event ki■m ti■n thi■t th■c 123doc luôn t■o c■ h■i gia t■ng thu nh■p online cho t■t c■ thành viên c■a website Mangh■n Luôn Th■a Xu■t Sau Nhi■u 123doc h■■ng phát thu■n l■i event cam s■ nh■n m■t tr■ t■ h■u k■t s■ thú nghi■m t■i ýxác n■m t■■ng m■t d■ng v■, s■ nh■n website mang event kho m■i ■■i, t■o t■ th■ m■ l■i c■ng ki■m ■■ng d■n 123doc CH■P vi■n nh■ng cho ■■u ■■ng ti■n h■ kh■ng ng■■i NH■N ■ã quy■n th■ng thi■t chia t■ng ki■m dùng, l■ CÁC s■ th■c s■ l■i b■■c v■i ti■n vàchuy■n ■I■U t■t công h■n mua 123doc online kh■ng nh■t 2.000.000 ngh■ bán KHO■N sang b■ng cho tài ■■nh hi■n ng■■i li■u ph■n tài TH■A tài v■ th■ li■u hàng t■o li■u thông dùng tríhi■n THU■N hi■u c■ c■a ■■u ■ tin t■t h■i Khi ■■i, qu■ Vi■t xác c■ khách gia b■n nh■t, minh l■nh Nam t■ng Chào online hàng uy tài v■c: l■nh thu Tác m■ng tín kho■n tr■ nh■p khơng tài phong v■c cao thành b■n email nh■t tài online khác chun ■■n li■u thành tínb■n Mong cho d■ng, v■i so nghi■p, viên kinh ■ã t■t 123doc 123doc.net! v■i mu■n công ■■ng c■a c■ doanh b■n hoàn mang ngh■ 123doc ký g■c online thành v■i h■o, Chúng l■i thơng B■n 123doc.netLink cho viên Tính ■■ n■p có tơi tin, c■ng c■a cao th■ ■■n cung ti■n ngo■i tính website phóng ■■ng th■i vào c■p ng■, Khách trách xác tài ■i■m D■ch xã to,kho■n th■c nhi■m h■i thutháng V■ nh■ m■t s■ c■a (nh■ ■■i hàng ■■■c tùy ngu■n 5/2014; 123doc, v■i ■■■c ý cóg■i t■ng th■ tài 123doc v■ mô nguyên b■n d■ ng■■i ■■a t■ dàng s■ v■■t d■■i tri dùng ■■■c ch■ tra th■c m■c ■ây) email c■u M■c h■■ng quý 100.000 cho tài b■n tiêu báu, li■u b■n, nh■ng ■ã hàng phong m■t l■■t tùy ■■ng ■■u quy■n cách truy thu■c phú, ky, c■a c■p ■a l■i b■n vào 123doc.net m■i d■ng, sau xác, vuingày, n■p lòng “■i■u nhanh giàu ti■n s■ ■■ng tr■ giá Kho■n chóng h■u thành tr■ nh■p 2.000.000 website ■■ng Th■a th■ email vi■n th■i Thu■n c■a thành mong tài v■ li■u viên mu■n S■ online ■■ng D■ng click t■o l■n ký, D■ch ■i■u vào nh■t l■t link ki■n V■” vào Vi■t 123doc top sau cho Nam, 200 ■ây cho ■ã cung các (sau g■iwebsite c■p users ■âynh■ng ■■■c cóph■ thêm tài bi■n g■i thu li■u t■t nh■t nh■p ■■c T■it■i khơng t■ng Chính Vi■tth■i th■ Nam, v■y ■i■m, tìm t■123doc.net th■y l■chúng tìm ki■m tơi th■ racóthu■c ■■i tr■■ng th■nh■m c■p top ngo■i 3nh■t ■áp Google tr■ ■KTTSDDV ■ng 123doc.net Nh■n nhu c■u ■■■c theo chiaquy■t danh s■ tài hi■u li■udo ch■t c■ng l■■ng ■■ng vàbình ki■mch■n ti■n online website ki■m ti■n online hi■u qu■ uy tín nh■t Lnh■n 123doc Sau Th■a Xu■t h■■ng phát thu■n cam nh■n m■t t■k■t s■ t■i ýxác n■m t■■ng d■ng s■ nh■n website mang ■■i, t■o t■l■i c■ng ■■ng d■n 123doc CH■P nh■ng ■■u ■■ng h■ NH■N ■ã quy■n th■ng chia t■ng ki■m CÁC s■s■ l■i b■■c ti■n vàchuy■n ■I■U t■t mua online kh■ng nh■t bán KHO■N sang b■ng cho tài ■■nh ng■■i li■u ph■n tài TH■A v■ li■u hàng thơng dùng tríTHU■N hi■u c■a ■■u tin Khi qu■ Vi■t xác khách nh■t, minh Nam Chào hàng uy tài l■nh Tác m■ng tín kho■n tr■ phong v■c cao thành b■n email nh■t tàichuyên ■■n li■u thành b■n Mong v■i nghi■p, viên kinh ■ã 123doc 123doc.net! mu■n ■■ng c■a doanh hoàn mang 123doc kýonline v■i h■o, Chúng l■ivà 123doc.netLink cho Tính ■■ n■p tơi c■ng cao ■■n cung ti■n tính ■■ng th■i vào c■p trách xác tài ■i■m D■ch xãkho■n th■c nhi■m h■itháng V■ m■t s■ c■a (nh■ ■■i ■■■c ngu■n 5/2014; 123doc, v■i ■■■c g■i t■ng tài 123doc v■ mô nguyên b■n ng■■i ■■a t■s■ v■■t d■■i tri dùng ■■■c ch■ th■c m■c ■ây) email M■c h■■ng quý 100.000 cho b■n tiêu báu, b■n, nh■ng ■ã hàng phong l■■t tùy ■■ng ■■u quy■n truy thu■c phú, ky, c■a c■p ■a l■i b■n vào 123doc.net m■i d■ng, sau vuingày, n■p lòng “■i■u giàu ti■n s■ ■■ng tr■ giá Kho■n h■u thành tr■ nh■p 2.000.000 website ■■ng Th■a th■ email vi■n th■i Thu■n c■a thành mong tài v■ li■u viên mu■n S■ online ■■ng D■ng click t■o l■n ký, D■ch ■i■u vào nh■t l■t link ki■n V■” vào Vi■t 123doc top sau cho Nam, 200 ■ây cho ■ã cung các (sau g■iwebsite c■p users ■âynh■ng ■■■c cóph■ thêm tài bi■n g■i thu li■u t■t nh■t nh■p ■■c T■it■i không t■ng Chính Vi■tth■i th■ Nam, v■y ■i■m, tìm t■123doc.net th■y l■chúng tìm ki■m tơi th■ racóthu■c ■■i tr■■ng th■nh■m c■p top ngo■i 3nh■t ■áp Google tr■ ■KTTSDDV ■ng 123doc.net Nh■n nhu c■u ■■■c theo chiaquy■t danh s■ tài hi■u li■udo ch■t c■ng l■■ng ■■ng vàbình ki■mch■n ti■n online website ki■m ti■n online hi■u qu■ uy tín nh■t Luônh■n Th■a Xu■t Sau Nhi■u 123doc Mang h■■ng phát thu■n l■i event cam s■ nh■n m■t tr■ t■ h■u k■t s■ thú nghi■m t■i ýxác n■m t■■ng m■t d■ng v■, s■ nh■n website mang event kho m■i ■■i, t■o t■ th■ m■ l■i c■ng ki■m ■■ng d■n 123doc CH■P vi■n nh■ng cho ■■u ■■ng ti■n h■ kh■ng ng■■i NH■N ■ã quy■n th■ng thi■t chia t■ng ki■m dùng, l■ CÁC s■ th■c s■ l■i b■■c v■i ti■n vàchuy■n ■I■U t■t công h■n mua 123doc online kh■ng nh■t 2.000.000 ngh■ bán KHO■N sang b■ng cho tài ■■nh hi■n ng■■i li■u ph■n tài TH■A tài v■ th■ li■u hàng t■o li■u thơng dùng tríhi■n THU■N hi■u c■ c■a ■■u ■ tin t■t h■i Khi ■■i, qu■ Vi■t xác c■ khách gia b■n nh■t, minh l■nh Nam t■ng Chào online hàng uy tài v■c: l■nh thu Tác m■ng tín kho■n tr■ nh■p khơng tài phong v■c cao thành b■n email nh■t tài online khác chuyên ■■n li■u thành tínb■n Mong cho d■ng, v■i so nghi■p, viên kinh ■ã t■t 123doc 123doc.net! v■i mu■n cơng ■■ng c■a c■ doanh b■n hồn mang ngh■ 123doc ký g■c online thành v■i h■o, Chúng l■i thông B■n 123doc.netLink cho viên Tính ■■ n■p có tơi tin, c■ng c■a cao th■ ■■n cung ti■n ngo■i tính website phóng ■■ng th■i vào c■p ng■, Khách trách xác tài ■i■m D■ch xã to,kho■n th■c nhi■m h■i thutháng V■ nh■ m■t s■ c■a (nh■ ■■i hàng ■■■c tùy ngu■n 5/2014; 123doc, v■i ■■■c ý cóg■i t■ng th■ tài 123doc v■ mô nguyên b■n d■ ng■■i ■■a t■ dàng s■ v■■t d■■i tri dùng ■■■c ch■ tra th■c m■c ■ây) email c■u M■c h■■ng quý 100.000 cho tài b■n tiêu báu, li■u b■n, nh■ng ■ã hàng phong m■t l■■t tùy ■■ng ■■u quy■n cách truy thu■c phú, ky, c■a c■p ■a l■i b■n vào 123doc.net m■i d■ng, sau xác, vuingày, n■p lòng “■i■u nhanh giàu ti■n s■ ■■ng tr■ giá Kho■n chóng h■u thành tr■ nh■p 2.000.000 website ■■ng Th■a th■ email vi■n th■i Thu■n c■a thành mong tài v■ li■u viên mu■n S■ online ■■ng D■ng click t■o l■n ký, D■ch ■i■u vào nh■t l■t link ki■n V■” vào Vi■t 123doc top sau cho Nam, 200 ■ây cho ■ã cung các (sau g■iwebsite c■p users ■âynh■ng ■■■c cóph■ thêm tài bi■n g■i thu li■u t■t nh■t nh■p ■■c T■it■i khơng t■ng Chính Vi■tth■i th■ Nam, v■y ■i■m, tìm t■123doc.net th■y l■chúng tìm ki■m tơi th■ racóthu■c ■■i tr■■ng th■nh■m c■p top ngo■i 3nh■t ■áp Google tr■ ■KTTSDDV ■ng 123doc.net Nh■n nhu c■u ■■■c theo chiaquy■t danh s■ tài hi■u li■udo ch■t c■ng l■■ng ■■ng vàbình ki■mch■n ti■n online website ki■m ti■n online hi■u qu■ uy tín nh■t u■t phát Nhi■u Mang Luôn 123doc Th■a Xu■t Sau h■n h■■ng phát thu■n l■i event s■ cam nh■n t■ m■t tr■ t■ h■u ýk■t s■ thú nghi■m t■i ýt■■ng xác n■m t■■ng m■t d■ng v■, s■ nh■n website mang event t■o kho m■i ■■i, t■o t■ c■ng th■ m■ l■i c■ng ki■m ■■ng d■n 123doc CH■P vi■n nh■ng cho ■■ng ■■u ■■ng ti■n h■ kh■ng ng■■i NH■N ■ã quy■n th■ng thi■t chia ki■m t■ng ki■m dùng, l■ CÁC s■ th■c ti■n s■ l■i b■■c v■i ti■n vàchuy■n ■I■U t■t công online h■n mua 123doc online kh■ng nh■t 2.000.000 ngh■ bán KHO■N b■ng sang b■ng cho tài ■■nh hi■n tài ng■■i li■u ph■n tài TH■A li■u tài v■ th■ li■u hàng t■o li■u thơng dùng trí hi■u hi■n THU■N hi■u c■ c■a ■■u ■ tin qu■ t■t h■i Khi ■■i, qu■ Vi■t xác c■ khách gia nh■t, b■n nh■t, minh l■nh Nam t■ng Chào online uy hàng uy tài v■c: l■nh thu Tác tín m■ng tín kho■n tr■ cao nh■p khơng tài phong v■c cao thành b■n nh■t email nh■t tài online khác chuyên ■■n li■u thành tín Mong b■n Mong cho d■ng, v■i so nghi■p, viên kinh ■ã mu■n t■t 123doc 123doc.net! v■i mu■n công ■■ng c■a c■ doanh b■n mang hoàn mang ngh■ 123doc ký g■c online thành v■i l■i h■o, Chúng l■i thông B■n cho 123doc.netLink cho viên Tính ■■ n■p có c■ng tơi tin, c■ng c■a cao th■ ■■n cung ti■n ngo■i ■■ng tính website phóng ■■ng th■i vào c■p ng■, Khách trách xác xã tài ■i■m D■ch xã to,h■i kho■n th■c nhi■m h■i thum■t tháng V■ nh■ m■t s■ c■a (nh■ ■■i hàng ngu■n ■■■c tùy ngu■n 5/2014; 123doc, v■i ■■■c ý cótài g■i t■ng th■ tài 123doc nguyên v■ mô nguyên b■n d■ ng■■i ■■a t■ dàng s■ v■■t tri d■■i tri dùng ■■■c ch■ th■c tra th■c m■c ■ây) email c■u quý M■c h■■ng quý 100.000 cho tài báu, b■n tiêu báu, li■u b■n, nh■ng phong ■ã hàng phong m■t l■■t tùy ■■ng ■■u phú, quy■n cách truy thu■c phú, ky, c■a c■p ■a ■a l■i b■n vào d■ng, 123doc.net m■i d■ng, sau xác, vuingày, n■p giàu lòng “■i■u nhanh giàu ti■n giá s■ ■■ng tr■ giá Kho■n chóng h■u tr■ thành tr■ nh■p ■■ng 2.000.000 website ■■ng Th■a th■ email th■i vi■n th■i Thu■n mong c■a thành mong tài v■ li■u mu■n viên mu■n S■ online ■■ng D■ng t■o click t■o l■n ■i■u ký, D■ch ■i■u vào nh■t l■t link ki■n ki■n V■” vào Vi■t 123doc cho top sau cho Nam, cho 200 ■ây cho ■ã cung các (sau g■i users website c■p users ■âynh■ng có ■■■c cóph■ thêm thêm tài bi■n g■i thu thu li■u t■t nh■p nh■t nh■p ■■c T■it■i Chính khơng t■ng Chính Vi■tth■i vìth■ Nam, vìv■y v■y ■i■m, tìm 123doc.net t■123doc.net th■y l■chúng tìm ki■m tơi th■ racó ■■i thu■c ■■i tr■■ng th■ nh■m nh■m c■p top ngo■i ■áp 3nh■t ■áp Google ■ng tr■ ■KTTSDDV ■ng 123doc.net nhu Nh■n nhuc■u c■u ■■■c chia theo chias■ quy■t danh s■tàitài hi■u li■u li■uch■t ch■t c■ng l■■ng l■■ng ■■ng vàvàki■m bình ki■mch■n ti■n ti■nonline online website ki■m ti■n online hi■u qu■ uy tín nh■t Nhi■u Mang Ln 123doc Th■a Xu■t Sau h■n h■■ng phát thu■n l■i event s■ cam nh■n m■t tr■ t■ h■u k■t s■ thú nghi■m t■i ýxác n■m t■■ng m■t d■ng v■, s■ nh■n website mang event kho m■i ■■i, t■o t■ th■ m■ l■i c■ng ki■m ■■ng d■n 123doc CH■P vi■n nh■ng cho ■■u ■■ng ti■n h■ kh■ng ng■■i NH■N ■ã quy■n th■ng thi■t chia t■ng ki■m dùng, l■ CÁC s■ th■c s■ l■i b■■c v■i ti■n vàchuy■n ■I■U t■t công h■n mua 123doc online kh■ng nh■t 2.000.000 ngh■ bán KHO■N sang b■ng cho tài ■■nh hi■n ng■■i li■u ph■n tài TH■A tài v■ th■ li■u hàng t■o li■u thơng dùng tríhi■n THU■N hi■u c■ c■a ■■u ■ tin t■t h■i Khi ■■i, qu■ Vi■t xác c■ khách gia b■n nh■t, minh l■nh Nam t■ng Chào online hàng uy tài v■c: l■nh thu Tác m■ng tín kho■n tr■ nh■p khơng tài phong v■c cao thành b■n email nh■t tài online khác chuyên ■■n li■u thành tínb■n Mong cho d■ng, v■i so nghi■p, viên kinh ■ã t■t 123doc 123doc.net! v■i mu■n công ■■ng c■a c■ doanh b■n hoàn mang ngh■ 123doc ký g■c online thành v■i h■o, Chúng l■i thông B■n 123doc.netLink cho viên Tính ■■ n■p có tơi tin, c■ng c■a cao th■ ■■n cung ti■n ngo■i tính website phóng ■■ng th■i vào c■p ng■, Khách trách xác tài ■i■m D■ch xã to,kho■n th■c nhi■m h■i thutháng V■ nh■ m■t s■ c■a (nh■ ■■i hàng ■■■c tùy ngu■n 5/2014; 123doc, v■i ■■■c ý cóg■i t■ng th■ tài 123doc v■ mơ ngun b■n d■ ng■■i ■■a t■ dàng s■ v■■t d■■i tri dùng ■■■c ch■ tra th■c m■c ■ây) email c■u M■c h■■ng quý 100.000 cho tài b■n tiêu báu, li■u b■n, nh■ng ■ã hàng phong m■t l■■t tùy ■■ng ■■u quy■n cách truy thu■c phú, ky, c■a c■p ■a l■i b■n vào 123doc.net m■i d■ng, sau xác, vuingày, n■p lòng “■i■u nhanh giàu ti■n s■ ■■ng tr■ giá Kho■n chóng h■u thành tr■ nh■p 2.000.000 website ■■ng Th■a th■ email vi■n th■i Thu■n c■a thành mong tài v■ li■u viên mu■n S■ online ■■ng D■ng click t■o l■n ký, D■ch ■i■u vào nh■t l■t link ki■n V■” vào Vi■t 123doc top sau cho Nam, 200 ■ây cho ■ã cung các (sau g■iwebsite c■p users ■âynh■ng ■■■c cóph■ thêm tài bi■n g■i thu li■u t■t nh■t nh■p ■■c T■it■i khơng t■ng Chính Vi■tth■i th■ Nam, v■y ■i■m, tìm t■123doc.net th■y l■chúng tìm ki■m tơi th■ racóthu■c ■■i tr■■ng th■nh■m c■p top ngo■i 3nh■t ■áp Google tr■ ■KTTSDDV ■ng 123doc.net Nh■n nhu c■u ■■■c theo chiaquy■t danh s■ tài hi■u li■udo ch■t c■ng l■■ng ■■ng vàbình ki■mch■n ti■n online website ki■m ti■n online hi■u qu■ uy tín nh■t MỤC LỤC MỤC LỤC……………………………………………………………………1 DANH MỤC CHỮ VIẾT TẮT…………………………………………… LỜI NÓI ĐẦU……………………………………………………………….5 Chương I: Tổng quan Ajax………………………………………………7 Giới thiệu…………………………………………………………………… 1.1 Ajax ? 1.2 Các lợi Ajax lập trình Web 1.2.1 Nhìn qua Thế hệ Web thứ 2-Web 2.0 1.2.2 Lợi Ajax 1.2.3 Các công cụ phát triển Ajax 10 1.3 Các công nghệ Ajax 10 1.3.1 Casscading Style Sheet – CSS 10 1.3.2 Document Objet Model – DOM 11 1.3.3 XML việc truyền liệu bất đồng 12 1.3.4 XMLHttpRequest 12 1.3.5 JavaScript 14 1.4 Cơ chế hoạt động ứng dụng Web thông thường 15 1.5 Cơ chế hoạt động Ajax 15 Chương II: Lập trình Ajax với ngơn ngữ PHP……………………… 20 2.1 Giới thiệu ngôn ngữ PHP 20 2.2 Ajax PHP 20 2.3 Kỹ thuật lập trình AJAX với PHP 22 2.3.1 Ví dụ PHP AJAX 22 2.3.2 Ajax Mysql 25 2.3.3 Ajax XML 28 Chương III: Cài đặt thực nghiệm…………………………………… 32 3.1 Chức chương trình 32 3.2 Yêu cầu 34 3.3 Hướng dẫn cài đặt 35 3.3.1 Cài đặt XAMPP 35 3.3.2 Cài đặt web chat 35 3.3.3 Cấu hình 35 3.3.4 Cập nhật phiên CHAT 35 3.3.5 Danh sách số lỗi thường gặp 36 3.4 Cài đặt CSDL 38 3.4.1 Kết nối CSDL 38 3.4.2 Bảng CSDL 38 3.5 Ngôn ngữ AJAX Chat 39 3.5.1 File dịch 39 3.5.2 Quy tắc dịch 40 3.5.3 Chức mở rộng 40 3.6 Sửa đổi tổng thể 41 3.6.1 Thay đổi AJAX Chat 41 3.6.2 Giao diện tuỳ biến 41 3.6.3 Câu lệnh IRC Style 42 3.7 phpBB3 43 3.7.1 Đường dẫn chat phpBB3 43 3.7.2 Hiển thị người chat online forum phpBB 44 3.7.3 Shoutbox PhpBB3 45 3.8 phpBB2 47 3.9 Ứng dụng 3rd-party 48 3.10 Một số hình ảnh chương trình Chat 49 KẾT LUẬN…………………………………………………………………51 TÀI LIỆU THAM KHẢO…………………………………………………52 DANH MỤC CHỮ VIẾT TẮT Tên viết tắt Mô tả API Application Programming Interface CSS Casscading Style Sheet DHTML Dynamic Hypertext Markup Language DOM Document Object Model GML Generalized Markup Language HTML Hypertext Markup Language HTTP Hypertext Transfer Protocol IBM International Business Machines JS Java Script REST Representation State Transfer RSS Really Simple Syndication SGML Standard Generalized Markup Language SOAP Simple Object Access Protocol W3C World Wide Web Consortium XHTML Extensible HyperText Markup Language XML eXtensible Markup Language XSLT eXtensible Stylesheet Language Transformations LỜI NÓI ĐẦU Khi dịch vụ web bùng nổ, người ta nghĩ tất ứng dụng mà bạn sử dụng ứng dụng web thay phần mềm chạy độc lập máy tính đơn lẻ Với phát triển nhanh chóng mạng Internet với ưu điểm ứng dụng web, tương lai phần mềm chắn gắn chặt với ứng dụng web, khơng muốn nói bị thay Các ứng dụng web đời gặp phải vấn đề: ứng dụng chạy chậm so với desktop liên tục phải tải lại trang có kiện thay đổi nội dung, nhu cầu tăng tốc độ tính “mịn” hệ thống cần thiết Chúng ta cần công nghệ phong phú, trợ giúp hữu ích cho nhà quản trị người sử dụng Ajax nói công nghệ mới, đặc biệt Việt Nam sử dụng ngày phổ biến khả tương tác cao, làm cho ứng dụng web gần với ứng dụng Desktop Google số tổ chức sử dụng Ajax để xây dựng có tính chất cộng đồng mong đợi giống mà ứng dụng web thực Ajax cho phép thực điều tốt hơn, thông minh mà sử dụng kỹ thuật cài đặt sẵn máy tính đại Đề tài xoay quanh cơng nghệ Ajax nhận nhiều quan tâm vậy, em chọn đề tài “Tìm hiểu kỹ thuật AJAX viết ứng dụng thực nghiệm” làm đồ án tốt nghiệp Đồ án chia làm chương: Chương 1: Tổng quan Ajax Chương trình bày khái niệm, lợi Ajax, tìm hiểu chế hoạt động ứng dụng web thông thường chế hoạt động ứng dụng web có áp dụng kỹ thuật Ajax; cơng nghệ Ajax (CSS, DOM, XML, XMLHttpRequest, JavaSript); công cụ phát triển Ajax để từ thấy vài trị, lợi ích ứng dụng ajax phát triển phần mềm Chương 2: Lập trình AJAX với ngơn ngữ PHP Chương giới thiệu ngôn ngữ PHP, ngơn ngữ lập trình web mã mở dễ sử dụng (giống C) tương đối linh hoạt Các ứng dụng PHP nhiều đa dạng Chương tập chung vào kỹ thuật lập trình AJAX bàng PHP thơng qua số ví dụ cụ thể Chương 3: Cài đặt thực nghiệm Chương giới thiệu hệ thống gửi thông điệp (thường gọi chat) ứng dụng AJAX với ngôn ngữ PHP Đây hệ thống nguồn mở, vậy, dễ dàng thêm bớt chức cần thiết Phần này, em chỉnh sửa lại giao diện hệ thống tiếng Việt thêm chỉnh sửa số chức khác Cuối phần kết luận vói việc làm phương hướng phát triển đồ án Chương I: Tổng quan Ajax Giới thiệu Bạn có sử dụng Gmail? hay Google Map? Bạn có thích tính chúng? hay tính tiện dụng Flickr? Trên số ứng dụng/dịch vụ web lên thời gian gần ứng dụng khơng giàu tính mà cịn có tính chất “cách mạng” lịch sử phát triển ứng dụng web Điểm chung dịch vụ web gì? Câu trả lời tính cách thức tương tác với người dùng: tiện lợi nhanh chóng bạn gần tưởng sử dụng phần mềm khơng phải xem trang web Công nghệ đứng đằng sau dịch vụ AJAX Cái tên Ajax nhắc đến lần Adaptive Path nhanh chóng chấp nhận rộng rãi cộng đồng người phát triển ứng dụng web có lẽ tên nhắc đến nhiều xem công nghệ hứa hẹn mở thời kỳ ứng dụng web Vậy Ajax gì? Vì làm điều mà công nghệ trước không thực được? Cơ chế hoạt động nó? Nó có phức tạp khơng? Làm để ứng dụng cho sản phẩm bạn? Có nhiều vấn đề liên quan đến Ajax mà cần nghiên cứu Hầu hết câu chuyện nguồn gốc AJAX Microsoft phát triển công nghệ Remote Scripting vào năm 1998 Tuy nhiên, phương pháp tải không đồng nội dung trang web xuất thành tố IFRAME Internet Explorer (1996) thành tố LAYER Netscape 4.0 năm 1997 Khi giới thiệu Internet Explorer 4.0, Microsoft sử dụng mô hình đối tượng tài liệu DOM khác biệt Đến năm 2000, Netscape hồn tồn đánh thị trường trình duyệt vào tay hãng phần mềm Bill Gates thành tố LAYER khơng cịn chun gia phát triển web ý tới Phải vài năm sau, AJAX lại lôi kéo quan tâm giới công nghệ trở thành công cụ cải tiến giao diện người dùng cho ứng dụng web Thuật ngữ xuất cách năm (tháng 2/2005) viết tiếng Jesse James Garrett trang Adaptive Path Từ đó, AJAX trở thành trung tâm câu chuyện liên quan đến hệ Web 2.0 1.1 Ajax ? AJAX, viết tắt từ Asynchronous JavaScript and XML (JavaScript XML không đồng bộ), công cụ cho phép tăng tốc độ ứng dụng web cách cắt nhỏ liệu hiển thị cần thiết, thay tải tải lại tồn trang web AJAX khơng phải công nghệ đơn lẻ mà kết hợp nhóm cơng nghệ với Trong đó, HTML CSS đóng vai hiển thị liệu, mơ hình DOM trình bày thông tin động, đối tượng XMLHttpRequest trao đổi liệu khơng đồng với máy chủ web, cịn XML định dạng chủ yếu cho liệu truyền Đây cơng nghệ sẵn có Javacript lắp ráp chúng lại để thực điều đáng khâm phục 1.2 Các lợi Ajax lập trình Web Đề tài AJAX trở thành trung tâm câu chuyện liên quan đến hệ Web 2.0 1.2.1 Nhìn qua Thế hệ Web thứ 2-Web 2.0 Được xem cách mạng thứ hai giới mạng, hệ Web có thay đổi quan trọng khơng tảng cơng nghệ mà cịn cách thức sử dụng - hình thành nên mơi trường cộng đồng người tham gia đóng góp cho xã hội ảo, khơng đơn giản “xem” “duyệt” Khái niệm Web 2.0 lần Dale Dougherty, phó chủ tịch O‟Reilly Media, đưa hội thảo Web 2.0 lần thứ O‟Reilly Media MediaLive International tổ chức vào tháng 10/2004 Dougherty không đưa định nghĩa mà dùng ví dụ so sánh phân biệt Web 1.0 Web 2.0:“DoubleClick Web 1.0; Google AdSense Web 2.0 Ofoto Web 1.0; Flickr Web 2.0 Britannica Online Web 1.0; Wikipedia Web 2.0.vv…” Sau Tim O‟Reilly, chủ tịch kiêm giám đốc điều hành O‟Reilly Media, đúc kết lại đặc tính Web 2.0: - Web có vai trị tảng, chạy ứng dụng Tập hợp trí tuệ cộng đồng Dữ liệu có vai trị then chốt - Phần mềm cung cấp dạng dịch vụ web cập nhật không ngừng Phát triển ứng dụng dễ dàng nhanh chóng Phần mềm chạy nhiều thiết bị Giao diện ứng dụng phong phú - Công nghệ: Kiến trúc công nghệ Web 2.0 phát triển bao gồm: phần mềm máy chủ, chế cung cấp nội dung, giao thức truyền thơng, trình duyệt ứng dụng - Cung cấp nội dung: Cơ chế cung cấp nội dung, sử dụng giao thức chuẩn hóa phép người dùng sử dụng thơng tin theo cách - Dịch vụ web có hai loại giao thức REST SOAT REST (Representation State Transfer ) dạng yêu cầu dịch vụ Web mà máy khách truyền trạng thái tất giao dịch; SOAP (Simple Object Access Protocol) phụ thuộc máy chủ việc trì thơng tin trạng thái.Với loại dịch vụ Web gọi qua API Ngôn ngữ chung dịch vụ Web XML, có ngoại lệ - Phần mềm máy chủ: Các giải pháp phát triển theo hướng Web 2.0 phân làm hai loại xây dựng hầu hết tính tảng máy chủ nhất, xây dựng ứng dụng thêm cho máy chủ Web, có sử dụng giao thức API Một số ứng dụng phổ biến web 2.0 kể đến như: RSS, Đánh dấu xã hội, Viết blog, mạng xã hội, website chia sẻ đa phương tiện, Wikis, mash-up 1.2.2 Lợi Ajax Hầu hết ứng dụng Web sử dụng phương thức request/response (yêu cầu/phản hồi) để chuyển tải trang HTML từ máy chủ Kết đến thao tác click vào button, chờ đợi máy chủ, click button khác, chờ đợi tiếp Với Ajax đối tượng XMLHttpRequest, bạn sử dụng phương thức yêu cầu/phản hồi mà người dùng chờ đợi máy chủ trả lời Trong nhiều trường hợp, trang web chứa nhiều nội dung thông thường trang Nếu sử dụng phương pháp truyền thống, nội dụng phải nạp lại tồn với yêu cầu Tuy nhiên, sử dụng Ajax, ứng dụng web yêu cầu cho nội dung cần thiết phải cập nhật, giảm lượng lớn băng thông thời gian nạp trang Việc dùng yêu cầu không đồng (Asynchronous request) cho phép giao diện người dùng ứng dụng hiển thị trình duyệt giúp người dùng trải nghiệm tương tác cao, với nhiều phần riêng lẻ Việc sử dụng Ajax làm giảm kết nối đến server, mã kịch (script) style sheet phải yêu cầu lần Ajax tập hợp cơng nghệ, cơng nghệ cung cấp hệ thống sở tảng cho thiết kế phát triển ứng dụng Web: 10 - XHTML hay HTML Cascading Style Sheets (CSS) cung cấp tiêu chuẩn thể nội dung trang Web với người dùng - Document Object Model (DOM) cung cấp cấu trúc cho phép hiển thị động nội dung tương tác liên quan DOM mở nhiều cách thức mạnh cho người dùng muốn truy cập thao tác với đối tượng nằm văn - XML XSLT cung cấp kiểu định dạng cho liệu, để liệu thao tác, truyền tải trao đổi máy chủ (server) máy khách (client) - XMLHttpRequesst Điểm bất cập lớn xây dựng ứng dụng Web lần webpage tải trình duyệt người dùng, kết nối server liên quan bị cắt Hơn nữa, đường dẫn bên trang đòi hỏi phải thiết lập kết nối khác với server tải toàn trang cho dù người dùng muốn mở rộng đường link đơn giản XMLHttpRequest cho phép truy vấn liệu không đồng đảm bảo trang web không bị load trở lại thay đổi yêu cầu người dùng mức nhỏ - JavaScript (JS) ngôn ngữ kịch hợp đối tượng để hoạt động với cách hiệu quả, giữ vai trị đáng kể ứng dụng web Chính thành phần mà nói đến AJAX người ta thường nghĩ đến khả tương tác cao, tốc độ nhanh dễ dùng 1.2.3 Các công cụ phát triển Ajax - Atlas, toolkit Ajax Microsoft Dojo Toolkit, toolkit Ajax/DHTML Prototype, khuôn khổ mã nguồn mở Sajax, toolkit Ajax đơn giản Rialto (Rich Internet AppLication Toolkit) 1.3 Các công nghệ Ajax Như nói trên, Ajax tập hợp nhiều cơng nghệ Chúng ta tìm hiểu thêm cơng nghệ có Ajax 1.3.1 Casscading Style Sheet – CSS CSS tạm dịch kiểu bảng xếp chồng – phần thiếu thiết kế Web Một Style Sheet đưa cách kiểm sốt định dạng trực quan, áp dụng cho phần riêng lẻ trang 38 Để khắc phục vấn đề này, bạn phải thiết lập cho AJAX Chat thư viện cài đặt : Mở chat/install.php chat/index.php trình soạn thảo mã nguồn bạn Sau tìm thay file sau: define('AJAX_CHAT_PATH',dirname($_SERVER['SCRIPT_FILENAME']).'/'; và:define('AJAX_CHAT_PATH', realpath(dirname( FILE )).'/'); 3.4 Cài đặt CSDL 3.4.1 Kết nối CSDL Nếu bạn sử dụng phiên forum tích hợp phpBB3, phpBB2, MyBB, PunBB, SMF vBullentin, AJAX Chat sử dụng kết nối liệu có sẵn forum Trong số trường hợp, bạn thiết lập cấu hình liệu Null (phiên mặc định) // Database connection values: $config['dbConnection'] = array(); // Database hostname: $config['dbConnection']['host'] = null; // Database username: $config['dbConnection']['user'] = null; // Database password: $config['dbConnection']['pass'] = null; // Database name: $config['dbConnection']['name'] = null; // Database type: $config['dbConnection']['type'] = null; // Database link: $config['dbConnection']['link'] = null; Nếu bạn sử dụng CSDL khác cho phiên forum bạn cần phải nhận xét dịng lib/class/CustomAJAXChat.php.Ví dụ bạn muốn tích hợp cho phpBB3: // Use the existing phpBB database connection: $this->setConfig('dbConnection', 'link', $db-> db_connect_id); 3.4.2 Bảng CSDL Tạo bảng sử dụng script thực thi script cài đặt việc truy cập địa URL với trình duyệt:http://example.org/path/to/chat/install.php, thay http://example.org/path/to/chat/ với địa URL thực tới thư viện chat bạn Lưu ý phải xóa install.php từ thư viện chat máy chủ sau thiết lập Thực thi câu lệnh SQL với phpAdmin Bạn lựa chọn CSDL kích vào dịng chữ “Import”, sau lựa chọn chat.sql từ ổ cứng chọn OK Điều nên thực thi câu lệnh để tạo bảng 39 Xử lý lỗi SQL: số người dùng thơng báo họ phải xố charset cột chức từ file SQL Để khắc phục bạn nên truy cập sửa file chat.sql trước bạn sử dụng với scrip cài đặt phpMyAdmin DROP TABLE IF EXISTS ajax_chat_online; CREATE TABLE ajax_chat_online ( userID INT(11) NOT NULL, userName VARCHAR(64) NOT NULL, userRole INT(1) NOT NULL, channel INT(11) NOT NULL, dateTime DATETIME NOT NULL, ip VARBINARY(16) NOT NULL ); DROP TABLE IF EXISTS ajax_chat_messages; CREATE TABLE ajax_chat_messages ( id INT(11) NOT NULL AUTO_INCREMENT, userID INT(11) NOT NULL, userName VARCHAR(64) NOT NULL, userRole INT(1) NOT NULL, channel INT(11) NOT NULL, dateTime DATETIME NOT NULL, ip VARBINARY(16) NOT NULL, text TEXT, PRIMARY KEY (id) ); DROP TABLE IF EXISTS ajax_chat_bans; CREATE TABLE ajax_chat_bans ( userID INT(11) NOT NULL, userName VARCHAR(64) NOT NULL, dateTime DATETIME NOT NULL, ip VARBINARY(16) NOT NULL ); DROP TABLE IF EXISTS ajax_chat_invitations; CREATE TABLE ajax_chat_invitations ( userID INT(11) NOT NULL, channel INT(11) NOT NULL, dateTime DATETIME NOT NULL); 3.5 Ngôn ngữ AJAX Chat 3.5.1 File dịch Để tiến hành việc chuẩn hố ngơn ngữ, bạn phải dịch số file sau: - lib/lang/en.php js/lang/en.js Ngồi ra, bạn dịch tên ngơn ngữ bạn cần phải có danh sách ngơn ngữ có sẵn lib/config.php Ví dụ như: “vi”=> “Việt nam” 40 3.5.2 Quy tắc dịch - Chắc chắn đoạn dịch bạn file thuộc dịnh dạng UTF-8 - Không sử dụng thực thể HTML file dịch - Khơng xố bỏ cá dấu %s bên js/lang/*.js - Khơng thay đổi câu lệnh (ví dụ: /join) lib/lang/*.php - Khơng thay đổi ví dụ URL http://example.org lib/lang/*.php - Không thay đổi tiêu đề (AJAX Chat) lib/lang/*.php – bạn thay đổi cài đặt bạn, dịch nên để tên - Thử nghiệm file dịch bạn (bằng cách ạo vài ngôn ngữ cần thiết) kiểm tra có lỗi xảy - Nếu bạn đóng gói file dịch thành dạng nén, nên sử dụng định dạng mở như: BZIP, GZIP, 7-Zip or ZIP 3.5.3 Chức mở rộng 3.5.3.1 Mở khung chat cửa sổ popup Để truy cập vào khung chat, bạn cần có đường link tới thư viện chat Để mở link cửa sổ với kích thước vừa đủ hình, bạn cần đến JavaScript Thêm đoạn code sau vào head tất trang hiển thị link chat // Thay đổi link tới khung chat cách sử dụng hàm định nghĩa đây: Chat Điều mở khung chat với độ rộng 800px chiều cao 600px, hình khơng có nút cơng cụ menu Nó thu gọn sử dụng thị đầy đủ so với độ rộng hình Để mở cửa sổ chat với kích thước khác bạn nên sử dụng link sau: Chat 3.5.3.2 Đóng khung chat cửa sổ popup Mặc định, khung chat mà bạn truy cập vào đóng bạn đăng xt ngồi (bằng cách gửi tới câu lệnh /quit kích vào nút đăng xuất) Nếu bạn muốn cửa sổ chat đóng ghi đè phương thức sau ajaxChat.handleLogout việc thêm đoạn code tới js/custom.js: ajaxChat.handleLogout = function(url) { setTimeout("window.close()", 1); } 3.5.3.3 Chuyển hướng người dùng tới URL tuỳ họ đăng xuất Phương thức JavaScipt ajaxChat.handleLogout(url) tạo URL tham số chuyển hướng người sử dụng tới Địa URL gửi tới ajaxChat.handleLogout(url) thiết lập máy chủ lib/config.php // Argument that is given to the handleLogout JavaScript method: $config['logoutData'] = 'http://example.org'; 3.6 Sửa đổi tổng thể 3.6.1 Thay đổi AJAX Chat Khi thay đổi AJAX Chat, bạn nên sử dụng file bao gồm để ghi đè lên chức bạn muốn thay đổi việc chỉnh sửa tập tin bị lỗi Điều làm Chat bạn cập nhật phiên phát hành dễ dàng nhiều 3.6.2 Giao diện tuỳ biến Cách bố trí AJAX Chat hồn tồn tuỳ biến cách sử dụng CSS (Cascading Style Sheets) AJAX CHAT kèm với tập hợp phong cách định nghĩa trước Để thêm style riêng bạn làm sau: - Thêm file CSS (ví dụ: mystyle.css) việc chép style có sẵn từ thư viện CSS - Chỉnh sửa tập tin bạn (css/mystyle.css) điều chỉnh thiết lập CSS theo ý thích bạn - Thêm tên style mà không cần mở rộng tập tin với style có sẵn lib/config.php Các file mẫu: 42 - Để tuỳ chỉnh thêm cách bố trí bạn điều chỉnh tập tin mẫu lib/template - Chắc chắn bạn tạo XHTMl hợp lệ, không bạn tạo xảy lỗi trình duyệt Điều trang nội dung “application/xhtml+xml” - Sử dụng kiểu nội dung nhằm cài thiện hiệu suất thao tài liệu Object model (DOM) - Nếu lý bạn khơng thể tạo XHTML hợp lệ, bạn sử dụng bắt buộc nội dung HTML Chỉ cần chỉnh sửa lib/config.php thiết lập tuỳ chọn sau: $config['contentType'] = 'text/html'; 3.6.3 Câu lệnh IRC Style AJAX Chat cung cấp giao diện để thêm lệnh IRC style Các câu lệnh phân tích cú pháp bên máy chủ (PHP) máy khách (JavaScript) Điều ngăn cách việc bố trí ngơn ngữ cụ thể từ phía máy chủ logic Trong hướng dẫn này, ta thêm lệnh tuỳ chỉnh để thị IP riêng bạn chatlist: Máy chủ: Sửa file lib/class/CustomAJAXChat.php ghi đè lên phương thức parseCustomCommands việc thêm function parseCustomCommands($text, $textParts) { switch($textParts[0]) { // Display userIP: case '/myip': $this->insertChatBotMessage( $this->getPrivateMessageID(), '/myip '.$this->getPhiênIP() ); return true; default: return false; } } Tới lớp CustomAJAXChat trước đó: } ?> Máy khách: sửa file js/custom.js ghi đè phương thức replaceCustomCommands việc thêm ajaxChat.replaceCustomCommands = function(text, textParts) { switch(textParts[0]) { 43 case '/myip': return '' + this.lang['myip'].replace(/%s/, textParts[1]) + ''; default: return text; } } Tới kết thúc file Các biến ngôn ngữ: chỉnh sửa js/lang/en.js thêm myip: 'Your IP is %s.', trước var ajaxChatLang = { 3.7 phpBB3 3.7.1 Đường dẫn chat phpBB3 Đây nhiệm vụ dễ dàng phụ thuộc vào nơi bạn muốn đặt thư mục chat tương đối vào thực mục forum Ví dụ: ta giả định cấu sau: http://example.org/chat http://example.org/forum Sửa lib/custom.php thay đổi $phpbb_root_path = AJAX_CHAT_PATH.' /'; Tới $phpbb_root_path = AJAX_CHAT_PATH.' /forum/'; Các điều chỉnh hộp thoại chat – shoutbox: Nếu bạn sử dụng khung chat shoutbox forum bạn, bạn phải điều chỉnh theo đường dẫn sau: (sửa file includes/function.php thay đổi): // URL to the chat directory (relative or absolute URL including the trailing slash): define('AJAX_CHAT_URL', 'chat/'); // Path to the chat directory (absolute path including the trailing slash): define('AJAX_CHAT_PATH', realpath(dirname($_SERVER['SCRIPT_FILENAME']).'/chat').'/'); 44 // URL to the chat directory (relative or absolute URL including the trailing slash): define('AJAX_CHAT_URL', ' /chat/'); // Path to the chat directory (absolute path including the trailing slash): define('AJAX_CHAT_PATH', realpath(dirname($_SERVER['SCRIPT_FILENAME']).'/ /chat').'/' ); - Sửa styles/[STYLE_NAME]/theme/stylesheet.css thay đổi: @import url(" / / /chat/css/shoutbox.css"); @import url(" / / / /chat/css/shoutbox.css"); 3.7.2 Hiển thị người chat online forum phpBB Trong file includes/functions.php: Thêm đoạn code: function getChatInterface() { global $phpEx, $phpbb_root_path; static $ajaxChat; if (!$ajaxChat) { // URL to the chat directory: if (!defined('AJAX_CHAT_URL')) { define('AJAX_CHAT_URL', $phpbb_root_path 'chat/'); } // Path to the chat directory: if (!defined('AJAX_CHAT_PATH')) { if (empty($_SERVER['SCRIPT_FILENAME'])) { $_SERVER['SCRIPT_FILENAME'] = $_SERVER['DOCUMENT_ROOT'].$_SERVER['SCRIPT_URL']; } define('AJAX_CHAT_PATH', realpath(dirname($_SERVER['SCRIPT_FILENAME']).'/chat').'/'); } // Validate the path to the chat: if (@is_file(AJAX_CHAT_PATH.'lib/classes.'.$phpEx)) { // Include Class libraries: require_once(AJAX_CHAT_PATH.'lib/classes.'.$phpEx); // Initialize the chat interface: $ajaxChat = new CustomAJAXChatInterface(); } } return $ajaxChat; } function getChatOnlineUsers() { $chatInterface = getChatInterface(); if($chatInterface) { // Clean out any users who didn't log out properly by calling removeInactive() // Not necessary but a good idea You can take out this line if you want 45 $chatInterface->removeInactive(); // Now get the online users: return $chatInterface->getOnlineUsers(); } else { return array(); } } function getChatOnlineUserIDs() { return ($chatInterface = getChatInterface()) ? $chatInterface>getOnlineUserIDs() : array(); } Tại cuối file : ?> Thêm: if(in_array($row['user_id'], getChatOnlineUserIDs())) { $user_online_link = ''.$user_online_link.'*'; } Trước: $online_userlist = ($online_userlist != '') ? ', ' $user_online_link : $user_online_link; Thêm: 'CHAT_LINK' => append_sid("{$phpbb_root_path}chat/index.$phpEx"), 'CHAT_LABEL' => 'Chat ['.count(getChatOnlineUserIDs()).']', 'CHAT_TITLE' => 'Online: '.htmlentities(implode(', ', getChatOnlineUsers()), ENT_QUOTES, 'UTF-8'), Sau: // The following assigns all _common_ variables that may be used at any point in a template $template->assign_vars(array( Trong styles/[STYLE_NAME]/template/overall_header.html Thêm: