Ajax framework learning notes

Source: Internet
Author: User

I. Three Important attributes of the XMLHttpRequest object.

OnreadystatechangeAttribute

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:

XmlHttp. onreadystatechange = function ()

{

// We need to write some code here

}

ReadyStateAttribute

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:

Status

Description

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 ):

XmlHttp. onreadystatechange = function ()

{

If (xmlHttp. readyState = 4)

{

// Obtain data from the server's response

}

}

ResponseTextAttribute

You can use the responseText attribute to retrieve the data returned by the server.

 

 

Ii. Basic source code:

Var xmlHttp

 

Function showCustomer (str)

{

XmlHttp = GetXmlHttpObject ();

If (xmlHttp = null)

{

Alert ("Your browser does not support AJAX! ");

Return;

}

// Set the url of the Request Response

Var url = "getcustomer_xml.asp ";

Url = url + "? Q = "+ str;

Url = url + "& sid =" + Math. random ();

 

XmlHttp. onreadystatechange = stateChanged;

XmlHttp. open ("GET", url, true );

XmlHttp. send (null );

}

 

Function stateChanged ()

{

If (xmlHttp. readyState = 4)

{

// ResponseText returns an HTTP response using a string

// Document. getElementById ("txtHint"). innerHTML = xmlHttp. responseText;

 

// ResponseXML returns a response in XML

// The server ContentType attribute sets the HTTP content type for the response object. The default value of this attribute is "text/html ". The server returns responseXML to set the content type to XML.

Var xmlDoc=xmlHttp.responseXML.doc umentElement;

Document. getElementById ("companyname"). innerHTML =

XmlDoc. getElementsByTagName ("compname") [0]. childNodes [0]. nodeValue;

Document. getElementById ("contactname"). innerHTML =

XmlDoc. getElementsByTagName ("contname") [0]. childNodes [0]. nodeValue;

Document. getElementById ("address"). innerHTML =

XmlDoc. getElementsByTagName ("address") [0]. childNodes [0]. nodeValue;

Document. getElementById ("city"). innerHTML =

XmlDoc. getElementsByTagName ("city") [0]. childNodes [0]. nodeValue;

Document. getElementById ("country"). innerHTML =

XmlDoc. getElementsByTagName ("country") [0]. childNodes [0]. nodeValue;

}

}

 

Function GetXmlHttpObject ()

{

Var xmlHttp = null;

Try

{

// Firefox, Opera 8.0 +, Safari

XmlHttp = new XMLHttpRequest ();

}

Catch (e)

{

// Internet Explorer

Try

{

XmlHttp = new ActiveXObject ("Msxml2.XMLHTTP ");

}

Catch (e)

{

XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");

}

}

Return xmlHttp;

}

 

Iii. Ajax framework:Browser-based application framework and server-based application framework.

1. browser-based application frameworks are generally divided into two types:

Aplication frameworks: Provides browser functions, but its most famous one is to create a desktop GUI through the window generation component. For example, DOJO, qooxdoo, JavaFX, YUI, and ExtJS (the initial name is yui-ext, because the yui library is extended, later, jquery and prototype were extended to ext, Flex (similar to ExtJS), TIBET, and so on.

Infrastructural frameworks: provides basic framework functions and lightweight browser operations for developers to create specific applications. The main functions include:

    • Browser Interaction Based on XMLHttpRequest Components
    • XML parsing and operation functions
    • Perform DOM operations based on the returned information of XMLHttpRequest.
    • In some special cases, it is used together with other browser technologies such as Flash (or Java Applets ).

For example: jQuery (less code), prototype, and MooTools (powerful than prototype, better design than prototype, and many useful design concepts from prototype), Google AJAXSLT, Flash/JavaScript,.

2. server-based application frameworks generally work in either of the following ways (although they are categorized by different languages ):

HTML/JS Generation (HTML/JS Generation): Generate HTML and JS code on the server side and directly run the code on the browser side. For example, Ext GWT.

Remote Interaction: JavaScript calls server-side functions (such as calling Java functions) and returns a callback handle to JavaScript, or requests server-side data information, such as Session information and database queries. Such as DWR.

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.