如何在XMLHttpRequest的open和send完成后执行get_lat_lon()函数

你遇到的核心问题是AJAX请求是异步执行的——xmlhttp.send()只是发起请求，浏览器会在后台处理这个请求，不会阻塞后续代码的执行，所以你现在直接在send()之后调用get_lat_lon()，它会在请求还没完成的时候就跑起来，自然达不到预期效果。

正确的做法是把get_lat_lon()移到onreadystatechange的成功回调里，也就是当请求完全完成（readyState == 4）且响应状态正常（status == 200）的时候再调用它，这样就能保证get_lat_lon()是在请求返回后才执行的。

修改后的代码如下：

function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        let xmlhttp; // 建议用let替代隐式全局变量，避免作用域问题
        if (window.XMLHttpRequest) {
            // 适配IE7+、Firefox、Chrome等现代浏览器
            xmlhttp = new XMLHttpRequest();
        } else {
            // 适配IE6、IE5旧版本
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                // 先更新页面内容，确保依赖的数据已就绪
                document.getElementById("txtHint").innerHTML = this.responseText;
                // 请求成功完成后，再调用目标函数
                get_lat_lon();
            }
        };
        xmlhttp.open("GET","reseller.php?ostan="+str,true);
        xmlhttp.send();
        // 移除原来这里的get_lat_lon()调用
    }
}

额外优化建议： #

• 用let声明xmlhttp变量，避免隐式全局变量带来的潜在bug，让作用域更清晰。
• 如果想让代码更现代易读，可以考虑使用fetch API替代传统的XMLHttpRequest，它基于Promise，写法更简洁直观：

async function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    }
    try {
        // await会等待请求完成后再执行后续代码
        const response = await fetch(`reseller.php?ostan=${str}`);
        if (!response.ok) throw new Error('请求失败');
        const htmlContent = await response.text();
        document.getElementById("txtHint").innerHTML = htmlContent;
        // 请求完成后调用目标函数
        get_lat_lon();
    } catch (error) {
        console.error('请求出错：', error);
    }
}

这个异步函数的写法不需要手动处理readyState状态判断，await会自动等待请求完成，逻辑更清晰。

内容的提问来源于stack exchange，提问作者Alireza Sabahi