JQuery學習筆記（4）——ajax

時間 2019-12-05

標籤 jquery 學習筆記 ajax 欄目 JQuery 简体版

原文原文鏈接

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）html

原生

例子

點擊按鈕，訪問服務器上的ajax_info.txt文件，得到txt文件的內容，並修改顯示的文本jquery

<!DOCTYPE html>
<html>
<head>
<script>
    var xmlhttp;//xmlhttp對象
    function loadXMLDoc(url,cfunc){
        //不一樣的瀏覽器，或得xmlhttp對象所調用的方法不一樣
        if (window.XMLHttpRequest){
            // IE7+, Firefox, Chrome, Opera, Safari 
            xmlhttp=new XMLHttpRequest();
        }else{
            // IE6, IE5 
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        //回調函數
        xmlhttp.onreadystatechange=cfunc;
        xmlhttp.open("GET",url,true);
        xmlhttp.send();
    }
    function myFunction(){
        //訪問服務器上的/try/ajax/ajax_info.txt，並回調函數
        loadXMLDoc("/try/ajax/ajax_info.txt",function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
        });
    }
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改文本內容</h2></div>
<button type="button" onclick="myFunction()">修改內容</button>

</body>
</html>

參考連接菜鳥教程ajax

XMLHttpRequest對象

ajax的核心對象，是服務器和客戶端中間的橋樑，客戶端向服務器發送請求和客戶端得到服務器響應都是經過此對象的屬性和方法來進行。json

var xmlhttp;
//window.XMLHttpRequest不爲空，就是true
if (window.XMLHttpRequest){
    // IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest();
}else{// IE6, IE5 
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

發送請求

open(method,url,async) 鏈接服務器
- method：請求的類型；GET 或 POST
- url：文件在服務器上的位置
- async：true（異步）或 false（同步），推薦使用異步
send(string) 發送請求
若是請求方式爲get，send中的參數能夠省略不寫

onreadystatechange事件

xmlhttp對象有兩個屬性readyState和status瀏覽器

當readyState發生改變，就會觸發onreadystatechange事件服務器

readyState有如下幾種狀態異步

0: 請求未初始化
1: 服務器鏈接已創建
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒

status有兩種狀態async

200: "OK"
404: 未找到頁面

服務器響應

使用 XMLHttpRequest 對象的 responseText 或 responseXML屬性能夠得到來自服務器的響應數據函數

responseText 得到字符串形式的響應數據。
responseXML 得到 XML 形式的響應數據。

JQuery實現ajax

1. $.ajax(url,[settings])

最基本的ajax方法post

2. `load(url,[data],[callback])`

從服務器載入數據而且將返回的HTML代碼並插入至匹配的元素中。
data是傳遞給服務器的數據參數 ,能夠是一個普通的對象或字符串
提供了一個回調函數complete(responseText, textStatus, XMLHttpRequest)，當HTML代碼並插入至匹配的元素中就會被調用

$('#mydiv').load("test.html");

//這裏的first.html是當前同級目錄的一個html文件
$('#mydiv').load('first.html',function (data,status) {
    console.log(data);
    console.log(status);//狀態，成功爲success,失敗則爲error
});

3. $.get(url,[data],[fn],[type])

使用一個HTTP GET請求從服務器加載數據

//這裏實現的效果與上面的load一致
$.get("first.html",function(data){
    $('#mydiv').html("test.html");
});

4. $.post(url,[data],[fn],[type])

使用一個HTTP POST請求從服務器加載數據，與上面get相似

5. $.getJSON(url,[data],[fn])

得到json數據並自動解析自動解析

$.getJSON("test.js", function(json){
    console.log(json.users[3].name);
});

6. $.getScript(url,[callback])

使用一個HTTP GET請求從服務器加載並執行一個 JavaScript 文件

相關標籤/搜索