Ajax based (their learning)

2010-09-28  来源:本站原创  分类:Web  人气:186 

XMLHTTPRequest ----> JavaScript objects

open ()

onreadystatechange ----> commission

send ()

readystate ---- page response to off-state

page state status -----

setRequestHeader ---- set the request header protocols

XMLHTTPRequest object created in step
var request = onInit ();
The second step requests the server to tell
request.open ("GET", URL, TRUE); 1 2 server address ways to submit 3 whether to allow the definition of the asynchronous submission of the third step after the start of the event is triggered when a request
request.onreadystatechange = Request;
The fourth step
request.send (null); / / Start the parameters submitted to the server, POST parameters need to be submitted
function CreateResponse ()
(
Create XMLDocument object
var dom = request.ResponseXML ();
String
var str = request.responseText ();
)
function Request ()
(
Completed to determine whether the data response
if (request.readystate == 4)
(
To determine whether it is normal page
if (request.status == 200)
(

)
)
)
function onInit ()
(
if (window.XMLHttpRequest) (
return new windows.XMLHTTPRequest ();
)
if (window.ActiveXObject) (
return new window.ActiveXObject ("microsoft.XMLHTTP");
)
)

-----------------------------------------------
AJAX XMLHttpRequest object is the core function, to develop AJAX XMLHttpRequest object program must start from the understanding.

Understand the XMLHttpRequest object to create the XMLHttpRequest object to start the beginning, in a different browser to create XMLHttpRequest object using different methods:

IE create a XMLHttpRequest object to look at the method (Method 1):

var xmlhttp = new ActiveXObject ("Msxml2.XMLHTTP"); / / newer version of IE using the IE-compatible objects created (Msxml2.XMLHTTP)
var xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP"); / / older versions of IE using the IE-compatible objects created (Microsoft.XMLHTTP)

The Mozilla, Opera, Safari and most non-IE browsers use the following this method (Method 2) to create XMLHttpRequest object:

var xmlhttp = new XMLHttpRequest ();

Internet Explorer uses a practice called XMLHttp object, not the XMLHttpRequest object, Mozilla, Opera, Safari, and most non-Microsoft browsers use the latter (hereinafter collectively referred to XMLHttpRequest object). Initially started using IE7 XMLHttpRequest object.

When creating the XMLHttpRequest object to use a different browser if the browser does not have the right approach would be an error, and you can not use the object. So we need a browser compatible with different ways to create XMLHttpRequest object:

Create a multi-browser compatible method of XMLHttpRequest object

var xmlhttp = false; / / request to create a new variable and assign false. Determine the conditions for using the false, it means not create XMLHttpRequest object.
function CreateXMLHttp () (
try (
xmlhttp = new XMLHttpRequest (); / / try to create XMLHttpRequest object, in addition to IE browsers support outside of this method.
)
catch (e) (
try (
xmlhttp = new ActiveXObject ("Msxml2.XMLHTTP"); / / newer version of IE using the IE-compatible objects created (Msxml2.XMLHTTP)
)
catch (e) (
try (
xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP"); / / older versions of IE using the IE-compatible objects created (Microsoft.XMLHTTP).
)
catch (failed) (
xmlhttp = false; / / if the request fails to ensure that the value is still false.
)
)
)
return xmlhttp;
)
Determine whether the success is very simple to create

if (! xmlhttp) (
/ / Create XMLHttpRequest object failed!
)
else (
/ / Create success!
)
================================================== =======
Created the XMLHttpRequest object, we look at the object's methods, properties, and most importantly, it onreadystatechange event handler.

Method:

open () Description: HTTP request initialization parameters, such as URL and HTTP method, but does not send the request.

abort () Description: Cancel the current response, closes the connection and end any outstanding network activity.

getAllResponseHeaders () Note: the HTTP response headers are not parsed as a string.

getResponseHeader () Description: Returns the HTTP response header value.

send () Description: HTTP request sent, use the pass to open () method parameters, and options passed to the method of the request body.

setRequestHeader () Description: Open but not sent to a set or add a request for HTTP requests.

Attributes:

readyState Description: HTTP request status.

responseText Note: So far as the server receives the response body (excluding head), or if you have not received the data, is the empty string.

responseXML Note: the response to the request, parse the XML Document object as returned.

status Description: The HTTP status returned by the server code.

statusText Description: This property is specified by name rather than the requested number of HTTP status code.

onreadystatechange readyState property changes every time when the event handler function called.

Following a request from the send request and handle the results of the process to understand how the XMLHttpRequest object it.

Before sending the request is to create a XMLHttpRequest object nature, the code above, not much has been written.

Create a XMLHttpRequest object

var xmlhttp = CreateXMLHttp ();

XMLHttpRequest object is created, then we must send a request to which site it to select Park Home of the RSS blog it. That's how I set my site address to request it, using the open () method.

open (method, url, async, username, password)

The method has five parameters, the specific meaning can be seen here: http://www.w3school.com.cn/xmldom/dom_http.asp

This is what we had.

