Compare Revisions

Getting Started

Revision 48727:

Revision 48727 by R01cn on

Revision 48728:

Revision 48728 by R01cn on

Title:
Getting Started
Getting Started
Slug:
AJAX/Getting_Started
AJAX/Getting_Started
Tags:
AJAX, NeedsTechnicalReview, XMLHttpRequest
AJAX, NeedsTechnicalReview, XMLHttpRequest
Content:

Revision 48727
Revision 48728
n162    <h3 name="Step_3_.E2.80.93_.22All_together_now.21.22_-_A_Simpn162    <h3 name="Step_3_.E2.80.93_.22All_together_now.21.22_-_A_Simp
>le_Example">>le_Example.E7.AC.AC3.E6.AD.A5_.E2.80.94_.E2.80.9C.E9.9B.86.EF.BF.
 >BD.3F.EF.BF.BD.3F.E2.80.94_.E4.B8.80.E4.B8.AA.E7.AE.80.EF.BF.BD.3
 >F.EF.BF.BD.E7.9A.84.E4.BE.8B.EF.BF.BD.3F">
163      Step 3 – "All together now!" - A Simple Example163      Step 3 – "All together now!" - A Simple Example<br>
164    </h3>164      第3步 — “集�?�?— 一个简�?�的例�?
165    <p>165    </h3>
166    <p>
166      Let's put it all together and do a simple HTTP request. Our167      Let's put it all together and do a simple HTTP request. Our
> JavaScript will request an HTML document, <code>test.html</code>> JavaScript will request an HTML document, <code>test.html</code>
>, which contains the text "I'm a test." and then we'll <code>aler>, which contains the text "I'm a test." and then we'll <code>aler
>t()</code> the contents of the <code>test.html</code> file.>t()</code> the contents of the <code>test.html</code> file.<br>
168      让我们把上述所有的事情全部集中起�?�,�?�一个简�?�的HTTP请求。我们的Java脚本将请求一个HTML文档,<
 >code>test.html</code>,它�?�有文本“I'm a test.�?,然�?�我们<code>alert</co
 >de>(报警)这个<code>test.html</code>文件的内容。
n181                // See note below about this linen183                // See note below about this line(�?��?以下关于这一行的注明
 >
n223      In this example:n225      In this example:<br>
226      在这个例�?中:
nn238      <li>用户点击�?览器的“Make a request�?链接;
235    </ul>239      </li>
240      <li>这会调用带有一个�?�数的<code>makeRequest()</code>函数 — 在�?�一目录中的�?
 >?字为&lt;ocde&gt;test.html&lt;/code&gt;的HTML文件;
241      </li>
242      <li>生�?这个请求,然�?�这个执行(<code>onreadystatechange</code>)被传递给<c
 >ode>alertContents()</code>;
243      </li>
244      <li>
245        <code>alertContents()</code>检查是�?�已�?收到了这个�?应,并处于OK状�?,然�
 >?�<code>alert()</code>(报警)<code>test.html</code>文件的内容。
246      </li>
236    <p>247    </ul>
248    <p>
237      You can test the example <a class="external" href="http://w249      You can test the example <a class="external" href="http://w
>ww.w3clubs.com/mozdev/httprequest_test.html">here</a> and you can>ww.w3clubs.com/mozdev/httprequest_test.html">here</a> and you can
> see the test file <a class="external" href="http://www.w3clubs.c> see the test file <a class="external" href="http://www.w3clubs.c
>om/mozdev/test.html">here</a>.>om/mozdev/test.html">here</a>.<br>
238    </p>250      你�?�以<a class="external" href="http://www.w3clubs.com/mozde
 >v/httprequest_test.html">在这里</a>测试这个例�?,并�?�以<a class="external" 
 >href="http://www.w3clubs.com/mozdev/test.html">在这里</a>看看这个test文件。
239    <p>251    </p>
252    <p>
240      <b>Note</b>: The line <code>http_request.overrideMimeType('253      <b>Note</b>: The line <code>http_request.overrideMimeType('
>text/xml');</code> above will cause Javascript Console errors in >text/xml');</code> above will cause Javascript Console errors in 
>Firefox 1.5b as documented at https://bugzilla.mozilla.org/show_b>Firefox 1.5b as documented at https://bugzilla.mozilla.org/show_b
>ug.cgi?id=311724 if the page called by XMLHttpRequest is not vali>ug.cgi?id=311724 if the page called by XMLHttpRequest is not vali
>d XML (eg, if it is plain text).>d XML (eg, if it is plain text).<br>
241    </p>254      <b>注�?</b>:如果由XMLHttpRequest调用的页�?��?是有效的XML文档(�?�,如果是纯文本文档
 >),上述 <code>http_request.overrideMimeType('text/xml');</code>代�?行在
 >Firefox 1.5b中会引起Java脚本控制�?�错误,正如在https://bugzilla.mozilla.org/sho
 >w_bug.cgi?id=311724中所�??述的那样。
