Ajax learning notes

Source: Internet
Author: User
Tags html form

I have been watching jquery this afternoon. Some of them are Ajax encapsulation. In fact, Ajax has been used before, but it is said that it is temporary to use online code. But I always think
It's quite simple, so I don't care. In the afternoon, I found that I was not very familiar with Ajax, but I was only impressed with this. So I just took a look at the specific content in the afternoon. Watch in the afternoon
The main information is the w3school site on the tutorial (http://www.w3school.com.cn/ajax/index.asp), found that I now more and more
The more I like this website, the more I like it. In fact, the organization of the content is still very clear, and the example is also very good.

**************************************** **************************************** **************************************** ***********************

1. Ajax Overview

Ajax refers to Asynchronous JavaScript and XML (Asynchronous JavaScript and XML ).
Ajax is a programming model promoted by Google in 2005. He is not a new programming language, but a new method that uses existing standards. With Ajax, you can create better, faster, and more friendly web applications.
Ajax is based on JavaScript and HTTP requests (HTTP requests ).
Through Ajax, your javascript can use the XMLHTTPRequest object of JavaScript to directly communicate with the server. With this object, your javascript can exchange data with the Web server without reloading the page.
Ajax uses asynchronous data transmission (HTTP request) between the browser and the web server, so that the webpage can request a small amount of information from the server, rather than the whole page. AJAX can make Internet applications smaller, faster, and more friendly. Ajax is a browser technology independent of web server software.

Ajax is based on the following web standards: javascript xml html css. The web standards used in Ajax have been well defined and supported by all mainstream browsers. Ajax applications are independent of browsers and platforms.

2. Basic Ajax objects

Ajax uses HTTP requests

In traditional JavaScript programming, if you want to obtain any information from files or databases on the server, or send information to the server, you must use
HTML form to get or post data to the server. The user needs to click the "Submit" button to send/obtain information, wait for the server to respond, and then a new page will load the results.

Since the server returns a new page after the user submits the input, traditional Web applications become slow and unfriendly. By using Ajax, your JavaScript willXMLHttpRequest
Object to directly communicate with the server.

By using HTTP requests, web pages can send requests to the server and receive responses from the server without loading the page. The user can stay on the same page. He or she does not notice that the script has requested the page in the background or sent data to the server.

XMLHTTPRequest object

By using the XMLHTTPRequest object, Web developers can update the page from the server after the page has been loaded!

In 2005, Ajax was promoted by Google (Google suggest ).

Google suggestions
Create a dynamic web interface using the XMLHTTPRequest object: when you start to enter a query in the Google search box, JavaScript will send these words to a server, then the server returns a series of search suggestions.

The XMLHTTPRequest object is supported by the following browsers: Internet Explorer 5.0 +, Safari 1.2, Mozilla 1.0/Firefox, opera 8 +, and Netscape 7.

3. Ajax application process

1) The main point of AJAX is the XMLHTTPRequest object.
Different browsers use different methods to create XMLHttpRequest objects.
The IE browser uses activexobject, while other browsers use JavaScript built-in objects named XMLHttpRequest.
To create this object for different browsers, we need to use a "Try and catch" statement. You can read more about try and catch statements in our JavaScript tutorial.

The code for creating XMLHttpRequest is as follows:

2) XMLHTTPRequest object knowledge

Before sending data to the server, it is necessary to explain the three important attributes of the XMLHTTPRequest object.

Onreadystatechange attribute

The onreadystatechange attribute contains functions for processing server responses. The following code defines an empty function. You can set the onreadystatechange attribute at the same time:

Readystate attributes

The readystate attribute contains the status information of the server response. When the readystate changes, the onreadystatechange function is executed.
This is the possible value of the readystate attribute:

0 Request not initialized (before calling open)
1 Request Submitted (before sending () is called)
2 The request has been sent (here we can usually get the Content Header from the response)
3 Request Processing (some data is usually available in the response, but the server has not completed the response)
4 The request has been completed (you can access the server response and use it)

We need to add an if statement to this onreadystatechange function to test whether our response has been completed (meaning data can be obtained ):

Responsetext attributes

You can use the responsetext attribute to retrieve the data returned by the server.
In our code, we will set the value of the time text box to be equal to responsetext:

Send a request to the server

To send requests to the server, we need to use the open () method and send () method.
The open () method requires three parameters. The first parameter defines the method (get or post) used to send the request ). The second parameter specifies the URL of the server script. The third parameter specifies that requests should be processed asynchronously.
The send () method can send requests to the server. If we assume that the HTML and ASP files are in the same directory, the Code is as follows:

4. Example

Page

Form HTML code:

The howhint () function is a simple JavaScript function located in the head part of the HTML page.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.