[Paper Keywords ]Ajax JavaScript DHtml Web2.0
Abstract: ]Ajax is one of the cores of web2.0. By adopting asynchronous mode, Web applications with high user interaction based on browsers can be developed, and the interaction mode of traditional Web applications can be changed, so as to build more dynamic, faster response and better user experience Web applications.
Introduction of Ajax technology
AJAX is called "asynchronous JavaScript and XML"
And XML) refer to web development technologies for creating interactive web applications. Ajax uses the following basic technologies:
HTML: used to build Web forms and Web application interfaces; JavaScript: the core of Ajax technology, which helps to improve communication with server applications; DHTML (Dynamic HTML): used to dynamically update the form. Dynamic HTML elements such as Div and span are usually used to mark html; Document object model DOM: used to handle HTML structure (through JavaScript code).
Second, Ajax principle.
In the traditional Web application, the general process of interaction is: users fill in the form fields and click the submit button, and the whole form is sent to the server for processing by different technologies (such as PHP, JSP, etc.). ) on the server side, and then send the processing results back to the client with a brand-new page. When the user submits and waits for processing, the screen becomes blank and the user cannot get immediate feedback.
The core of Ajax is JavaScript object XmlHttpRequest. This object was originally introduced in Internet Explorer 5. This is a technology that supports asynchronous requests. In short, XmlHttpRequest enables you to use JavaScript to make requests to the server and process responses without blocking users. That is, when a user submits a form, the data is sent to a JavaScript.
The code will not be sent directly to the server. The JavaScript code captures the form data and sends the request to the server, that is, the JavaScript code sends the request in the background, and the user doesn't even know that the request has been sent, and the request is sent asynchronously, that is, the JavaScript code (and the user) don't have to wait for the response from the server. When JavaScript code interacts with the server, users can still continue to input data, scroll the screen and use applications. After the server finishes processing, it returns the data to JavaScript code (still in the Web form), and then uses DOM technology to update the form data quickly, so that users feel that the application is completed immediately, the form is not submitted or refreshed, and users get new data. JavaScript code can even do some calculations on the received data, and then send a request, without any user intervention or even knowing what is happening behind the scenes, thus greatly improving the user experience.
Third, Ajax applications.
Taking modifying user login name as an example, this paper describes the application of AJAX in practice, which can be extended to dynamically modify any text content in web pages.
(1) create an XMLHttpRequest object. To make the code support both Internet Explorer and non-Microsoft browsers, use the following code.
var xmlHttp = false
Try {
xmlHttp = new ActiveX object(" MSXML 2。 XMLHTTP”)；
} catch (e) {
Try {
xmlHttp = new ActiveX object(" Microsoft。 XMLHTTP”)；
}catch (e2) {
xmlHttp = false
}
If (! Type of xmlHttp & amp& ampXMLHttpRequest! =' undefined') {
xmlHttp = new XMLHttpRequest()；
}
After creating the XMLHttpRequest object, you can combine JavaScript code to complete the following tasks: get data from the Web form-> open the connection with the server-> set the response function after the server processing, which is also the general process of Ajax work.
(2) Define JavaScript code for obtaining form data and changing forms.
Function changed to input (id) {
var oNP = document . getelementbyid(id)； //Get data from the form
var value = oNP.value
ONP . outer html = " < input type = ' text ' id = ' "+id+" ' value = ' "+value+" ' size = ' 5 ' onblur = ' change(this . id)' > "
follow-up action