Javascript xmlhttprequest特殊发送_Javascript_Browser_Xmlhttprequest

Javascript xmlhttprequest特殊发送

javascript browser

Javascript xmlhttprequest特殊发送,javascript,browser,xmlhttprequest,Javascript,Browser,Xmlhttprequest,我想寻求您对xmlhttprequest的帮助。我想执行xmlhttp请求发送，以便仅在接收到上一个http响应时才从服务器重复获取图片在服务器端，我创建了标记为xmlhttp status=900的http响应。因此，我希望在收到前一个请求的响应后立即发送该请求，否则，程序应等待其到达例如：当我按下浏览器中的某个按钮时，它会触发对服务器的第一个图片（jpeg）请求，然后等待服务器的响应。在获得状态标记为900的Http响应后，xmlhttp将解码响应并在（图像）上显示图片在下面的代码中

我想寻求您对xmlhttprequest的帮助。我想执行xmlhttp请求发送，以便仅在接收到上一个http响应时才从服务器重复获取图片

在服务器端，我创建了标记为xmlhttp status=900的http响应。因此，我希望在收到前一个请求的响应后立即发送该请求，否则，程序应等待其到达

例如：

当我按下浏览器中的某个按钮时，它会触发对服务器的第一个图片（jpeg）请求，然后等待服务器的响应。在获得状态标记为900的Http响应后，xmlhttp将解码响应并在（图像）上显示图片

在下面的代码中，通过使用wireshark捕获数据包，我认为我成功地获得了正确的数据包流。但是，该图片不能在DIV中显示

有人能帮我吗？非常感谢

    enter code here
      function init(url)
      {
      var xmlHTTP = new XMLHttpRequest();    
      xmlHTTP.open('GET',url,true);
      xmlHTTP.send();
      xmlHTTP.responseType = 'arraybuffer';
       xmlHTTP.onload = function(e)
      {
        var arr = new Uint8Array(this.response);
       var raw = String.fromCharCode.apply(null,arr);
       var b64=btoa(raw);
       var dataURL="data:image/jpeg;base64,"+b64;
       document.getElementById("image").src = dataURL;
       };
      xmlHTTP.onreadystatechange=function(){
      buff(xmlHTTP.status);

       }
       }
      buff(status){
      if (status=900){
        sleep(1000);
      init('/images/photos/badger.jpg');
       }
         }
        function sleep(milliseconds) {
              var start = new Date().getTime();
              for (var i = 0; i < 1e7; i++) {
                if ((new Date().getTime() - start) > milliseconds){
                    break;
                }
              }
          }            
        </script>
         </head>
         <body>
         <div id="image"><h2>picture display here</h2></div>
          <button type="button" onclick=buff(900)>Get Picture</button>

在此处输入代码
函数初始化（url）
{
var xmlHTTP=new XMLHttpRequest（）；
open（'GET'，url，true）；
xmlHTTP.send（）；
xmlHTTP.responseType='arraybuffer'；
xmlHTTP.onload=函数（e）
{
var arr=新的Uint8Array（this.response）；
var raw=String.fromCharCode.apply（null，arr）；
var b64=btoa（原始）；
var dataURL=“数据：图像/jpeg；base64，”+b64；
document.getElementById（“image”）.src=dataURL；
};
xmlHTTP.onreadystatechange=函数（）{
buff（xmlHTTP.status）；
}
}
buff（状态）{
如果（状态=900）{
睡眠（1000）；
init（'/images/photos/badger.jpg'）；
}
}
函数睡眠（毫秒）{
var start=new Date（）.getTime（）；
对于（变量i=0；i<1e7；i++）{
如果（（新日期（）.getTime（）-start）>毫秒）{
打破
}
}
}            
图片显示在这里
了解情况

在此处输入代码

您的代码有几个问题

标记

标记的问题是，您正在使用

div

标记来显示图像。

div

标记上不支持

src

属性。您应该像这样使用

img

标记：

....
<img id="image" />
<button type="button" onclick="buff(900)">Get Picture</button>

这样，浏览器将再次请求图像，而不会使用allready加载和缓存的图像。有关更多信息，请参阅。（实际上这个问题和你的差不多……）

