文章目錄
-
目錄
文章目錄
前言
一.Ajax概述
?二.原生創建Ajax
?三,使用Jquery處理Ajax
總結
一.Ajax概述
AJAX（Asynchronous Javascript And XML）是一種創建交互式網頁應用的網頁開發技術。它使用Javascript語言與服務器進行異步交互，可以傳輸包括但不僅限于XML格式的數據。其最大的特點在于，當服務器響應時，無需刷新整個瀏覽器頁面，而是可以實現局部刷新。因此，用戶在使用過程中幾乎不會感覺到頁面加載或跳轉，從而提供了更加流暢的用戶體驗。
與傳統的同步交互相比，AJAX的異步交互方式允許客戶端在發出一個請求后，無需等待服務器響應結束，就可以發出第二個請求。這大大提升了網頁的響應速度和交互性。
在實際應用中，AJAX常用于實現搜索自動完成、動態數據更新、實時數據監控等功能。例如，在搜索引擎中輸入關鍵字時，AJAX技術可以實時顯示包含這些關鍵字的搜索結果，而無需用戶等待整個頁面刷新。
總的來說，AJAX是一種非常有效的網頁開發技術，它通過異步交互和局部刷新的方式，極大地提升了網頁的交互性和用戶體驗。但同時，也需要開發者注意其可能帶來的問題，如瀏覽器的兼容性問題、安全性問題等。
?二.原生創建Ajax
創建步驟
- 創建Ajax對象
- 連接到服務器
- 發送請求
- 接收返回值
?
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title>
</head>
<body><input type="button" id="but1" value="讀取信息" onclick="myFunction()"><script type="text/javascript">function myFunction() {var oAjax;//第一步創建Ajax對象oAjax = new XMLHttpRequest();//第二部：連接到服務器oAjax.open("GET", "Hello.txt", true);//第三步：發送請求oAjax.send();//第四步：接收返回值//onreadystatechage指頁面與服務器交互時會觸發的事件oAjax.onreadystatechange = function() {//oAjax.readyState：0-->請求初始化 1-->與服務器連接已建立 2-->請求已接收 3-->請求處理中 4-->請求已完成且響應已就緒//oAjax.status：404 未找到頁面 200 響應完成if (oAjax.readyState == 4 && oAjax.status == 200) {//oAjax.responseText用于讀取數據window.alert("請求成功\n數據：" + oAjax.responseText);} else {window.alert("請求失敗:\noAjax.status" + "\noAjax.readyState=>" + oAjax.readyState);}}}</script>
</body>
</html>
?
?三,使用Jquery處理Ajax