xmlHttp.open ("get", "http://www.cnblogs.com", true);

get parameters that use the get method, the second nature is the destination address, the blog Garden Home, the third is that if asynchronous, and we certainly true of the use. Specific parameters that also can be seen to http://www.w3school.com.cn above.

Well, a good target, and how to send it. With the send () method.

send (body), send () method is only one parameter that represents the DOM object, the DOM object needs to explain the content of many, the next said, today we just write

xmlhttp.send (null);

On it. Well, send, and how to deal with the returned results that do, this time to use the XMLHttpRequest object is the most important thing, and that is onreadystatechange event handler. What do you mean it, it would need to explain the readyState of the XMLHttpRequest object, readyState There are 5 states, respectively, with figures of 0-4 to represent.

Status Name Description
0 Uninitialized initialization state. XMLHttpRequest object has been created (not call open () before) or has been abort () method to reset.
1 Open open () method has been called, but the send () method is not called. Request has not been sent.
2 Sent Send () method has been called, HTTP request has been sent to the Web server. No response is received.
3 Receiving all responses have been received to the head. Response body started to receive but not completed.
4 Loaded HTTP response has been completely received.

But to note that, onreadystatechange event handler can handle the different state of the browser is not uniform, IE and FireFox can handle 1 to 4, and Safari can handle 2 to 4 in the state, Opera can handle both in the 3,4 state. 0 the basic state of no use, because creating the XMLHttpRequest object will immediately call the open () method, this time to become a state, of course, unless you have been to determine whether the abort () to cancel, but this situation remains less. Most cases is to determine 4 (has accepted complete) this state is enough.

Well, see readyState There are 5 states, and that deal is to see the status change to return the results to a different state we do different treatments can be, and how to tell when the XMLHttpRequest object state changes to who is going to deal with this change yet. There are two written, one is to use anonymous methods, and the other is to specify the method of writing is just a different hair, the same effect, see next code:

xmlhttp.onReadyStateChange = function () (
/ / Handle state change code
)
/ / Or
xmlhttp.onReadyStateChange = getResult;
function getResult () (
/ / / Handle state change code
)
/ / By the way, the name of the handle is longer, the memory can be read on ReadyState Change, said state changes in

Request, and also specify the treatment, how to get back the contents of it, there are two properties responseText and responseXML available, responseXML is to return the object, need to resolve the back again, where the first use responseText, to see what returns.

alert (xmlhttp.responseText); / / see if it is returned to the home page of HTML code ah. You will be successful.

The whole process is: to create XMLHttpRequest object -> the specified address and delivery method to send -> send the request -> the specified approach and process to return the results. Note, however, the idea that we understand this is normal, but the specified handle onreadystatechange event handler method needs to specify well before sending, otherwise unable to handle the state change events.
So we should remember the following processes: create XMLHttpRequest object -> send the address and send the specified method -> the specified change of state processing method -> send the request, the request will be sent automatically after the state change of the designated call handling.

Well, look at the code to complete it.

Code completion

var xmlhttp = false; / / request to create a new variable and assign false. Determine the conditions for using the false, it means not create XMLHttpRequest object.
function CreateXMLHttp () (
try (
xmlhttp = new XMLHttpRequest (); / / try to create XMLHttpRequest object, in addition to IE browsers support outside of this method.
)
catch (e) (
try (
xmlhttp = new ActiveXObject ("Msxml2.XMLHTTP"); / / newer version of IE using the IE-compatible objects created (Msxml2.XMLHTTP)
)
catch (e) (
try (
xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP"); / / older versions of IE using the IE-compatible objects created (Microsoft.XMLHTTP).
)
catch (failed) (
xmlhttp = false; / / if the request fails to ensure that the value is still false.
)
)
)
return xmlhttp;
)
xmlhttp = CreateXMLHttp ();
xmlhttp.open ("get", "http://www.cnblogs.com", true);
xmlhttp.onReadyStateChange = getResult;
xmlhttp.send (null);
function getResult () (
if (xmlhttp.readyState == 4) (
alert (xmlhttp.responseText);
)
)

Everything seems OK, but have not thought about, if HTML code in the network during transmission error, or failure of our designated address what would happen. The status property is used when needed, that is the HTTP status code returned by the server. xmlhttp.status equal to 200, said transmission complete without error. HTTP status code of the specific meaning to the W3C organization web site to see if the address http://www.w3.org / Protocols/rfc2616/rfc2616-sec6.html # sec6.1.1.

The getResult () method write the following so I feel really OK.

function getResult () (
if (xmlhttp.readyState == 4 & & xmlhttp.status == 200) (
alert (xmlhttp.responseText);
)
)

