Ajax Framework Learning Notes _ajax related

One of the three important properties of the XMLHttpRequest object.

onreadystatechange Property

The onReadyStateChange property contains functions that handle server responses. The following code defines an empty function that can be set on the onReadyStateChange property at the same time:

Xmlhttp.onreadystatechange=function ()

{

We need to write some code here.

}

readyState Property

The ReadyState property holds the status information for the server response. Every time readyState changes, the onreadystatechange function is executed.

This is the possible value of the ReadyState property:

State	Describe
0	Request not initialized (before calling open ())
1	Request has been raised (before calling send ())
2	The request has been sent (it is usually possible to get content headers from the response)
3	In request processing (usually some of the data is available in the response, but the server has not yet completed the response)
4	The request has been completed (you can access the server response and use it)

We're going to add an if statement to this onreadystatechange function to test whether our response is complete (meaning we can get the data):

Xmlhttp.onreadystatechange=function ()

{

if (xmlhttp.readystate==4)

{

Getting data from the server's response

}

}

ResponseText Property

The data returned by the server can be retrieved by the ResponseText property.

Two Basic Source:

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 as a string

document.getElementById ("Txthint"). Innerhtml=xmlhttp.responsetext;

Responsexml returns the response in XML

The server-side ContentType property sets the HTTP content type for the response object. The default value for this property is "text/html". Server-side return Responsexml to set the content type to XML.

var xmldoc=xmlhttp.responsexml.documentelement;

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;

}

three. Ajax framework: browser-based application framework based on server-side application framework.

1. The browser-based application framework is generally divided into two categories:

Aplication Frameworks: Provides browser capabilities, but the most notable is the creation of a desktop GUI through a window generation component. such as: Dojo,qooxdoo,javafx,yui,extjs (the first name is Yui-ext, because the expansion of the YUI's library, and later developed into a choice to expand jquery and prototype renamed to EXT), Flex (a lot like ExtJS), Tibet, etc.

Infrastructural frameworks: Provides basic framework functionality and lightweight browser-side operations for developers to create specific applications, including:

• • Browser interaction based on the XMLHttpRequest component
  • XML parsing and manipulation capabilities
  • Perform the appropriate DOM operation based on XMLHttpRequest's return information
  • In some special cases, and other browser-side technologies such as Flash (or Java Applets) are assembled together to apply

such as: JQuery (less code), Prototype,mootools (more powerful than prototype, design than prototype perfect, from the prototype to draw a lot of useful design ideas), Google ajaxslt,flash/ JavaScript, and so on.

2. Server-side application frameworks typically work in the following two ways (although they are categorized according to different languages):

Html/js Generation (html/js Generation): Generates HTML and JS code from the server side to run directly to the browser side. such as: Ext GWT.