tài liêu và source code về lập trình với ajax
chào các bạn!
Hôm nay mình sẽ giới thiệu cho các bạn về kỹ thuật lập trình ajax.
nếu bạn chưa có tài liệu về ajax thì bạn có thể tìm hiểu thêm.
đây là trang web demo về jax: http://chutinviet.com bạn có thể download sour code tại đây ajax.rar Trong phần source code mình đã ghi rất rõ từng phần và cách thức hoạt động của nó .
1. Đầu tiên ta hiểu về ajax.
AJAX = Asynchronous JavaScript và XML
AJAX không phải là một ngôn ngữ lập trình mới, nhưng là một kỹ thuật mới cho việc thực thi tốt hơn, nhanh hơn, và nhiều ứng dụng web tương tác.
Với AJAX, JavaScript có thể giao tiếp trực tiếp với máy chủ thông qua đối tượng XMLHttpRequest. Với đối tượng này có thể tương tác với một máy chủ web, mà không cần tải lại trang.
AJAX sử dụng truyền dữ liệu không đồng bộ (yêu cầu HTTP) giữa trình duyệt và máy chủ web. Kỹ thuật AJAX làm cho các ứng dụng Internet nhỏ hơn, nhanh hơn và thân thiện.
AJAX dựa trên các tiêu chuẩn Internet
AJAX dựa trên các tiêu chuẩn web sau đây:
• JavaScript
• XML
• HTML
• CSS
2. Viết chương trình thực thi bằng ajax
- Tạo một đối tượng XMLHttpRequest và kiểm tra trình duyệt
• var XmlHttp;
• function getXmlHttp()
• {
• try
• {
• //Neu la trinh duyet Firefox, Opera 8.0 +, Safari
• XmlHttp = new XMLHttpRequest();
• }
• catch (e1)
• {
• // Neu la Internet Explorer 6.0+
• try
• {
• XmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
• }
• catch(e2)
• {
• try
• {
• //Neu la Internet Explorer 5.0+
• XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
• }
• catch (e3)
• {
• alert("Trình duyệt của bạn không hỗ trợ Ajax (Your browser does not support Ajax)");
• return false;
• }
• }
• }
• }
- Tạo một yêu cầu gửi tới máy chủ ajax.
• function Loadcontent(tabid)
• {
• var rq = Math.random();
• var requestUrl;
• requestUrl = "Ajax.aspx?tabid="+tabid;
• //gọi doi tuong xmlhttprequest
• getXmlHttp();
• if(XmlHttp)
• {
• // quá trình thực thi đối tượng
• Loading();
• // gọi hàm HandleResponse
• XmlHttp.onreadystatechange = HandleResponse;
• //gủi yêu cầu đến máy chủ với phương thức GET hặc post url và yêu cầu sử lý không đồng bộ
• XmlHttp.open("GET", requestUrl,true);
• XmlHttp.send(null);
•
• }
• }
- Nhận kết quả trả về khi thực thi.
• function HandleResponse()
• {
//trang thai ket thuc
//0 Yêu cầu này không phải là khởi tạo
//1 Yêu cầu đã được thiết lập
//2 Những yêu cầu đã được gửi
• //3 Yêu cầu là trong quá trình 4Yêu cầu hoàn tất if(XmlHttp.readyState == 4)
• {
• if(XmlHttp.status == 200)
• {
• //noi dung duoc load
• ClearAndSetState(XmlHttp.responseText);
•
• }
• else
• {
• alert("Yêu cầu của bạn không thực hiện được" );
• }
• }
• }
- Gọi hàm thực thi và nhận giá trị trả về.
<a href="#" onclick="Loadcontent('tabintroduce')" class="parent"><span>Giới thiệu</span></a>
và thẻ <div id="idcontent"></div> chứa dữ liệu trả về.
Mọi liện hệ xin gửi về Email: nguyenxuannamdlu@gmail.com
Chúc các bạn thành công.
