ajaxによるデータへの非同期アクセスに関する質問
jsの場合、データの処理は確かに速いし、データの処理はすべてsososoがやってくれるので、非同期データ転送を使う必要はなさそうです
海を越えたデータ転送には問題があり、一方が2秒後に来て、一方が2秒後に行く、これは訪問者にとって立ち往生です。
さらに、パスワードを入力したら間違っていたので、入力し直したら、Webページに戻り、入力したデータがクリアされてしまい、とても悔しい思いをしました。
この問題を解決するために、ajaxが誕生した
Ajaxフルネーム 非同期JavaScriptとXMLという名前
Ajaxは非常にシンプルに使用することができます
1. インスタンスの作成 xhttp = new XMLHttpRequest( )
2. ファイルを送信する Xhttp.open("GET","address","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 call to inner-content</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>Click to get</button>
<h1></h1>
<body>
</body>
</html>
今回はデータへのajax非同期アクセスについて紹介しましたが、より関連するデータへのajax非同期アクセスの内容はHouse of Scriptsの過去の記事を検索するか、以下の関連記事を引き続き閲覧してくださいHouse of Scriptsを今後ともよろしくお願いします
関連
-
ajax インターフェース文書の URL パスの省略の例
-
ajax+phpを使った商品価格計算
-
プロミスとパラメータを使用してajaxリクエストをカプセル化解除する方法
-
ajax post download flaskのファイルストリームと中国語のファイル名の問題
-
AJAXを使ったユーザーログイン認証の手順（正規表現を含む）
-
Ajaxによる3段構えの連動効果を実現
-
Ajaxログインケース
-
react axiosの1つまたは複数のドメインへのクロスドメインアクセス問題
-
XMLHttpRequestオブジェクトを使わずにAjaxの効果を実現する方法まとめ
-
Ajaxの動作原理と解析例のメリット・デメリット
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン