AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. Classic web pages, which do not use AJAX must reload the entire page if the content should change. Google Suggest is using AJAX to create a very dynamic web interface: When you start typing in Google's search box, a JavaScript sends the letters off to a server and the server returns a list of suggestions.
The server script will be written in ASP. The following example will demonstrate how a web page can communicate with a web server while a user type characters in an input field:. In the example above, when a user types a character in the input field, a function called "showHint " is executed.
First, check if the input field is empty str. If it is, clear the content of the txtHint placeholder and exit the function. The following example will demonstrate how a web page can fetch information from a database with AJAX:.
Try it Yourself ». You have two options available to you when calling code on the server in an Ajax environment. You may choose to define a callback method or you may choose to simply send a message to the server and allow the application to continue with its work without being notified the operation is complete.
If you choose to recognize the response, you will define a callback method in JavaScript. A callback method runs once the browser has recognized a response from the server. Once the callback method is invoked, the application may now conduct some additional processing of the response data as provided by the server.
Some of the traditional lines of n-tier application architecture may blur when you use Ajax. Remember that the business layer should know nothing of how to display information to the user and the user interface should not contain business rules. To accomplish this goal, you should strictly return data to the user interface layer and allow UI services to format the data for the final presentation. An Ajax developer may need to use an interim layer between the business objects and the browser to further prepare server-side data before rendering to the browser.
NET Framework lies on top of the. NET Framework and abstracts the plumbing for Ajax interaction between the server and browser. What is the difference between Ajax and the Ajax. NET Framework? NET is a framework around the technologies that create the Ajax method. NET Framework dynamically creates proxy objects that act as the communication mechanism between the browser and server.
When a developer creates a method in code behind, that method may be decorated with an attribute to tell the Ajax. NET engine to create the necessary JavaScript proxy. The JavaScript proxy object will have a similar interface to the object as it exists on the server. Using the Ajax.
NET Framework, client-side objects will have the same properties as the server-side counterpart. Object methods, however, will not translate from the server side to the proxy object. The proxy is simply a data transfer object and cannot implement server-side logic. The following steps will guide you through creating your first Ajax. NET Framework application. While this example may seem basic in nature, it highlights the necessary steps to get your site up and running with the framework. If you have yet to download the Ajax.
Download the package and extract the contents into a folder that you can easily access. The final product of this first sample will feature a link that uses the Ajax.
NET Framework to retrieve a message from the server. This message is sent to a JavaScript alert box to notify the user. Figure 1 displays what the message will look like. First, you must create a new Web project in Visual Studio to host your application. In your new project, right-click on References and select Add Reference. Navigate to the Ajax. NET Framework. Next update your web. If the requests require processing from the Ajax.
NET Framework, the request is caught at this step and processed by the framework. You can easily add the entry to your web. The httpHandlers node is placed directly after the opening of the system. The next step will signal to the application that the individual page you are working on must be processed through the Ajax. In this instance the class name is WebForm1. Notice that you pass in the class name of the page to the method RegisterTypeForAjax using the typeof method.
Notice the use of the Ajax. AjaxMethod attribute. Applying the attribute to this method will signal to the application that the appropriate JavaScript must be created to allow client-side calls of this method. Other than the attribute, this method is structured and behaves just as any other method you would normally create.
Create some HTML that allows the user to initiate the call to the server. This code will render a link on the page. When the user clicks this link, the browser will contact the server and run the SayHi method. The value of this response is sent to a JavaScript alert box to send a message to the user. Make sure to not include the parenthesis at the end of the method name when defining your call back in the originating method.
Add the code in the following snippet within the HEAD tag of your document. When the page is rendered to the browser, a number of JavaScript elements are dynamically created to support the page. When the page is rendered the references to the Ajax. NET JavaScript library files are automatically added to the page. Also created at this time is a JavaScript proxy that acts as the data transfer object between the client and server.
The server does its processing and then flags the system that a response is ready. When the browser recognizes a response from the server, the callback method is invoked and the response with the interface of the proxy is passed as an argument. The next set of instructions will guide you through creating a simple task system that will help someone keep track of a to-do list.
The application in this article will allow a user to add, edit, and delete tasks. This article will discuss all of the functional code needed to make this application work. You will see screen shots of the project that have Cascading Style Sheet entries applied to them giving the screens a styled layout. If you would like to code this application from scratch using the article, please feel free, but I highly recommend that you at least retrieve the default.
The task system is simple. When the page loads, a populated instance of the TaskCollection class is returned to the browser.
The client will then iterate through the collection and build up some HTML to display each item. When a user clicks the edit link, the information about the selected task is filled into the controls that make up the edit box allowing the user to update the task information.
When the user clicks the save link, the updated information is sent back to the server to update the data store and then the client is updated.
The data container for this article is a custom class called Task. This article uses custom classes and collections to show that you may use your custom business entity classes natively while using the Ajax. This sample application creates a way to fake a persistence medium.
Rather than worrying about the implementation details of dealing with a database or the file system, an instance of TaskCollection is placed into the Application state object. This will act as a stand-in for any sort of persistence medium.
When you implement your applications you may follow the same techniques as outlined here, but instead of reading and writing to the Application state object, you may interact with the persistence medium of your choice. Start with a fresh ASP. NET Call this project AjaxNET. Following the steps described above in the Hello World application, add a reference to the Ajax. Next, update web. NET HttpHandler. Add a new class to the Components folder and name the file Task. Listing 1 defines the Task class which is the foundation of the application.
The Task class will keep track of three pieces of information: ID, the description, and task title. The only behavior in the class right now is a constructor that will request the description and title. Notice that this class is decorated with the Serializable attribute. Applying this attribute will allow the. NET Framework to serialize a class instance for transport through the Ajax. This book is about ASP.
NET 2. Ajax-style pages provide a richer user interface. Such a page is also more responsive because it can respond immediately to users, and can interact more or less immediately with the server. NET AJAX also includes tools for creating mashups , web applications that combine content from multiple sites, typically using the APIs provided by third-party web services. This chapter will get you started with ASP. Ajax has itself generated quite a lot of buzz lately see the Preface for some thoughts about that , as it brings the functionality and user interface UI of web applications closer to that of desktop applications.
The main concept behind Ajax is to enable web pages to make HTTP requests in the background, or asynchronously , without reloading an entire page or, in ASP.
NET terms, without a round trip, or a postback. To work with the client side of Ajax and ASP. Neither is covered extensively in this book. Chapter 2 introduces JavaScript essentials. Other Ajax technologies are discussed in greater detail in Chapter 3. You will develop these skills as we move forward. Writing Ajax-based applications without a framework like ASP. NET AJAX is not necessarily easy, and you can find yourself writing the same code over and over to perform tasks such as displaying the data returned from a request to the server, binding controls to data, or working with web services.
You can also find yourself writing code to work around different browser implementations of the DOM. One of the goals of ASP. NET AJAX is to reduce or even eliminate the need for writing redundant and tedious code and to deliver a client-side developer experience that matches the experience of ASP.
A related goal is to bring to JavaScript some of the productivity advantages of object-oriented programming OOP as well as a framework like. Allows ASP. NET AJAX scripts to run in most browsers and eliminates the need to handcraft scripts for each browser you want to target. The most valuable of these extensions are discussed in Chapter 4. This library provides a number of. NET-like components, such as string builders and timers. Provides ASP. You can program these controls and components directly, or you can use a new declarative markup called xml-script , which we will discuss in several chapters throughout the book.
If you are familiar with ASP. NET markup syntax, then you already understand in general terms the relationship of HTML controls, abstract programmable versions of these controls, and a declarative syntax. Although ASP. NET AJAX provides a host of benefits to the client script programmer creating Ajax applications, it is not just about writing JavaScript and making asynchronous calls to the server.
As ASP. As with ASP. In addition, on the server side, ASP. NET, taking advantage of its inherent features. NET controls and components and participate in the page life cycle. It can be linked to ASP. Finally, with ASP. NET, you can reach beyond the page to special web services. Two controls in particular are fundamental to ASP. Provide certain ASP. NET AJAX client scripts, including profiles, personalization, authentication and membership, and culture-specific services.
You can expect the number of ASP. Therefore, it can also be used without ASP. NET, as we will discuss in Chapter Ultimately, ASP. NET and will be fully supported with designers, IntelliSense, and debugging tools in a future release of Visual Studio. The ASP. It is fully supported by Microsoft and contains the ASP. This package contains an extensive collection of server-side components that provide astonishing Ajax functionality with very little effort.
The Control Toolkit is an open source effort, although Microsoft still controls the project to ensure quality. However, there is no official Microsoft support for elements within the toolkit. This package provides a sneak peek at features that might become part of ASP. The Future Release is also the home of less commonly used functionality that was originally part of pre-release versions of ASP. The CTP Community Technology Preview, a pre-release version made available for download is refreshed more often than the core package.
It also is not officially supported, so use it at your own risk. NET Futures July release.
0コメント