2

Reddit API を使用して Reddit の画像を表示する Web サイトを構築しています。JSON 経由でデータを取得し、それを使用してページを作成し、画像のソースとして提供された URL を使用します。

私が取得した URL の中には、画像に直接アクセスするのではなく、画像ホスティング サイト (imgur.com など) にアクセスするものがあります。通常、URL の末尾に「.jpg」を追加すると、正しい画像に移動します。

ということで、URL＋「.jpg」が存在するか確認してから使いたいと思います。

URLをチェックする機能を構築しようとしました。

function checkUrl(url){
    var request = new XMLHttpRequest;
    request.open('GET', url, true);
    request.send();
    request.onreadystatechange = function(){
        if(request.readyState==4){
            console.log(request.readyState);
            return true;
        }else{
            return false;
        }
    }
};

//Then I use the function to check and append the data to the page
var url = url+'.jpg';
if(checkUrl(url)){
    //work with the data
}else{
    //do nothing
}

ページには何も起こりませんが、まだ readyState がコンソールにログインしているため、checkUrl() 関数は true を返しているようです。

私が間違っていることは何ですか？私はAjax全体にかなり慣れていないので、助けていただければ幸いです。

ありがとうございました

4

5 に答える 5

3

あなたの問題は AJAX の誤解だと思います。AJAX は基本的に非同期であり、それがあなたが説明している動作の理由です。
以下を使用して、URL が有効かどうかの単純な true/false 表示を同期的に取得しました。

function isValidURL(url) {
    var encodedURL = encodeURIComponent(url);
    var isValid = false;

    $.ajax({
      url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22" + encodedURL + "%22&format=json",
      type: "get",
      async: false,
      dataType: "json",
      success: function(data) {
        isValid = data.query.results != null;
      },
      error: function(){
        isValid = false;
      }
    });

    return isValid;
}

使い方は簡単です。

var isValid = isValidURL("http://www.wix.com");
alert(isValid ? "Valid URL!!!" : "Damn...");

お役に立てれば

于 2014-05-07T21:16:08.287 に答える
3

コードが機能しない理由:

AJAX 要求は非同期であり、関数が AJAX 要求を送信するif(checkUrl(url)){と null (false) を返し、AJAX 呼び出しが完了する前にすぐに を返します。checkUrl()

変化する

request.open('GET', url, true);

に

request.open('GET', url, false);

また、現在は非非同期リクエストであるため、request.send()の後に移動します。request.onreadystatechange()

request.onreadystatechange = function(){
    if(request.readyState==4){
        console.log(request.readyState);
        return true;
    }else{
        return false;
    }
}
request.send();

または、単にチェック ロジックを onreadystatechange 関数に配置することもできます。

request.onreadystatechange = function(){

    var url = url+'.jpg';
    if(request.readyState==4){
        //work with the data
    }else{
        //do nothing
    }
}
于 2013-02-08T02:18:29.113 に答える
3

あなたの問題は、これがリクエストの結果が何であったかに関係なくrequest.readyState == 4、リクエストが完了したことを意味することです。そのため、リクエストした URL が「404 not found」を返したとしても、XHR 自体が readyState 4 に解決されていることがわかります。

あなたがしようとしていることに対処するには、応答のステータス コードを確認することをお勧めします。たとえば、コードを使用して：

if(request.status==200){
   return true;
}
于 2013-02-08T01:10:52.667 に答える
2

のreturn値はcheckUrlrequest.reonreadystatechangeの値ではありません。returnこれを試して：

function checkUrl(url){
    var request = new XMLHttpRequest;
    request.open('GET', url, true);
    request.send();
    request.onreadystatechange = function(){
        if(request.readyState==4){
            console.log(request.readyState);
            // perform your data manipulation here
            // don't separate it with the request
        }
    }
};
于 2013-02-08T01:15:38.710 に答える
1

Safari では、ActiveXObject以下に比べて正常に動作しXMLHttpRequestます。

function isThere(url)
{
    var req= new AJ(); // XMLHttpRequest object
    try {
        req.open("HEAD", url, false);
        req.send(null);
        //alert(req.status); //un-comment if need alert for status code

        return req.status== 200 ? true : false;
    }
    catch (er) {
        //alert ('ERROR:'); // un-comment if need alert for error
        return false;
    }
}

function AJAX()
{
    var obj;
    if (window.XMLHttpRequest) obj= new XMLHttpRequest();
    else if (window.ActiveXObject)
    {
        try
        {
            obj= new ActiveXObject('MSXML2.XMLHTTP.3.0');
        }
        catch(er)
        {
            try
            {
                obj= new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(er)
            {
                obj= false;
            }
        }
    }
    return obj;
}
于 2013-03-12T08:30:10.660 に答える