Trong bài trước, tôi đã giới thiệu sơ lược về đối tượng XMLHttpRequest cùng một số phương thức, thuộc tính của đối tượng này. Và để hiểu rõ hơn, chúng ta cần làm một vài ví dụ đơn giản, qua đó bạn có thể thấy được phần nào cách dùng và áp dụng đối tượng này vào ngữ cảnh cụ thể.
Khi đã tạo xong một đối tượng XMLHttpRequest, bạn có thể sử dụng nó để gửi một yêu cầu bất đồng bộ đến server. Để đơn giản hơn, ta gửi yêu cầu và lấy về trang Welcome.htm, nội dung của trang này như sau:
Bây giờ ta hãy xem phương thức sendRequest gửi một yêu cầu bất đồng bộ đến trang này:
Phương thức sendRequest trên nhận vào một tham số url mà bạn sẽ gửi yêu cầu HTTP tới. Kế tiếp (1) mở một kết nối với cờ bất đồng bộ (asynchronous) là true. Sau khi một kết nối được tạo ra, (2) sẽ gán thuộc tính onreadystatechange của đối tượng XMLHttpRequest đến một hàm cục bộ tên là onCallback. Lý do phải dùng cách này là vì đây là một lời gọi bất đồng bộ, bạn không biết khi nào khi nào nó sẽ hoàn thành và được trả lại. Một hàm callback được sử dụng để bạn có thể nhận được kết quả khi yêu cầu gửi đi được hoàn tất hoặc trạng thái của nó được cập nhật. Sau khi xác định kiểu nội dung trong request header, bạn gọi (3) để gửi HTTP request tới server. Giá trị status bằng 200 nghĩa là request thành công.
Toàn bộ mã nguồn của ví dụ này được tạo trong trang AjaxExample1.htm.
Và ta có kết quả khi hiển thị trên IE: Figure 1: Một ví dụ đơn giản về request bất đồng bộ trongAjax Hình minh họa trên cho thấy kết xuất của ví dụ trên khi bạn chạy mã nguồn. Bạn có thể nhận thấy tiêu đề của cửa sổ là từ trang AjaxExample1.htm nhưng nội dung hiển thị lại là từ trang Welcome.htm. Vì ta đặt hàm gọi sự kiện gửi request trong window.onload nên mỗi khi trang được load lên bạn chỉ thấy nội dung dòng chữ này. Điều này có thể làm bạn có thể trang web chẳng làm gì cả ngoài việc hiển thị nội dung của chính nó. Để giúp bạn nhận biết rõ ràng hơn bây giờ ta thêm một button vào trang để khi nào nhấn button đó thì request mới được gửi đi, đồng thời với việc hiển thị nội dung trả về trong thẻ ta sẽ xuất thêm ra một cửa sổ thông báo bằng hàm alert. Mã nguồn của trang trên được sửa lại như sau (những phần được đánh dấu):
Hãy xem kết quả thế nào sau khi nhấn button Click me! trên trang, rõ ràng là trang web đã lấy tất cả nội dung của tập tin Welcome.htm: Vậy là thành công trong việc tạo trang web ứng dụngAjaxđầu tiên, tuy nhiên số lượng code cần viết có thể làm bạn thấy bối rối và khó nhớ. Bạn nghĩ đến việc đưa chúng vào một tập tin .js riêng, nhưng điều này là không cần thiết vì đã có sẵn một thư viện tích hợp sẵn các phương thức để làm việc với javascript và Ajax. Chúng ta sẽ tìm hiểu về thư viện này trong bài sau. http://yinyangit.wordpress.com |
Ajax – Ví dụ minh họa sử dụng XMLHttpRequest
Ý kiến bạn đọc
Tin tức khác
ASP.NET – Serialize đối tượng .NET thành JSON và ngược lại
- 11/4/2012
ASP.NET – Sử dụng một số Extender trong Ajax Control Toolkit
- 4/4/2012
ASP.NET – Cài đặt và cấu hình Ajax Control Toolkit
- 4/4/2012
WebService – Cơ bản về SOAP, WSDL và ASP.NET Web Service
- 14/3/2012
Hiển thị danh sách các tùy chọn khi nhấn vào thuộc tính của ckeditor được đặt trong modalpopup
- 12/3/2012
Ajax – Tìm hiểu về XMLHttpRequest
- 12/3/2012
Hướng dẫn xây dựng Active Menu với Asp.net - SQL Server
- 1/2/2012
Tổng hợp các hàm SQL server tự định nghĩa có thể hữu ích cho bạn
- 7/1/2012
Xây dựng chức năng tìm kiếm cho website
- 6/1/2012
Hướng dẫn tạo SlideShow tin nổi bật
- 10/12/2012
Tin tiêu điểm
-
Export 1 Dataset hoặc DataTable thành file Excel,Word,PDF và CSV (29,878)
-
Xây dựng trang đăng nhập trong asp.net – C# (29,205)
-
Truyền dữ liệu theo phương thức POST sang 1 trang khác trong ASP.NET (23,876)
-
Tạo mã an toàn ( Captcha Image ) cho website (20,636)
-
Lưu trữ và hiển thị hình ảnh trong Database - ASP.NET (20,631)
-
Chọn và upload nhiều file giống như Gmail sử dụng Jquery và ASP.NET (20,369)
-
Import dữ liệu từ file Excel sử dụng ASP.NET (19,782)
-
Một số lỗi thường gặp khi rewrite url trong ASP.Net (sử dụng UrlRewritingNet) (18,794)
-
ViewState trong ASP.Net (18,244)
-
Hướng dẫn tạo SlideShow tin nổi bật (18,127)
Gallery
Text Links
Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
ca do bong da online
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
ca do bong da online
Tags
asp.net
JavaScript
Lập trình
Cơ sở dữ liệu
jquery
Csharp
Ajax
Thủ thuật
JavaScript
menu
Sql Server
Lập trình C#
WebService
stty
Sql
Phân trang
Rewrite
Mã hoá
Backup
Thủ thuật lập trình
Store procedure
Accordion
Validation
Store
Upload
Slide
jQueryPlugin
StoreProcedure
Regular Expression
Regex
android
Quick and snow
HTML5
WPF
WCF
Copyright © 2011 - 2012 vietshare.vn
by
phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.