242    <p>255    </p>
256    <p>
243      If you get Syntax Error or Not Well Formed Error on that br257      If you get Syntax Error or Not Well Formed Error on that br
>owser, and you're not trying to load an XML page from XMLHttpRequ>owser, and you're not trying to load an XML page from XMLHttpRequ
>est, remove that line from your code.>est, remove that line from your code.<br>
244    </p>258      如果你在�?览器中得到一个语法错误,或者没有正常地形�?错误报告,并且这会儿�?�?用XMLHttpRequest�?
 >�装载一个XML页�?�,你�?�以从代�?中删除这一行。
245    <p>259    </p>
260    <p>
246      <b>Note 2</b>: if you are sending a request to a piece of c261      <b>Note 2</b>: if you are sending a request to a piece of c
>ode that will return XML, rather than to a static XML file, you m>ode that will return XML, rather than to a static XML file, you m
>ust set some response headers if your page is to work in Internet>ust set some response headers if your page is to work in Internet
> Explorer in addition to Mozilla. If you do not set header <code>> Explorer in addition to Mozilla. If you do not set header <code>
>Content-Type: application/xml</code>, IE will throw a Javascript >Content-Type: application/xml</code>, IE will throw a Javascript 
>error 'Object Expected' after the line where you try to access an>error 'Object Expected' after the line where you try to access an
> XML element. If you do not set header <code>Cache-Control: no-ca> XML element. If you do not set header <code>Cache-Control: no-ca
>che</code> the browser will cache the response and never re-submi>che</code> the browser will cache the response and never re-submi
>t the request, making debugging 'challenging'.>t the request, making debugging 'challenging'.<br>
247    </p>262      <b>注�? 2</b>:如果你正在�?��?一个请求给一个代�?段,由它�?�返回XML文档,而�?是使用�?��?
 >XML文件,而你的�?览器�?是Mozilla的情况下,你必须设置一个�?应文件的文件头。如果你未设置<code>Content-
 >Type: application/xml</code>文件头,IE�?览器在执行访问一个XML元素时弹出Java脚本错误'Obj
 >ect Expected'(异常的对象)。如果你未设置<code>Cache-Control: no-cache</code>,�
 >?览器将会把这个�?应缓存起�?�,并且�?能�?新递交这个请求(这是一个“挑战性的�?调试问题)。
248    <p>263    </p>
264    <p>
249      <b>Note 3</b>: if the http_request variable is used globall265      <b>Note 3</b>: if the http_request variable is used globall
>y, competing functions calling makeRequest() may overwrite each o>y, competing functions calling makeRequest() may overwrite each o
>ther, causing a race condition. Declaring the http_request variab>ther, causing a race condition. Declaring the http_request variab
>le local to the function and passing it to the alertContent() fun>le local to the function and passing it to the alertContent() fun
>ction prevents the race condition.>ction prevents the race condition.<br>
250    </p>266      <b>注�? 3</b>:如果http_request被作为全局�?��?�?�使用,则调用makeRequest()
 >的那些竞争函数�?�能会相互覆盖从而引起混乱情况。将http_request�?��?申明�?函数内局部�?��?,并将它传递给a
 >lertContent()函数会防止这�?混乱情况的�?�生。
251    <p>267    </p>
252      <b>Note 4</b>: To register the call back function onreadyst
>atechange, you cannot have any argument: 
253    </p>268    <p>
269      <b>Note 4</b>: To register the call back function onreadyst
 >atechange, you cannot have any argument: <b>注�? 4</b>:�?注册回调函数nor
 >eadystatechange,你�?能用任何�?�数:
254    <pre>270    </p>
271    <pre>
255http_request.onreadystatechange = function() { alertContents(http272http_request.onreadystatechange = function() { alertContents(http
>_request); };  //1 (simultaneous request)>_request); };  //1 (simultaneous request — 并�?�请求)
256http_request.onreadystatechange = alertContents(http_request); //273http_request.onreadystatechange = alertContents(http_request); //
>2 (does not work)>2 (does not work — �?工作)
257http_request.onreadystatechange = alertContents;  //3 (global var274http_request.onreadystatechange = alertContents;  //3 (global var
>iable)>iable — 全局�?��?)
t260      Method 1 allows to have several requests done in simultaneot277      Method 1 allows to have several requests done in simultaneo
>usly, method 2 will not work, method 3 is used if http_request is>usly, method 2 will not work, method 3 is used if http_request is
> a global variable> a global variable<br>
278      方法1�?许�?�时进行多个请求,方法2将�?工作,方法3用于http_request是全局�?��?的情况。

Back to History