相关文章
  • Ajax based (their learning) 2010-09-28

    XMLHTTPRequest ----> JavaScript objects open () onreadystatechange ----> commission send () readystate ---- page response to off-state page state status ----- setRequestHeader ---- set the request header protocols XMLHTTPRequest object created in st

  • AJAX based learning (6) - AJAX request to the server 2010-12-27

    AJAX - a request to the server To send the request to the server, we need to use the open () method and send () method. open () method requires three parameters. The first parameter defines the method used to send the request (GET or POST). The secon

  • AJAX based learning (7) - AJAX server-side script 2010-12-27

    AJAX - server-side script Now we want to create the script displays the current server time. responseText property will store the data returned from the server. Here, we hope to return the current time. This is the "time.jsp" code: <% respons

  • Prototype.js and spring of ajax based pagination 2010-05-26

    This is based on prototype.js for ajax page, use the spring framework, custom page label each page into the list, the list into session, only the session page list of stored pages, do not go query the database, the performance will be higher First, c

  • Ajax based applications 2010-08-13

    Here's how to create XMLHttpRequest XMLHttpRequest class first by the introduction of Internet Explorer with ActiveX object, called XMLHTTP. Later, Netscape Mozilla ﹑ ﹑ Safari and other browsers also provide a XMLHttpRequest class, but they create th

  • The ajax based Rails2.2.2 2010-07-14

    Bowen today made a comment on the ajax submit demo.

  • XHTML + CSS based Knowledge Learning (1) 2010-08-15

    1, xhtml css basics (1) the document type when we look at the new dreamweaver html format document, view the source code, you will find the code at the top of the following words: <! - Ubb-begin -> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

  • ajax based on code 2009-08-31

    1. Page function newXMLHttpRequest () ( var xmlreq = false; if (window.XMLHttpRequest) ( xmlreq = new XMLHttpRequest (); ) Else if (window.ActiveXObject) ( try ( xmlreq = new ActiveXObject ( "Msxml2.XMLHTTP"); ) Catch (e1) ( try ( xmlreq = new A

  • linux based code learning 2010-06-11

    File Name: copy_system.c # Include <unistd.h> # Include <sys/stat.h> # Include <fcntl.h> # Include <stdlib.h> int main () ( char c; int in, out; in = open ("file.in", O_RDONLY); out = open ("file.out", O_WRONLY

  • linux based code learning - file directory display 2010-06-11

    Write show_dir.c # Include <unistd.h> # Include <stdio.h> # Include <dirent.h> # Include <string.h> # Include <sys/stat.h> # Include <stdlib.h> void printdir (char * dir, int depth) ( DIR * dp; struct dirent * entry; st

  • jQuery + Ajax + Struts2. js javascript 2010-04-08

    (1) jQuery's basic usage: WEB2.0 and ideas with ajax the rapid development of Internet communication, one after another there are some excellent Js framework, some of the more famous are Prototype, YUI, jQuery, mootools, Bindows and domestic JSVM fra

  • Introduction Chapter Ajax 2010-05-03

    AJAX = Asynchronous JavaScript and XML (Asynchronous JavaScript and XML) AJAX is not a new programming language, but a better and faster, and to create more interactive Web application technology. Through AJAX, your JavaScript can be used to JavaScri

  • JQUERY and AJAX applications Xiangjie 1 2010-06-05

    6.1 Ajax history </ font> </ p> <p> <font size="2"> AJAX all called "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML), is a kind of creating interactive web applications, web development techno

  • On Mobile Ajax and the Frost Ajax Library 2010-11-19

    Mobile Ajax and the Frost Ajax Library OF Rocco Georgi · 2007 12 5 may This translation from the Mobile Ajax And The Frost Ajax Library Description This article describes how to create mobile websites using Ajax. The following will discuss the mobile

  • jquery ajax solution garbled transmission parameters 2011-05-15

    struts2 + jquery + ajax garbled just learning javaee, using struts2 + dbutils + ajax + jquery stuff in there, want to do on the login page, enter the user name, if the database does not exist is given with a prompt alert and found garbled. Gbk of my

  • Introduction Dojo foundation (1) 2010-04-02

    Summary This article describes the basic information on Dojo, and through some simple examples so that we can have an initial perceptual Dojo. Introduced after the preparation and development environment in the development process need to have the co

  • Select the reason Flex 2010-09-10

    1 Flex and Flash Many people may think that, like Flex with Flash to animate the main is, in fact, Flex asp.net or PHP and other languages with the same, is a tool used to write applications, such as: personnel, Invoicing, Finance, OA, etc. such syst

  • Web design and development of the ultimate resource Daquan (A) 2010-03-18

    http://www.cnbeta.com/articles/106525.htm Rapid Web technology, Web design and development tool for those who can choose more and more, Web developer skills are no longer limited to HTML and server-side programming, but also proficient in a variety o

  • How to access the embedded industry, university graduates 2010-03-19

    How to access the embedded industry, university graduates Embedded , graduate , university , industry Less embedded in this article about a temporary situation, as described in Introduction to wonder somewhat similar to the later work? --------------

  • Beauty of Mathematics Series 15 - Traditional and simple natural language processing of several elite 2010-03-26

    Author: Wu Jun, Google Fellow I am the beauty of the series in mathematics has been a good way to emphasize that simple. But, in fact, natural language processing there are some exceptions, such as a problem of some scholars to the extreme, the persi