Javascript學習筆記12——Ajax入門

來源:互聯網
上載者:User

Ajax:Asynchronous Javascript And XML。寫個簡單的例子:

<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="LabelTime" runat="server"></asp:Label>
</div>
</form>
<script type="text/javascript">
if (!window.XMLHttpRequest) {
window.XMLHttpRequest = function () {
return new ActiveXObject("Microsoft.XMLHTTP");
};
}
function UpdateClock() {
var request = new XMLHttpRequest();
request.open("post", "TimeTest.aspx", false);
request.send("");
document.getElementById("LabelTime").innerText = request.responseText;
}
setInterval(UpdateClock, 1000);

</script>
</body>

而在另一個頁面寫下目前時間,這樣就形成了一個鐘錶。

代碼很簡單,就是操縱一個XMLHttpRequest對象來擷取伺服器時間,然後更新時間。上面的代碼在與伺服器互動時,並沒有頁面整體重新整理,而是局部重新整理。

但是上面的代碼在request.open時,最後一個參數為false,表示發出的XMLHttpRequest是同步的,由於Javascript是單線程的,所以在等待請求的過程中,線程會被阻塞,如果請求時間過長,瀏覽器會停止回應。

雖然Javascript是單線程的,但是XMLHttpRequest具備非同步處理請求的能力。代碼如下:

<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="LabelTime" runat="server"></asp:Label>
</div>
</form>
<script type="text/javascript">
if (!window.XMLHttpRequest) {
window.XMLHttpRequest = function () {
return new ActiveXObject("Microsoft.XMLHTTP");
};
}

function AsynRequest() {
var request = new XMLHttpRequest();
request.open("post", "TimeTest.aspx", true);
request.onreadystatechange = function () {
if (request.readyState === 4) {
UpdateClock(request.responseText);
}
};
request.send("");
}
function UpdateClock(time) {
document.getElementById("LabelTime").innerText = time;
}
setInterval(AsynRequest, 1000);

</script>
</body>

哎,沒有智能提示的日子真不好過。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.