XMLHttpRequest возвращается в FF, но не в IE - PullRequest
0 голосов
/ 09 января 2012

Я пытаюсь сделать AJAX-вызов, чтобы получить данные обратно, чтобы открыть раскрывающийся список на основе выбора другого раскрывающегося списка.Мой код работает нормально в FF 9.0.1 (используется для firebug), но не работает в IE 7 (который является стандартом моей компании).Я пробовал несколько способов показать данные, и у меня сейчас нет времени, чтобы узнать, как это сделать в jQuery.Я уверен, что это будет головокружение, но как насчет IE вызывает эту проблему?

Вот мои кодовые страницы.Первая - это урезанная версия формы, вызывающая JavaScript.

<html>
<head>
<script language="JavaScript" src="/includes/Transaction_Update.js"></script>
<form id="submit" name="submit" action="Transaction_Process.php" method="post">
    <table align='left'>
      <tr>
        <td class='reporttd'>Vendor</td>
        <td>
          <select name='selVendorCode' id='selVendorCode' onChange="getServiceCode()">
            <option value='' selected='selected'></option>
            <?php echo $vendorOptionList; ?>
          </select>
        </td>
      </tr>
      <tr>
        <td class='reporttd'>Service Code</td>
        <td class='reporttd'>
          <select name='selServiceCode' id='selServiceCode'>
            <option value='' selected='selected'></option>
          </select>
        </td>
      </tr>
    </table>  
  </div>
</div>
</form>

Страница JavaScript

//setup xmlHttp request for Ajax call
var xmlHttp = createXmlHttpRequestObject();

function createXmlHttpRequestObject(){

    var xmlhttp;
    try{
        xmlHttp = new XMLHttpRequest();
    }
    catch(e)
    {
        var xmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
                                        "MSXML2.XMLHTTP.5.0",
                                        "MSXML2.XMLHTTP.4.0",
                                        "MSXML2.XMLHTTP.3.0",
                                        "MSXML2.XMLHTTP",
                                        "Microsoft.XMLHTTP");
        for (var i=0; i<xmlHttpVersions.length && !xmlHttp; i++){
            try{
                xmlHttp = new Activexobject(xmlHttpVersions[i]);
            }
            catch(e) {}
        }
    }

    if (!xmlHttp){
        alert("Error creating the XMLHttpRequest object.");
    }
    else{
        return xmlHttp;
    }
}
//Call page to get all service codes for a vendor.
function getServiceCode(){  
    if (xmlHttp){
        try{
            var vCode = document.getElementById("selVendorCode").value;
            var parms = "vCode=" + vCode;

            //Call Transaction_AJAX.php to pass back an XML.
            xmlHttp.open("GET", "Transaction_AJAX.php?" + parms, true);
            xmlHttp.onreadystatechange = handleRequestStateChange;
            xmlHttp.send(null);
        }
        catch(e){
            alert("Can't connect to server:\n" + e.toString());
        }
    }
}

//Checks state of the HTTP request call, and proceed if status is ready
function handleRequestStateChange(){
    if (xmlHttp.readyState == 4){
        if(xmlHttp.status == 200){
            try{
                handleServerResponse();
            }
            catch(e){
                alert("Error reading the response: " + e.toString());
            }
        }
        else{
            alert("There was a problem retrieving the data:\n" + xmlHttp.StatusText);
        }
    }
}

//Handles response from the server
function handleServerResponse(){
    var xmlResponse = xmlHttp.responseXML;
        if (!xmlResponse || !xmlResponse.documentElement){
        throw("Invalid XML Structure:\n" + xmlHttp.responseText);
    }

    var rootNodeName = xmlResponse.documentElement.nodeName;
    if(rootNodeName == "parsererror"){
        throw("Invalid XML Structure:\n" + xmlHttp.responseText);
    }

    xmlRoot = xmlResponse.documentElement;
    if(rootNodeName != "root" || !xmlRoot.firstChild){
        throw("Invalid XML structure:\n" + xmlHttp.responseText);
    }

    //Get response and load it into drop down
    responseText = xmlRoot;

    var sel = document.getElementById("selServiceCode");
    sel.options.length = 0;
    var opt = document.createElement("option");
    document.getElementById("selServiceCode").options.add(opt);
    for(var i=0; i < responseText.childElementCount; i++){
        var newOpt = new Option(responseText.childNodes[i].childNodes[1].textContent,responseText.childNodes[i].childNodes[0].textContent);
        sel.options[sel.options.length] = newOpt;
    }
}

