Javascript Ajax Call总是返回readyState = 1和status = 0错误

时间：2015-06-09 01:46:29

标签： javascript html ajax asp-classic

我正在设计一个利用地理编码器并将地址，纬度和长度解析为变量的小项目，这些变量使用AJAX / ASP将值发送到数据库并插入值。

我的问题围绕着readyState和AJAX调用的状态，它总是分别返回1和0。我一直在浏览众多的论坛和例子，找到一个类似于我的，并尝试了许多不同的解决方案，但无济于事。如果有人能给我一些建议，我们将不胜感激。

这是我的界面代码，围绕'sendInfo（）'和'stateChange（）'函数的问题。

Geocoder_experimentAJAX.html 

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Geocoding service</title>
    <style type="text/css">
    a.normal:link {text-decoration:none;} 
    p.rightcol {padding-left:1400px}
    div.header {
        padding: 0.5em;
        color: blue;
        background-color: #D0F5A9;
        clear: left;
    }
    div.footer {
        padding: 0.5em;
        color: white;
        background-color: #31B404;
        clear: left;
    }
    html, body, #map-canvas {
        height: 100%;
        margin: 1px;
    }
    #panel {
        width: 350px;
        font-family: Arial, sans-serif;
        font-size: 13px;
        float: right;
        margin: 10px;
     }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
var geocoder;
var map;
var markers = [];
var drag = false;
var latLong;
var primeMarker;
var newlat
var newlon

//Creates geocoder and map.
function initialize() {
  geocoder = new google.maps.Geocoder();
  var mid = new google.maps.LatLng(45.4214, -75.6919);
  var mapOptions = {
    zoom: 12,
    center: mid
  }
  map  = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

//Geocodes address provided by user and displays Lat/Long and Full Address.
function codeAddress() {
    address = document.getElementById('address').value;
    geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        if (results.length > 1) {
            document.getElementById("Multi").innerHTML = "Multiple matches of that address, please select the best match from the list below.";
            removeOptions(document.getElementById("myList"));
            var opt = document.createElement("option");
            var select = document.getElementById("myList");
            opt.text = "Please Choose Address";
            opt.value = '';
            select.options[0] = new Option(opt.text,opt.value);
            for (var i = 0; i < results.length-1;i++) {
                opt.text = results[i].formatted_address;
                opt.value = results[i].formatted_address;
                select.options[select.options.length] = new Option(opt.text,opt.value);
            }
        }
        else {
            removeOptions(document.getElementById("myList"));
            document.getElementById("Multi").innerHTML = "";
            map.setCenter(results[0].geometry.location);
            map.setZoom(17);
            latLong = results[0].geometry.location;
            var addy = results[0].formatted_address;
            var addy2 = addy.toString();
            document.getElementById("fmtAddress").value=addy2;
            marker = addMarker(results[0].geometry.location, drag);
            document.getElementById("latbox").value = primeMarker.getPosition().lat();
            document.getElementById("lngbox").value = primeMarker.getPosition().lng();
        }
    }
    else if( document.getElementById('address').value == "" ||  document.getElementById('address').value == null) {
        alert('Address box is emtpy, cannot geocode a blank address. Please fill in your address.');
    }
    else {
        alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

// Add a marker to the map.
function addMarker(location, drag) {
    marker = new google.maps.Marker({
        position: location,
        map: map,
        draggable: drag
    });
    primeMarker = marker;
    markers.push(marker);
}

// Allows the user to edit the position of the marker.
function moveMarker() {
    if (markers.length == 0) {
        alert('There is no marker to edit. Please insert address and click "Geocode" to produce a marker.');
    }
    else {
    drag = true;
    clearMarkers();
    addMarker(latLong, drag);
    google.maps.event.addListener(primeMarker, 'dragend', function (event) {
        newlat = this.getPosition().lat();
        newlon = this.getPosition().lng();
        document.getElementById("latbox").value = newlat;
        document.getElementById("lngbox").value = newlon;
    });
    }
}

// Sets the map on all markers in the array.
function setAllMap(map) {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(map);
    }
}

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
    setAllMap(null);
}

// Remove all items in listbox
function removeOptions(selectbox) {
    var i;
    for(i=selectbox.options.length-1;i>=0;i--){
        selectbox.remove(i);
    }
}

// Gets full address from list and sends it to codeAddress()
function newAddress() {
    var x = document.getElementById("myList").selectedIndex;
    document.getElementById("address").value = document.getElementById("myList").options[x].text;
    codeAddress();
}

