學習Ajax看著一篇就夠了
Ajax 引言
學習Ajax之前一定要回Json,不會的可以參考我的這篇文章↓
https://i.cnblogs.com/posts/edit;postId=13598088
- AJAX = Asynchronous JavaScript and XML(非同步的JavaScript和XML)
- AJAX是一種不需要重新載入整個網頁的情況下,能夠更新部分網頁的技術
- Ajax不是一種新的程式語言,而是一種用於建立更好更快以及互動性更強的Web應用程式的技術
在2005年,Google通過其Google Suggest使AJAX變得流行起來.
GoogleSuggest使用AJAX創造出動態性極強的web介面:當您在谷歌的搜尋框輸入關鍵字時,JavaScript會把這些字元傳送到伺服器,然後伺服器會返回一個搜尋建議列表.
學習Ajax之前一定要回Json,不會的可以參考我的這篇文章↓
https://i.cnblogs.com/posts/edit;postId=13598088
在2005年,Google通過其Google Suggest使AJAX變得流行起來.
GoogleSuggest使用AJAX創造出動態性極強的web介面:當您在谷歌的搜尋框輸入關鍵字時,JavaScript會把這些字元傳送到伺服器,然後伺服器會返回一個搜尋建議列表.
作用: 增強B/S體驗性
AJAX能幹啥?
註冊時,輸入應戶名自動監測使用者是否已經存在.
登入時,提示使用者名稱密碼錯誤
刪除資料行時,將行ID傳送到後臺,後臺資料庫中刪除,資料庫刪除成功後,在頁面DOM中將資料行也刪除
用頁面實現一個小栗子(偽Ajax)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
window.onload = function f(){ //載入的時候執行的函式
var myDate = new Date();
document.getElementById('currentTime').innerText = myDate; //展示時間
}
function loadPage() {
var targetURL = document.getElementById('url').value; //目標URl獲取值
console.log(targetURL); //列印下url看看對不對
document.getElementById('iframePosi').src = targetURL; //展示對應頁面
}
</script>
<div>
<p>輸入要載入的地址<span id="currentTime"></span></p>
<p>
<input type="text" id="url" value="https://www.Baidu.com/">
<input type="button" value="提交" onclick="loadPage()">
</p>
</div>
<div>
<h3>
載入頁面位置:
</h3>
<iframe style="width: 100%;height: 500px" id="iframePosi">
</iframe>
</div>
</body>
</html>
AJAX的原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
window.onload = function f(){ //載入的時候執行的函式
var myDate = new Date();
document.getElementById('currentTime').innerText = myDate; //展示時間
}
function loadPage() {
var targetURL = document.getElementById('url').value; //目標URl獲取值
console.log(targetURL); //列印下url看看對不對
document.getElementById('iframePosi').src = targetURL; //展示對應頁面
}
</script>
<div>
<p>輸入要載入的地址<span id="currentTime"></span></p>
<p>
<input type="text" id="url" value="https://www.Baidu.com/">
<input type="button" value="提交" onclick="loadPage()">
</p>
</div>
<div>
<h3>
載入頁面位置:
</h3>
<iframe style="width: 100%;height: 500px" id="iframePosi">
</iframe>
</div>
</body>
</html>上面是用頁面實現的,沒有用純JS實現Ajax,Ajax其本質是XMLHttpRequest(XHR)
Ajax的核心是(XHR).XHR為向伺服器傳送請求和解析伺服器響應提供了介面.能夠以非同步的方式從伺服器獲取新資料.
jQuery提供多個與Ajax有關的方法.
通過jQuery Ajax方法能夠使用HTTP get 和Http post從遠端伺服器上請求文字,HTML,XML或JSon-同時能夠把這些外部資料直接載入網頁的被選元素中.
jQuery不是生產者,而是大自然的搬運工
jQuery Ajax本質就是XMLHttpRequest,對他進行了封裝,方便呼叫!我們看下
使用jQuery
首先從官網下載.js檔案https://jquery.com/download/
兩種在客戶端和伺服器端進行請求-響應的常用方法是：GET 和 POST。
- GET - 從指定的資源請求資料
- POST - 向指定的資源提交要處理的資料
GET 基本上用於從伺服器獲得（取回）資料。註釋：GET 方法可能返回快取資料。
POST 也可用於從伺服器獲取資料。不過，POST 方法不會快取資料，並且常用於連同請求一起傳送資料。
如需學習更多有關 GET 和 POST 以及兩方法差異的知識，請閱讀我們的 HTTP 方法 - GET 對比 POST。
jQuery - AJAX get() 和 post() 方法
jQuery get() 和 post() 方法用於通過 HTTP GET 或 POST 請求從伺服器請求資料。
HTTP 請求：GET vs. POST
jQuery $.get() 方法
$.get() 方法通過 HTTP GET 請求從伺服器上請求資料。
語法：
$.get(URL,callback);
必需的 URL 引數規定您希望請求的 URL。
可選的 callback 引數是請求成功後所執行的函式名。
下面的例子使用 $.get() 方法從伺服器上的一個檔案中取回資料：
例項
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("資料: " + data + "\n狀態: " + status); }); });$.get() 的第一個引數是我們希望請求的 URL（"demo_test.php"）。
第二個引數是回撥函式。第一個回撥引數存有被請求頁面的內容，第二個回撥引數存有請求的狀態。
提示： 這個 PHP 檔案 ("demo_test.php") 類似這樣：
jQuery $.post() 方法
$.post() 方法通過 HTTP POST 請求向伺服器提交資料。
語法:
$.post(URL,data,callback);
必需的 URL 引數規定您希望請求的 URL。
可選的 data 引數規定連同請求傳送的資料。
可選的 callback 引數是請求成功後所執行的函式名。
下面的例子使用 $.post() 連同請求一起傳送資料：
例項
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php", {
name:"菜鳥教程",
url:"http://www.runoob.com" },
function(data,status){
alert("資料: \n" + data + "\n狀態: " + status);
});
});$.post() 的第一個引數是我們希望請求的 URL ("demo_test_post.php")。
然後我們連同請求（name 和 url）一起傳送資料。
"demo_test_post.php" 中的 PHP 指令碼讀取這些引數，對它們進行處理，然後返回結果。
第三個引數是回撥函式。第一個回撥引數存有被請求頁面的內容，而第二個引數存有請求的狀態。
來自為知筆記(Wiz)