ajax introduce the principle of
On an up / down 1 2008-04-14 18:25:37 / Personal Category: Ajax
View (171) / Comments (1) / Rate (0 / 0)
What is AJAX?
AJAX (Asynchronous JavaScript. And XML) is an emerging term for the description of the two powerful JavaScript performance. These two properties at the network over the years has been ignored by developers, until recently, Gmail, Google suggest, and the google Maps born before横空people are beginning to realize its importance.
These two properties are neglected:
* Without reloading the entire page will be able to send requests to the server.
* For XML document parsing and treatment.
Step 1 - "Please!" --- How to send a HTTP request
In order to use JavaScript to the server send a HTTP request, need an instance of a class of such functions. This type of Internet Explorer in the first instance by the introduction of ActiveX object, called XMLHTTP. Later, Mozilla, Safari and other browsers to follow suit, provided a XMLHttpRequest class, it supports Microsoft's ActiveX object provided by the methods and property.
Therefore, in order to create a cross-browser such instance of a class (object), can be applied to the following code:
if (window.XMLHttpRequest) (/ / Mozilla, Safari, ...
http_request = new XMLHttpRequest ();
) Else if (window.ActiveXObject) (/ / IE
http_request = new ActiveXObject ( "Microsoft.XMLHTTP");
)
(Example of code on to do a certain simplification, This is in order to explain how to create XMLHTTP instance of a class that. Practical code examples can be found in this Step 3.)
If the server does not respond to the XML mime-type header, some Mozilla browsers may not work correctly. In order to resolve this problem, if the server response header instead of text / xml, can call other methods modify the header.
http_request = new XMLHttpRequest ();
http_request.overrideMimeType ( 'text / xml');
Will then have to decide upon receipt of the response from the server, the need to do. This needs to be told that HTTP request object which JavaScript function with the response to treatment. Can be the object onreadystatechange property is set to to use the JavaScript function name, as follows :
http_request.onreadystatechange = nameOfTheFunction;
Note: At no brackets after the function name, and need not pass parameters. Also have a method, you can fly (fly) in the definition of function and its impact on response to acts to be taken, as follows:
http_request.onreadystatechange = function () (
/ / Do the thing
);
In the definition of how to respond after treatment, it is necessary to send a request. Can call HTTP request type of open () and send () method, as follows:
http_request.open ( 'GET', 'http://www.example.org/some.file', true);
http_request.send (null);
* Open () the first parameter is the HTTP request methods - GET, POST, HEAD or any server supported by the way you want to call. In accordance with the HTTP specification, the parameter should be capitalized; Otherwise, some browsers (such as Firefox) may be can not handle the request. on the HTTP request method may refer to the detailed information http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html W3C specs
* The second parameter is the requested page URL. Because of the restrictions of its own security features, the page should not the domain name for third-party page. At the same time we must ensure that all of your pages use the exact domain name, otherwise call the open () will be "permission denied" error. A common mistake is to access the site using domain.tld, and when the requested page, they use www.domain.tld.
* The third parameter setting to whether the request is for asynchronous mode. If it is TRUE, JavaScript function will continue to implement, without waiting for response from the server. This is the "AJAX" in the "A".
If the first parameter is "POST", send () method parameter can be any server want to send data. At this time data to form the string to the server, as follows:
name = value & anothername = othervalue & so = on
Step 2 - "Receive!" Deal with the response from the server ---
When sending a request, it is necessary to deal with the response provided by the designated JavaScript function names.
http_request.onreadystatechange = nameOfTheFunction;
Us to take a look at this function What are the functions. First of all function checks the status of the request. If the status value is 4, that means a complete server response has been received, you will be able to handle the response.
if (http_request.readyState == 4) (
/ / Everything is good, the response is received
) Else (
/ / Still not ready
)
readyState values is as follows:
* 0 (uninitialized)
* 1 (under load)
* 2 (Loading completed)
* 3 (Interaction)
* 4 (complete)
(Source)
Then, function will check the HTTP server response status value. Integrity status values can be found in the W3C site. Watch our focus on value of 200 OK response.
if (http_request.status == 200) (
/ / Perfect!
) Else (
/ / There was a problem with the request,
/ / For example the response may be a 404 (Not Found)
/ / Or 500 (Internal Server Error) response codes
)
Checked at the request of the status value and the HTTP response status value, you can get treatment from the server data. There are two ways to obtain these data:
* Http_request.responseText - text string to the way back the response from the server
* Http_request.responseXML - to XMLDocument object way back in response. XMLDocument object can handle JavaScript. DOM function
Step 3 - "everything is ready!" - Easy examples of
We will now make the whole process once complete, send a simple HTTP request. Our request to use JavaScript a HTML document, test.html, the text contents of documents "I'm a test.". And our "alert ()" test.html document.
<script. type="text/javascript" language="javascript">
var http_request = false;
function makeRequest (url) (
http_request = false;
if (window.XMLHttpRequest) (/ / Mozilla, Safari, ...
http_request = new XMLHttpRequest ();
if (http_request.overrideMimeType) (
http_request.overrideMimeType ( 'text / xml');
)
) Else if (window.ActiveXObject) (/ / IE
try (
http_request = new ActiveXObject ( "Msxml2.XMLHTTP");
) Catch (e) (
try (
http_request = new ActiveXObject ( "Microsoft.XMLHTTP");
) Catch (e) ()
)
)
if (! http_request) (
alert ( 'Giving up Cannot create an XMLHTTP instance');
return false;
)
http_request.onreadystatechange = alertContents;
http_request.open ( 'GET', url, true);
http_request.send (null);
)
function alertContents () (
if (http_request.readyState == 4) (
if (http_request.status == 200) (
alert (http_request.responseText);
) Else (
alert ( 'There was a problem with the request.');
)
)
)
</ script>
<span
nclick = "makeRequest ( 'test.html')">
Make a request
</ span>
This example:
* User clicks on the browser on the "Request" link;
* Added function makeRequest () will be called. Its parameters - HTML file test.html in the same directory;
* This initiated a request. Onreadystatechange the implementation of results will be transmitted to alertContents ();
* AlertContents () will check whether the response from the server successfully received, and if so, will "alert ()" test.html document.
Step 4 - "X-files" --- handle XML response
In the previous example, when the server response to the HTTP request is received, we will call the request object reponseText the property. The property includes the test.html file. Now we'll try property responseXML.
First, we create a valid XML document, we will use the back of the document. The document (test.xml) source code is as follows:
<? xml version = "1.0"?>
<root>
I'm a test.
</ root>
In the script, we only need to modify the request in part:
...
nclick = "makeRequest ( 'test.xml')">
...
Then, at alertContents (), we will alert () the code alert (http_request.responseText); replaced by:
var xmldoc = http_request.responseXML;
var root_node = xmldoc.getElementsByTagName ( 'root'). item (0);
alert (root_node.firstChild.data);
Here, we use the XMLDocument object to provide responseXML and DOM method to get stored in the contents of XML documents.
On an up / down 1 2008-04-14 18:25:37 / Personal Category: Ajax
View (171) / Comments (1) / Rate (0 / 0)
What is AJAX?
AJAX (Asynchronous JavaScript. And XML) is an emerging term for the description of the two powerful JavaScript performance. These two properties at the network over the years has been ignored by developers, until recently, Gmail, Google suggest, and the google Maps born before横空people are beginning to realize its importance.
These two properties are neglected:
* Without reloading the entire page will be able to send requests to the server.
* For XML document parsing and treatment.
Step 1 - "Please!" --- How to send a HTTP request
In order to use JavaScript to the server send a HTTP request, need an instance of a class of such functions. This type of Internet Explorer in the first instance by the introduction of ActiveX object, called XMLHTTP. Later, Mozilla, Safari and other browsers to follow suit, provided a XMLHttpRequest class, it supports Microsoft's ActiveX object provided by the methods and property.
Therefore, in order to create a cross-browser such instance of a class (object), can be applied to the following code:
if (window.XMLHttpRequest) (/ / Mozilla, Safari, ...
http_request = new XMLHttpRequest ();
) Else if (window.ActiveXObject) (/ / IE
http_request = new ActiveXObject ( "Microsoft.XMLHTTP");
)
(Example of code on to do a certain simplification, This is in order to explain how to create XMLHTTP instance of a class that. Practical code examples can be found in this Step 3.)
If the server does not respond to the XML mime-type header, some Mozilla browsers may not work correctly. In order to resolve this problem, if the server response header instead of text / xml, can call other methods modify the header.
http_request = new XMLHttpRequest ();
http_request.overrideMimeType ( 'text / xml');
Will then have to decide upon receipt of the response from the server, the need to do. This needs to be told that HTTP request object which JavaScript function with the response to treatment. Can be the object onreadystatechange property is set to to use the JavaScript function name, as follows :
http_request.onreadystatechange = nameOfTheFunction;
Note: At no brackets after the function name, and need not pass parameters. Also have a method, you can fly (fly) in the definition of function and its impact on response to acts to be taken, as follows:
http_request.onreadystatechange = function () (
/ / Do the thing
);
In the definition of how to respond after treatment, it is necessary to send a request. Can call HTTP request type of open () and send () method, as follows:
http_request.open ( 'GET', 'http://www.example.org/some.file', true);
http_request.send (null);
* Open () the first parameter is the HTTP request methods - GET, POST, HEAD or any server supported by the way you want to call. In accordance with the HTTP specification, the parameter should be capitalized; Otherwise, some browsers (such as Firefox) may be can not handle the request. on the HTTP request method may refer to the detailed information http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html W3C specs
* The second parameter is the requested page URL. Because of the restrictions of its own security features, the page should not the domain name for third-party page. At the same time we must ensure that all of your pages use the exact domain name, otherwise call the open () will be "permission denied" error. A common mistake is to access the site using domain.tld, and when the requested page, they use www.domain.tld.
* The third parameter setting to whether the request is for asynchronous mode. If it is TRUE, JavaScript function will continue to implement, without waiting for response from the server. This is the "AJAX" in the "A".
If the first parameter is "POST", send () method parameter can be any server want to send data. At this time data to form the string to the server, as follows:
name = value & anothername = othervalue & so = on
Step 2 - "Receive!" Deal with the response from the server ---
When sending a request, it is necessary to deal with the response provided by the designated JavaScript function names.
http_request.onreadystatechange = nameOfTheFunction;
Us to take a look at this function What are the functions. First of all function checks the status of the request. If the status value is 4, that means a complete server response has been received, you will be able to handle the response.
if (http_request.readyState == 4) (
/ / Everything is good, the response is received
) Else (
/ / Still not ready
)
readyState values is as follows:
* 0 (uninitialized)
* 1 (under load)
* 2 (Loading completed)
* 3 (Interaction)
* 4 (complete)
(Source)
Then, function will check the HTTP server response status value. Integrity status values can be found in the W3C site. Watch our focus on value of 200 OK response.
if (http_request.status == 200) (
/ / Perfect!
) Else (
/ / There was a problem with the request,
/ / For example the response may be a 404 (Not Found)
/ / Or 500 (Internal Server Error) response codes
)
Checked at the request of the status value and the HTTP response status value, you can get treatment from the server data. There are two ways to obtain these data:
* Http_request.responseText - text string to the way back the response from the server
* Http_request.responseXML - to XMLDocument object way back in response. XMLDocument object can handle JavaScript. DOM function
Step 3 - "everything is ready!" - Easy examples of
We will now make the whole process once complete, send a simple HTTP request. Our request to use JavaScript a HTML document, test.html, the text contents of documents "I'm a test.". And our "alert ()" test.html document.
<script. type="text/javascript" language="javascript">
var http_request = false;
function makeRequest (url) (
http_request = false;
if (window.XMLHttpRequest) (/ / Mozilla, Safari, ...
http_request = new XMLHttpRequest ();
if (http_request.overrideMimeType) (
http_request.overrideMimeType ( 'text / xml');
)
) Else if (window.ActiveXObject) (/ / IE
try (
http_request = new ActiveXObject ( "Msxml2.XMLHTTP");
) Catch (e) (
try (
http_request = new ActiveXObject ( "Microsoft.XMLHTTP");
) Catch (e) ()
)
)
if (! http_request) (
alert ( 'Giving up Cannot create an XMLHTTP instance');
return false;
)
http_request.onreadystatechange = alertContents;
http_request.open ( 'GET', url, true);
http_request.send (null);
)
function alertContents () (
if (http_request.readyState == 4) (
if (http_request.status == 200) (
alert (http_request.responseText);
) Else (
alert ( 'There was a problem with the request.');
)
)
)
</ script>
<span
nclick = "makeRequest ( 'test.html')">
Make a request
</ span>
This example:
* User clicks on the browser on the "Request" link;
* Added function makeRequest () will be called. Its parameters - HTML file test.html in the same directory;
* This initiated a request. Onreadystatechange the implementation of results will be transmitted to alertContents ();
* AlertContents () will check whether the response from the server successfully received, and if so, will "alert ()" test.html document.
Step 4 - "X-files" --- handle XML response
In the previous example, when the server response to the HTTP request is received, we will call the request object reponseText the property. The property includes the test.html file. Now we'll try property responseXML.
First, we create a valid XML document, we will use the back of the document. The document (test.xml) source code is as follows:
<? xml version = "1.0"?>
<root>
I'm a test.
</ root>
In the script, we only need to modify the request in part:
...
nclick = "makeRequest ( 'test.xml')">
...
Then, at alertContents (), we will alert () the code alert (http_request.responseText); replaced by:
var xmldoc = http_request.responseXML;
var root_node = xmldoc.getElementsByTagName ( 'root'). item (0);
alert (root_node.firstChild.data);
Here, we use the XMLDocument object to provide responseXML and DOM method to get stored in the contents of XML documents.