// Checks for and disables draggable marker, and checks that values to be sent to database aren't empty
function validateForm() {
    if (typeof primeMarker != 'undefined')
        primeMarker.setDraggable(false)
    var w = document.forms["myForm"]["address"].value;
    var x = document.forms["myForm"]["addy"].value;
    var y = document.forms["myForm"]["lat"].value;
    var z = document.forms["myForm"]["lng"].value;
    if (x==null || x=="" || w==null || w=="") {
        alert("The address text box is empty. You might not have entered an address and clicked the 'Geocode' button.");
        return false;
    }
    else if (y==null || y=="" || z==null || z=="") {
        alert("The latitude and/or longitude text box is empty. You might not have entered an address and clicked the 'Geocode' button.");
        return false;
    }
    else {
    sendInfo();
    }
}

function sendInfo(){
    if (window.XMLHttpRequest){
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else{
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.open("POST","UpdateAJAX.asp",true);
    xmlhttp.onreadystatechange=stateChanged(); 
    xmlhttp.send();
}

function stateChanged() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
    else {
        document.getElementById("txtHint").innerHTML="Error with ready state: " + xmlhttp.readyState + " and status: " + xmlhttp.status;
    }
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body onload="document.myForm.reset();">
    <div class="header">
        <img src="grey_logo.png" height="10%" width="10%"/>
        <h1 class="header" align="center" ><font  face="arial" color="black">Web-Based Geocoder Service</font></h1>
        <p class="rightcol"><a class="normal" href="https://geo.grey.ca/LaunchPage/"> Grey County GIS  </a></br>
        <a class="normal" href="http://swiftnetwork.ca/">SWIFT Network Survey</a>
        </p>
    </div>
    <div id="panel">
        <form name="myForm" action="" >
            <b>Enter Address To Be Geocoded:</b>
              <input id="address" type="textbox" size="50" name="address">
              <input type="button" value="Geocode" onclick="codeAddress()"></br></br>
              <p id="Multi"></p>
            <b>List of Address Options:</b>
              <select id="myList" style="width: 330px;" onchange="newAddress()"-->
              <option>List of possible addresses...</option>
              </select></br></br>
            <b>Full Formatted Address:</b>
              <p><input size="50" type="text" id="fmtAddress" name="addy" ></p>
            <p><b>Latitude:</b> <input size="20" type="text" id="latbox" name="lat" ></p>
            <p><b>Longitude:</b> <input size="20" type="text" id="lngbox" name="lng" ></p>
            <b>Edit Marker Location</b></br>
              <input type="button" value="Edit Marker" onclick="moveMarker()"></br></br>
            <b>Save New Location</b></br>
              <button type="button" onclick="return validateForm()">Save</button>
            <div id="txtHint">Response Shown Here...</div>
        </form>
    </div>
    <div id="map-canvas"></div>
    <div class="footer" align="center">COPYRIGHT 2015 GREY COUNTY GIS. ALL RIGHTS RESERVED</div>
  </body>
</html>

这是我调用以执行插入数据库的.ASP文件，它可以很好地工作，因为我能够在没有AJAX的情况下插入值，但我似乎无法使AJAX完全正常工作。 / p>

Update.asp 

<% 
    conn = Server.CreateObject("ADODB.Connection"); 
    conn.Open("DRIVER={Microsoft Access Driver (*.mdb)};DBQ=" +  Server.MapPath("Project.mdb"));

    var addy=Request.Form("addy");
    var lat=Request.Form("lat");
    var lng=Request.Form("lng");

    var sql="INSERT INTO Location_Info (Address,Latitude,Longitude)"
    sql= sql + " VALUES "
    sql= sql + "('" + addy + "',"
    sql= sql + "'" + lat + "',"
    sql= sql + "'" + lng + "')"

    rs = conn.Execute(sql);

    Response.Write("Your record has been placed into the database.");


    rs.Close();
    conn.Close();
%>

1 个答案:

答案 0 :(得分：2)

xmlhttp.onreadystatechange=stateChanged();

不会按照您的想法执行操作 - 它会调用stateChanged，将其评估为undefined，然后将undefined分配给.onreadystatechange，告诉xmlhttp 1}}它不必关心准备好的状态变化。

您希望将功能分配给.onreadystatechange，而不是结果：

xmlhttp.onreadystatechange=stateChanged;
相关问题
最新问题