溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹如何實現ajax異步訪問數據，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
在js中，處理數據固然很快，sososo就能完成所有的數據處理，我們似乎不需要使用異步傳輸數據
跨洋數據傳輸就出現了問題，一來2s過去了一回2s過去了，這對于訪問者來說，這就是卡
再者 我輸入了密碼 提示密碼錯誤 于是要重新輸入，返回了一個網頁 這時候輸入的數據就會被清空，非常讓人抓狂。
為了解決這個問題ajax孕育而生
Ajax全名Asynchronous JavaScript and XML 名為異步的JavaScript和XML
Ajax使用方式非常簡單
1.創建實例 xhttp = new XMLHttpRequest( )
2.發送文件 Xhttp.open("GET","地址","true/false")
3.定義在發送文件后所獲取的數據
xhttp.onreadystatechange = function(){}在完全傳輸完成的時候
xhttp.readyState就會等于4
xhttp.status就會等于200
這個時候就能在
xhttp.responseText中獲取到數據
4.處理數據
xhttp.responseText獲得的數據為字符串
要將其變為字典對象
JSON.parse(xhttp.responseText)
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ajax調用內涵段子</title>
<style>
video{
background-color: aquamarine;
}
</style>
<script src="../jquery-3.6.0.js"></script>
<script>
$(document).ready(function () {
xhttp = new XMLHttpRequest();
https = "https://api.apiopen.top/getJoke?page=1&count=2&type=video";
xhttp.onreadystatechange = function(){
if(xhttp.readyState==4&&xhttp.status==200){
$("h2").html(JSON.parse(xhttp.responseText).result[0].text);
}
else{
}
}
$("button").click(function(){
xhttp.open("GET",https,true);
xhttp.send();
})
});
</script>
</head>
<button>點擊獲取</button>
<h2></h2>
<body>
</body>
</html>以上是“如何實現ajax異步訪問數據”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
