關(guān)于ajax異步訪問數(shù)據(jù)的問題
在js中,處理數(shù)據(jù)固然很快,sososo就能完成所有的數(shù)據(jù)處理,我們似乎不需要使用異步傳輸數(shù)據(jù)
跨洋數(shù)據(jù)傳輸就出現(xiàn)了問題,一來2s過去了一回2s過去了,這對(duì)于訪問者來說,這就是卡
再者 我輸入了密碼 提示密碼錯(cuò)誤 于是要重新輸入,返回了一個(gè)網(wǎng)頁(yè) 這時(shí)候輸入的數(shù)據(jù)就會(huì)被清空,非常讓人抓狂。
為了解決這個(gè)問題ajax孕育而生
Ajax全名Asynchronous JavaScript and XML 名為異步的JavaScript和XML
Ajax使用方式非常簡(jiǎn)單
1.創(chuàng)建實(shí)例 xhttp = new XMLHttpRequest( )
2.發(fā)送文件 Xhttp.open("GET","地址","true/false")
3.定義在發(fā)送文件后所獲取的數(shù)據(jù)
xhttp.onreadystatechange = function(){}
在完全傳輸完成的時(shí)候
xhttp.readyState就會(huì)等于4
xhttp.status就會(huì)等于200
這個(gè)時(shí)候就能在
xhttp.responseText中獲取到數(shù)據(jù)
4.處理數(shù)據(jù)
xhttp.responseText獲得的數(shù)據(jù)為字符串
要將其變?yōu)樽值鋵?duì)象
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調(diào)用內(nèi)涵段子</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){
$("h1").html(JSON.parse(xhttp.responseText).result[0].text);
}
else{
}
}
$("button").click(function(){
xhttp.open("GET",https,true);
xhttp.send();
})
});
</script>
</head>
<button>點(diǎn)擊獲取</button>
<h1></h1>
<body>
</body>
</html>
到此這篇關(guān)于ajax異步訪問數(shù)據(jù)的文章就介紹到這了,更多相關(guān)ajax異步訪問數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
AJAX請(qǐng)求隊(duì)列實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了AJAX請(qǐng)求隊(duì)列的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11
基于fileUpload文件上傳帶進(jìn)度條效果的實(shí)例(必看)
下面小編就為大家?guī)硪黄趂ileUpload文件上傳帶進(jìn)度條效果的實(shí)例(必看)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
Ajax 通過城市名獲取數(shù)據(jù)(全國(guó)天氣預(yù)報(bào)API)
本文給大家分享全國(guó)天氣預(yù)報(bào)API Ajax 通過城市名獲取數(shù)據(jù),通過html和js兩部分代碼實(shí)現(xiàn)天氣預(yù)報(bào)效果,輸入城市就會(huì)出現(xiàn)天氣情況,效果非常棒,感興趣的朋友可以參考下2016-11-11
分享Ajax創(chuàng)建簡(jiǎn)單實(shí)例代碼
這篇文章主要為大家分享了Ajax創(chuàng)建簡(jiǎn)單實(shí)例代碼,學(xué)習(xí)Ajax如何創(chuàng)建簡(jiǎn)單實(shí)例,感興趣的小伙伴們可以參考一下2015-12-12
AJAX跨域請(qǐng)求數(shù)據(jù)的四種方法(實(shí)例講解)
下面小編就為大家?guī)硪黄狝JAX跨域請(qǐng)求數(shù)據(jù)的四種方法(實(shí)例講解)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
菜鳥蔡之Ajax復(fù)習(xí)第二篇(JQuery中的load()方法實(shí)現(xiàn)Ajax功能)
在上一篇博客中寫到的是在傳統(tǒng)的Javascript中使用XMLHttpRequest對(duì)象異步加載數(shù)據(jù)的,唉,童鞋.......看到那些代碼是不是有點(diǎn)頭疼啊!呵呵......2012-11-11
簡(jiǎn)述Ajax的優(yōu)點(diǎn)與缺點(diǎn)
這篇文章主要介紹了Ajax的優(yōu)點(diǎn)與缺點(diǎn)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11