Страница PHP, создающая файл XML

<?php
header('content-type:text/xml; charset=utf-8');

include("../includes/DBConn.php");

$vCode = $_GET['vCode'];

///Setup cursers and proc command
$curs = OCI_New_Cursor($c); 
$stmt = OCI_Parse($c,"begin schema.package.procedure(:var_code, :expected_cv); end;");

OCI_Bind_By_Name($stmt, ":var_code", $vCode);
OCI_Bind_By_Name($stmt,":expected_cv",&$curs,-1,OCI_B_CURSOR);

//execute statment and cursors
oci_execute($stmt); 
oci_execute($curs); 

//Create xml document
$dom = new DOMDocument('1.0', 'UTF-8');

$root = $dom->createElement('root');
$root = $dom->appendChild($root);

//loop through results of Proc
while (ocifetchinto($curs,&$vendor_cv )) { 

    //Add node for each row
    $occ = $dom->createElement("cell");
    $occ = $root->appendChild($occ);

    //Id Value
    $id = "value";
    $child = $dom->createElement($id);
    $child = $occ->appendChild($child);

    //Here is the actual value
    $id = $vendor_cv[1];
    $value = $dom->createTextNode($id);
    $value = $child->appendChild($value);

    //Id text
    $id = "text";
    $child = $dom->createElement($id);
    $child = $occ->appendChild($child);

    //Here is the actual value
    $id = $vendor_cv[1];
    $value = $dom->createTextNode($id);
    $value = $child->appendChild($value);
}
//Close xml tags and save.
$xmlString = $dom->saveXML();

//Echo XML back to Transaction_Update.js
echo $xmlString;
?>

Ответы [ 2 ]

2 голосов
/ 09 января 2012

Вот как вы это делаете в jQuery

1) Включите библиотеку jQuery в ваш головной раздел страницы. (здесь я ссылаюсь на Google CDN)

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>  
</head>

В вашем JavaScript

$("#stateDropDown").change(function(){
    var stateId=$("#stateDropDown").val();
    $.ajax({
      url: 'getcities.php?stateid='+stateId,
      success: function(data) {
       $("cityDropDown").html(data);       
      }
    });
});

Предполагается, что у вас есть элемент выбора HTML с идентификатором "stateDropDown" для штатов и еще один с идентификатором "cityDropDown" для городов.

Приведенный выше код сделает следующее:

1) При изменении значения раскрывающегося состояния выполняется внутренний код.

2) Перечитать значение выбранного элемента и сохранить его в переменной с именем stateId.

3) Используя jjuery-метод ajax, он вызывает страницу getcities.php с ключом строки запроса с именем stateid

4) когда мы получим ответ от вызова ajax, поток управления будет в части, называемой обработчиком "success". там мы получаем ответ в переменной с именем data.

5) установка полученного ответа (данных) в качестве внутреннего html-кода выпадающего списка города.

Предполагая, что страница getcities.php вернет какой-то вывод, подобный этому

<option value='1'>Ann Arbor</option>
<option value='2'>Dexter</option>
<option value='3'>Novi</option>

jQuery позаботится о ваших проблемах с несколькими браузерами. Да, это хорошо проверено, и все используют его.

http://www.jquery.com

0 голосов
/ 09 января 2012

Вы можете изменить цикл for в handleServerResponse на следующее, чтобы решить эту проблему:

for(var i=0; i < responseText.childNodes.length; i++){
    var node = responseText.childNodes[i];
    var text = node.childNodes[1].text ? node.childNodes[1].text : node.childNodes[1].textContent;
    var value = node.childNodes[0].text ? node.childNodes[0].text : node.childNodes[0].textContent;
    var newOpt = new Option(text,value);
    sel.options[sel.options.length] = newOpt;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...