詳しい人求む！

ajax で読み込みを途中で止めたり、途中から開始したい。

解決済

質問者：i-d-a-i
質問日時：2021/10/15 22:37
回答数：2件

ajax で読み込みを途中で止めたり、途中から開始したい。
そういうことはできるのでしょうか ?
サンプルになるページは見つかりませんでした。

ソースもしくは、参考になるページを知りませんか ?

よろしくお願いします !

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">


<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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： sukitaro
回答日時：2021/10/16 11:19

こんなイメージでしょうか。

ただし、非同期の通信を止めるのではなく、
タイマーで再帰しているのを止めているだけですが。

<!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>

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。

試してみます !

通報する

お礼日時：2021/10/16 17:10

参考程度に

No.2

回答者： fujillin
回答日時：2021/10/16 11:26

こんにちは

＞読み込みを途中で止めたり、途中から開始したい。
可能ではありますが、おそらくお求めの内容ではないだろうとと思います。
・中断
https://developer.mozilla.org/ja/docs/Web/API/XM …
・範囲リクエスト
https://developer.mozilla.org/ja/docs/Web/HTTP/R …

一般的に、受信側で制御できるのはリクエストのクエリやdataのみで、送信側がこれに対応しているか否かに依存することになると考えられます。
例えば、検索サイトなどでは、ページ（＝一定の項目数）ごとにリクエストが可能になっている場合がほとんどです。
情報量が多い場合には、送信側が何らかの分割方法を用意していることが一般的ではないかと思います。
このあたりの仕様（＝実際に使用する対象によって異なる）がわかれば、かつ、送信側が対応しているのであれば、ご質問の内容は実現可能ではないかと推測します。

ちなみに、ご例示のサイト（＝ダミーデータのサイトか？）の場合であれば、IDが項目番号になっているようですので、必要な項目だけをリクエストすれば、それだけを受け取ることは可能なようです。
（範囲指定が可能かどうかは、詳しく調べていないのでわかりません）
あるいは、全体の情報量が少ないようであれば、一括受信して、必要な範囲だけを使用するなどといった対応も考えられるところでしょう。