Shulou(Shulou.com)06/03 Report--

This article shows you how to learn the Ajax framework, the content is concise and easy to understand, can definitely brighten your eyes, through the detailed introduction of this article, I hope you can get something.

I. three important properties of the XMLHttpRequest object.

Onreadystatechange attribute

The onreadystatechange property stores functions that handle the server's response. The following code defines an empty function that sets the onreadystatechange property at the same time:

XmlHttp.onreadystatechange=function () {/ / We need to write some code here}

ReadyState attribute

The readyState property stores the status information of the server response. Whenever the readyState changes, the onreadystatechange function is executed.

This is the possible value of the readyState property:

Status

Description

0

The request is not initialized (before calling open ())

one

The request has been made (before calling send ())

two

The request has been sent (here you can usually get the content header from the response)

three

Request processing (there is usually some data available in the response, but the server has not completed the response)

four

Request completed (you can access the server response and use it)

We are going to add an If statement to the onreadystatechange function to test whether our response is complete (meaning data is available):

XmlHttp.onreadystatechange=function () {if (xmlHttp.readyState==4) {/ / get data from the server's response}}

ResponseText attribute

You can retrieve the data returned by the server through the responseText property.

2. Basic source code:

Var xmlHttp function showCustomer (str) {xmlHttp=GetXmlHttpObject (); if (xmlHttp==null) {alert ("Your browser does not support AJAX!"); return;} / / set the urlvar url= "getcustomer_xml.asp" of the request response; 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 the HTTP response / / document.getElementById ("txtHint") [xss_clean] = xmlHttp.responseText; / / responseXML with the XML return response / / server-side ContentType property sets the HTTP content type for the response object. The default value for this property is text/html. The server returns responseXML to set the content type to XML. Var xmlDoc=xmlHttp.responseXML.documentElement;document.getElementById ("companyname") [xss_clean] = xmlDoc.getElementsByTagName ("compname") [0] .childNodes [0] .nodeValue; document.getElementById ("contactname") [xss_clean] = xmlDoc.getElementsByTagName ("contname") [0] .childNodes [0] .nodeValue; document.getElementById ("address") [xss_clean] = xmlDoc.getElementsByTagName ("address") [0] .childNodes [0] .nodeValue Document.getElementById ("city") [xss_clean] = xmlDoc.getElementsByTagName ("city") [0] .childNodes [0] .nodeValue; document.getElementById ("country") [xss_clean] = 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;}

Third, Ajax framework: browser-based application framework, server-based application framework.

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

Aplication frameworks: provides browser functionality, but it is best known for building desktop GUI through window generation components. Such as: DOJO,qooxdoo,JavaFX,YUI,ExtJS (the original name is yui-ext, because of the extension of the yui library, and later developed to optionally extend jquery and prototype to change the name to ext), Flex (similar to ExtJS), TIBET and so on.

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

Browser interaction function based on XMLHttpRequest component

XML parsing and operation function

Perform the corresponding DOM operation according to the returned information of XMLHttpRequest

In some special cases, it can be applied together with other browser-side technologies such as Flash (or Java Applets).

Such as: jQuery (less code), prototype,MooTools (more powerful than prototype, better design than prototype, draw a lot of useful design ideas from prototype), Google AJAXSLT,Flash/JavaScript, etc.

two。 Server-based application frameworks typically work in the following two ways (although they are classified according to different languages):

HTML/JS Generation (HTML/JS generation): the HTML and JS code generated by the server side is passed to the browser side to run directly. Such as: Ext GWT.

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

The above content is how to learn the Ajax framework. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.