睡眠功能

您的sleep函数将使用资源，因为它是一个在指定时间内持续运行的循环。当它运行时，它将添加数字并进行完全不必要的比较。请使用类似javascript内置的

setTimeout（）

：

更新：工作示例

我在代码片段中设置了一个工作示例。它从同一个url加载图像，但lorempixel会在每次请求时随机提供这些图像

我重新组织了图像加载。实际上还有一个问题。您可以使用

onreadystatechange

启动下一个图像加载。这将针对图像的每次更改触发，而不仅仅是在加载图像时。因此，我从

onload（）

开始下一个

buff（）

，如下所示：

var xmlHTTP = new XMLHttpRequest();    
xmlHTTP.open('GET',url,true);

xmlHTTP.responseType = 'arraybuffer';
xmlHTTP.onload = function(e) {
    var arr = new Uint8Array(this.response);
    var raw = String.fromCharCode.apply(null,arr);
    var b64 = btoa(raw);
    var dataURL = "data:image/jpeg;base64," + b64;
    document.getElementById("image").src = dataURL;
    buff(this.status);
};
xmlHTTP.send();

为了方便起见，我添加了一个停止加载新图像的按钮。对于您的示例，您只需更改imageUrl和imageStatus变量

var-imageUrl=”http://lorempixel.com/400/200/例如，//设置为“/images/photos/badger.jpg”
imageStatus=200，//例如设置为900
停止=真；
函数stopLoading（）{
停止=真；
}
函数loadNextImage（url）{
如果（！stopped）{//仅在加载未停止时加载图像
var xmlHTTP=new XMLHttpRequest（）；
open（'GET'，url，true）；
xmlHTTP.responseType='arraybuffer'；
xmlHTTP.onload=函数（e）{
var arr=新的Uint8Array（this.response）；
var raw=String.fromCharCode.apply（null，arr）；
var b64=btoa（原始）；
var dataURL=“数据：图像/jpeg；base64，”+b64；
document.getElementById（“image”）.src=dataURL；
buff（this.status）；//在加载当前图像时设置下一个计时器。
};
xmlHTTP.send（）；
}
}
功能buff（状态）{
如果（状态===图像状态）{
setTimeout（函数（）{
loadNextImage（imageUrl+“？”+新日期（）.getTime（））；
}, 1000);
}否则{
//状态与预期状态不匹配。
//因此，停止加载更多图像
停止加载（）；
}
}
函数init（）{
停止=错误；
loadNextImage（imageUrl）；
}
document.getElementById（“开始”）.onclick=function（）{
init（imageUrl）；
};
document.getElementById（“stop”）.onclick=stopLoading

拍照
没有更多图片了
900？你是认真的吗？睡觉是个坏主意。可能是错的。我生成了状态代码900，用于非正常使用。它确实返回900，xmlhttprequest可以获得它。是 啊睡眠很奇怪。当我从wireshark观察时，我得到了正确的数据包。但不能显示任何图片。谢谢你的回复。伙计，首先，谢谢你的回复。我特别需要900号身份证。我尝试过settimeout函数，但我发现它出错了。开始时，我得到了精确的1秒延时，当它发送第二个请求等时，延时不起作用。它一直在0.1秒内发送请求..你能在你试图使用的地方发布代码吗
setTimeout

？我只是跟着你的buff（status）{if（status==900）{setTimeout（function（）{init（'/images/photos/badger.jpg'）；}，1000）；}刚刚更新了我的答案

buff(status) {
  if(status === 900) {
    setTimeout(funciton(){
      init('/images/photos/badger.jpg');
    }, 1000);
  }
}

var xmlHTTP = new XMLHttpRequest();    
xmlHTTP.open('GET',url,true);

xmlHTTP.responseType = 'arraybuffer';
xmlHTTP.onload = function(e) {
    var arr = new Uint8Array(this.response);
    var raw = String.fromCharCode.apply(null,arr);
    var b64 = btoa(raw);
    var dataURL = "data:image/jpeg;base64," + b64;
    document.getElementById("image").src = dataURL;
    buff(this.status);
};
xmlHTTP.send();