w3pop.com :: ÍøÂçѧԺ :: AJAX :: AJAX XMLHttpRequest
The XMLHttpRequest object makes AJAX possible.
To create AJAX web applications you have to become familiar with the JavaScript object called the XMLHttpRequest.
Òª½¨Á¢AJAXwebÓ¦ÓóÌÐòÄã¾Í±ØÐ뿪ʼÊìϤJS¶ÔÏóÖеÄXMLHttpRequest
The XMLHttpRequest object is the key to AJAX. It has been available ever since Internet Explorer 5.5 was released in July 2000, but not fully discovered before people started to talk about AJAX and Web 2.0 in 2005.
XMLHttpRequest ¶ÔÏóÊÇAJAXµÄ¹Ø¼ü¡£ËüÆäʵÔçÔÚ2000ÄêµÄÆßÔ±㿪ʼÉúЧÁË£¬µ«Ö±µ½2005ÄêÈËÃÇ¿ªÊ¼Ì¸ÂÛAJAXºÍWeb2.0ºó²Å±»·¢¾ò¡£
Below is listed some of the methods and properties you have to become familiar with.
ÏÂÃæÁоٵÄÊÇһЩ·½·¨ºÍÊôÐÔ£¬ÕâЩÄã¶¼Ó¦¸Ã·Ç³£ÊìϤ
Different browsers use different methods to create an XMLHttpRequest object.
²»Í¬µÄä¯ÀÀÆ÷ʹÓÃÁ˲»Í¬µÄ½¨Á¢·½·¨
Internet Explorer uses an ActiveXObject.
ÔÚIEÀïʹÓõÄÊÇActiveXObject
Other browsers uses a built in JavaScript object called XMLHttpRequest.
ÆäËüä¯ÀÀÆ÷ʹÓõÄÊÇJSÄÚ½¨µÄXMLHttpRequest ¶ÔÏó
Here is the simplest code you can use overcome this problem:
ÕâÊǶμòµ¥µÄ´úÂ룬¿ÉÒÔÓÃÀ´½â¾öÕâ¸öÎÊÌ⣺
var XMLHttp=null |
Example above explained:
ÉÏÃæ¾ÙÀýµÄ½âÎö£º
First create a variable XMLHttp to use as your XMLHttpRequest object. Set the value to null.
Ê×ÏȽ¨Á¢µÄÊÇÒ»¸öÃûΪXMLHttpµÄ±äÁ¿£¬ÎÒÃÇ¿ÉÒÔÓÃËüÀ´´úÌæXMLHttpRequest¶ÔÏó¡£ÉèÖÃÕâ¸ö±äÁ¿µÄֵΪnull
Then test if the object window.XMLHttpRequest is available. This object is available in newer versions of browsers like Firefox, Mozilla, and Opera.
È»ºó²âÊÔ϶ÔÏówindow.XMLHttpRequestÊÇ·ñÓÐЧ¡£Õâ¸ö¶ÔÏóÖ»ÔÚFirefox, Mozilla, ºÍ OperaÕâЩä¯ÀÀÆ÷µÄа汾ÖÐÓÐЧ¡£
If it's available, use it to create a new object:
Èç¹ûËüÊÇÓÐЧµÄ£¬ÄÇô¾ÍʹÓÃËüÀ´½¨Á¢Ò»¸öеĶÔÏó£º
XMLHttp=new XMLHttpRequest().
If it's not available, test if an object window.ActiveXObject is available. This object is available in Internet Explorer version 5.5 and later.
Èç¹ûÎÞЧ¡£²âÊÔ϶ÔÏówindow.ActiveXObjectÊÇ·ñÓÐЧ¡£Õâ¸ö¶ÔÏóÖ»ÔÚIE5.5ÒÔÉϵİ汾ÖÐÓÐЧ¡£
If it is available, use it to create a new object:
Èç¹ûÓÐЧ£¬ÄÇô½¨Á¢Ò»¸öеĶÔÏó£º
XMLHttp=new ActiveXObject().
Some programmers will prefer to use the newest and fastest version of the XMLHttpRequest object.
һЩ³ÌÐòÏ£ÍûʹÓÃ×îÐÂ×î¿ì°æ±¾µÄXMLHttpRequest¶ÔÏó¡£
The example below tries to load Microsoft's the latest version "Msxml2.XMLHTTP", available in Internet Explorer 6, before it falls back to "Microsoft.XMLHTTP", available in Internet Explorer 5.5 and later.
ÏÂÃæÕâ¸ö¾ÙÀý»á³¢ÊÔ¼ÓÔØÎ¢Èí×îа汾ÖеÄ"Msxml2.XMLHTTP"¡£ËüÔÚIE6ÖÐÓÐЧ£¬ÒÔǰµÄ°æ±¾¶¼ÊÇ"Microsoft.XMLHTTP"¡£
var XMLHttp=null |
Example above explained:
ÉÏÃæ¾ÙÀýµÄ½âÎö£º
First create a variable XMLHttp to use as your XMLHttpRequest object. Set the value to null.
Ê×ÏȽ¨Á¢Ò»¸öXMLHttp±äÁ¿¿ÉÓÃ×öÄãµÄXMLHttpRequest¶ÔÏó¡£ÉèÖÃΪnullÖµ
Then try to create the object the Microsoft way, available in Internet Explorer 6 and later:
È»ºó³¢ÊÔÓÃMSµÄ·½·¨À´½¨Á¢Ò»¸öÔÚIE6»ò¸üа汾ÖÐÓÐЧµÄ¶ÔÏó£º
XMLHttp=new ActiveXObject("Msxml2.XMLHTTP")
If this catches an error, try the older (Internet Explorer 5.5) way:
Èç¹û²¶»ñµ½ÁË´íÎ󣬾ͳ¢ÊÔÓÃÀÏÒ»µãµÄ·½·¨:
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
If XMLHttp still has a null value, try to create the object the "standard" way:
Èç¹ûXMLHttpÒÀ¾ÉΪnullÖµ£¬ÄÇô¾ÍÓÓ±ê×¼”·½·¨½¨Á¢£º
XMLHttp=new XMLHttpRequest()
The open() method sets up a request to a web server.
½¨Á¢¶Ôweb·þÎñÆ÷µÄÇëÇó¡£
The send() method sends a request to the server.
Ïò·þÎñÆ÷·¢ËÍÇëÇó
The abort() method aborts the current server request.
·ÅÆúµ±Ç°µÄ·þÎñÆ÷ÇëÇó
The readyState property defines the current state of the XMLHttpRequest object.
readyState ¶¨ÒåÁ˵±Ç°XMLHttpRequest¶ÔÏóµÄ״̬
Here are the possible values for the readyState propery:
ÕâËùÁоٵÄÊÇһЩreadyState¿ÉÄܳöÏÖµÄÖµÒÔ¼°ÏàÓ¦µÄÃèÊö£º
| State ״̬ |
ÃèÊö |
|---|---|
| 0 | The request is not initialized ÇëÇóÉÐδ³õʼ»¯ |
| 1 | The request has been set up ÇëÇóÒѾ½¨Á¢ |
| 2 | The request has been sent ÇëÇóÒÑ·¢ËÍ |
| 3 | The request is in process ÇëÇóÕýÔÚ´¦ÀíÖÐ |
| 4 | The request is completed ÇëÇóÍê³É |
readyState=0 after you have created the XMLHttpRequest object, but before you have called the open() method.
·¢ÉúÔÚÄãÒѾ½¨Á¢XMLHttpRequest¶ÔÏóÖ®ºó£¬¶øÔÚÄãµ÷ÓÃopen()·½·¨Ö®Ç°µÄÕâ¸ö½×¶Î
readyState=1 after you have called the open() method, but before you have called send().
·¢ÉúÔÚÄãÒѾµ÷ÓÃopen()·½·¨Ö®ºó£¬¶øÔÚÄãµ÷ÓÃsend()·½·¨Ö®Ç°µÄÕâ¸ö½×¶Î
readyState=2 after you have called send().
·¢ÉúÔÚÄãÒѾµ÷ÓÃsend()·½·¨Ö®ºó
readyState=3 after the browser has established a communication with the server, but before the server has completed the response.
·¢ÉúÔÚä¯ÀÀÆ÷ÒѾÓÚ·þÎñÆ÷½¨Á¢¹µÍ¨Ö®ºó£¬¶øÔÚ·þÎñÆ÷Íê³É·´À¡Ç°µÄÕâ¸ö½×¶Î
readyState=4 after the request has been completed, and the response data have been completely received from the server.
·¢ÉúÔÚÇëÇóÍê³É²¢ÊÕµ½À´×Ô·þÎñÆ÷µÄ·´À¡ÐÅÏ¢Ö®ºó
Different browsers treat the ready state differently. Don't expect all browsers to report all states. Some will not report 0 and 1.
²»Í¬µÄä¯ÀÀÆ÷¶ÔÓÚ²»Í¬µÄ״̬´¦Àí·½Ê½²»Í¬¡£±ðÖ¸ÍûËùÓÐä¯ÀÀÆ÷¶¼Äܱ¨¸æËùÓÐ״̬¡£Ò»Ð©ä¯ÀÀÆ÷²»»á±¨¸æ0ºÍ1
For Your AJAX applications you will actually only be interested state 4. That is when the request is completed and it is safe use the received data.
ÔÚÄã×Ô¼ºµÄAJAX³ÌÐòÖÐÊÂʵÉÏÄãÖ»Òª×¢ÖØÏÂ״̬4¾ÍÐÐÁË¡£
The responseText property contains the text returned by the server.
responseTextÊôÐÔ°üº¬ÁË´Ó·þÎñÆ÷·µ»ØµÄÎÄ×ÖÐÅÏ¢