ajax で読み込みを途中で止めたり、途中から開始したい。
そういうことはできるのでしょうか ?
サンプルになるページは見つかりませんでした。
ソースもしくは、参考になるページを知りませんか ?
よろしくお願いします !
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <script src="./lib/jquery-1.8.2.js"></script>
<script src="./lib/underscore.js"></script>
<script src="./lib/backbone.js"></script> -->
<script src="https://code.jquery.com/jquery-2.2.2.js" integrity="sha256-4/zUCqiq0kqxhZIyp4G0Gk+AOtCJsY1TA00k5ClsZYE=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscor …
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone. …
</head>
<body>
<script>
const PostModel = Backbone.Model.extend({
url: 'http://jsonplaceholder.typicode.com/posts/1'
})
new PostModel()
.fetch() // 取得
.done(function(post) {
console.log(JSON.stringify(post));
})
//.done((post) => console.log(JSON.stringify(post)));
/*
function () {}
アロー関数 function を取る。中括弧をアローにする。アローの先に中身を書く
() => 中身。
*/
</script>
</body>
</html>
No.1ベストアンサー
- 回答日時:
こんなイメージでしょうか。
ただし、非同期の通信を止めるのではなく、
タイマーで再帰しているのを止めているだけですが。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<button onclick="accessJson()">スタート</button>
<button onclick="stopJson()">ストップ</button>
<div id="console">ここに結果</div>
<script>
/**
* スタートをクリック:jsonplaceholderにアクセス
* accessJson()はタイマーで再帰し続ける
* ストップをクリック:タイマーを止める
* またスタートをクリック:accessJsonを再開
*/
const url = 'http://jsonplaceholder.typicode.com/posts/';
// urlの前半
const csl = document.getElementById('console');
// 結果を表示するdiv
let flag = 1, // 1ずつ足す
timer; // タイマーをセット
function makeTag(tag,name,text){ // name:textとなるtagを返す
return Object.assign(document.createElement(tag),{textContent: name + ' : ' + text});
}
function accessJson() { // jsonplaceholderにアクセス 再帰する
if(flag === 100){ // 100になったら終了
csl.appendChild(makeTag('p','おわり',''));
return
}
fetch(url + flag)
.then((response) => response.json())
.then((json) => {
let tags = [];
tags.push(makeTag('p','id',json.id));
tags.push(makeTag('p','title',json.title));
tags.push(makeTag('p','body',json.body));
tags.push(makeTag('p','userId',json.userId));
tags.push(document.createElement('hr'));
tags.forEach((v)=>{
csl.appendChild(v);
})
flag++;
})
.then(timer = setTimeout(accessJson,1000));
// 1秒ごとに再帰
};
function stopJson() { // accessJson()をストップする
clearTimeout(timer);
};
</script>
</body>
</html>
No.2
- 回答日時:
こんにちは
>読み込みを途中で止めたり、途中から開始したい。
可能ではありますが、おそらくお求めの内容ではないだろうとと思います。
・中断
https://developer.mozilla.org/ja/docs/Web/API/XM …
・範囲リクエスト
https://developer.mozilla.org/ja/docs/Web/HTTP/R …
一般的に、受信側で制御できるのはリクエストのクエリやdataのみで、送信側がこれに対応しているか否かに依存することになると考えられます。
例えば、検索サイトなどでは、ページ(=一定の項目数)ごとにリクエストが可能になっている場合がほとんどです。
情報量が多い場合には、送信側が何らかの分割方法を用意していることが一般的ではないかと思います。
このあたりの仕様(=実際に使用する対象によって異なる)がわかれば、かつ、送信側が対応しているのであれば、ご質問の内容は実現可能ではないかと推測します。
ちなみに、ご例示のサイト(=ダミーデータのサイトか?)の場合であれば、IDが項目番号になっているようですので、必要な項目だけをリクエストすれば、それだけを受け取ることは可能なようです。
(範囲指定が可能かどうかは、詳しく調べていないのでわかりません)
あるいは、全体の情報量が少ないようであれば、一括受信して、必要な範囲だけを使用するなどといった対応も考えられるところでしょう。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript プラグイン無しでContactform7にdatepickerを実装 3 2022/10/25 02:18
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
getElementsByNameで要素が取得...
-
ボタンのID名を取得するには?
-
function の return 値を表示し...
-
「オブジェクトを指定してくだ...
-
月ごとに背景色を変える
-
html javascript 作った配列を...
-
SCRIPT5007: 未定義または NULL...
-
フォーカス移動抑止について
-
IEの拡大・縮小機能をWebページ...
-
bodyタグのfocus
-
<a href="#" …>の意味を教えて...
-
<div>のタッチ状態を維持したま...
-
別ファイルのfunctionの読み込み方
-
プラグイン無しでContactform7...
-
SQLのWHEREで全てを質問する方法
-
ウインドウを縮小しても文字を...
-
プルダウンメニューを別ファイ...
-
Dreamweaver で 外部JSを読み込...
-
「関数が定義されていない」と...
-
window.openで同画面遷移しない
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
getElementsByNameで要素が取得...
-
JavaScriptでiframeの内容を「...
-
function の return 値を表示し...
-
SCRIPT5007: 未定義または NULL...
-
ボタンのID名を取得するには?
-
JavaScript でキーを送る
-
フォーカス移動抑止について
-
乱数を一定時間毎に表示させた...
-
ボタンを押してテキストエリア...
-
bodyタグのfocus
-
JavaScriptでのEnterキーとAlt+...
-
自動ジャンプでフォームデータ...
-
一定時間画像を表示させ、その...
-
リンク移動先のURLを取得
-
idHOGEで取得したinnerText(数...
-
「オブジェクトを指定してくだ...
-
html javascript 作った配列を...
-
キーを押している間の時間を計...
-
チェックボックスの選択パター...
-
Operaでのobjectタブの高さ変更
おすすめ情報