是否可以在加载时发送 AJAX 请求？

Question

您好，我有两个依赖选择框，第二个是在 onchange 事件后流行的。

第一个加载了选定的值（selected=selected），我要问的是，可以在页面加载时发送请求，即当我有选定的选项时，只需发送请求。

Javascript

function getXMLHTTP() {
        var xmlhttp=false;  
        try{
            xmlhttp=new XMLHttpRequest();
        }
        catch(e)    {       
            try{            
                xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e){
                try{
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch(e1){
                    xmlhttp=false;
                }
            }
        }

        return xmlhttp;
    }

    function getSubCat(catId,incat) {   
        var strURL="../Includes/subcatAds.php?SubCat="+catId+"&incat="+incat;
        var req = getXMLHTTP();

        if (req) {

            req.onreadystatechange = function() {
                if (req.readyState == 4) {
                    // only if "OK"
                    if (req.status == 200) {                        
                        document.getElementById('subcat').innerHTML=req.responseText;                       
                    } else {
                        alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                    }
                }               
            }           
            req.open("GET", strURL, true);
            req.send(null);
        }       
    }

如果需要，将提供 PHP

Answer 1

您确实需要使用 jQuery 并将以上所有内容替换为：

function getSubCat(catId, incat)
  { 
    $('#subcat').load("../Includes/subcatAds.php?SubCat="+catId+"&incat="+incat);
  }


// Run on load:
$( function(){ 
               getSubCat(4, 5);
   });

它会做同样的事情。它被设置为在负载上运行，您不必担心跨浏览器兼容性。

您会发现自己一直在使用 jQuery 选择器，并且您的代码将非常轻量级。如果您将 jQuery 库链接到 Google 服务器，人们甚至不需要下载它。大多数人已经将其保存在缓存中。

Answer 2

您可以像这样使用 onload 事件：

window.onload = function(){
  var selectbox = document.getElementById('select box id');

  if (selectbox.value !== ''){
    // your code to send ajax requests...
  }
};

页面加载后代码立即运行。然后它检查指定选择框的值是否不为空，这意味着选择了某些内容；在这种情况下，您将执行 ajax 请求的代码。

Answer 3

由于您是在获得用户的任何输入之前执行此操作，因此您可以在 DOM 完成之前、页面完全加载之前立即调用服务器，然后等待 onload 事件发生，或者您得到通知 DOM 树已完成，然后您可以安全地更改任何 html 元素的值。

这样，您就不必让用户在开始请求之前等待浏览器完成加载，这将改善用户体验。