Fatal编程技术网

Javascript AJAX没有正确响应

javascript php ajax

Javascript AJAX没有正确响应,javascript,php,ajax,Javascript,Php,Ajax,我已经为在线食品店编写了一个AJAX代码，但是当我运行它时，它没有显示正确的输出，也就是说，总是会弹出一个提示出错的弹出窗口。我想知道我的代码中有什么问题，是与连接处理程序还是JS脚本有关 这是我的index.php代码 <!DOCTYPE html> <HTML> <HEAD> <TITLE>AJAX</TITLE> <SCRIPT type = "text/javascript" src

我已经为在线食品店编写了一个AJAX代码，但是当我运行它时，它没有显示正确的输出，也就是说，总是会弹出一个提示出错的弹出窗口。我想知道我的代码中有什么问题，是与连接处理程序还是JS脚本有关

这是我的index.php代码

<!DOCTYPE html>
<HTML>
    <HEAD>
        <TITLE>AJAX</TITLE>
        <SCRIPT type = "text/javascript" src = "JS/store.js"></SCRIPT>
    </HEAD>
    <BODY onload = "process()">
        <H3>Foodstore</H3>
        Enter the food you would like to order:
        <INPUT type = "text" id = "user_input" placeholder = "Food Item" />
        <DIV id = "output_area" />
    </BODY>
</HTML>


AJAX
食品店
输入您想要点的食物：
这是我正在使用的JS代码

var XML_HTTP = create_XML_HTTP_request_object();
function create_XML_HTTP_request_object() {
    var XML_HTTP;
    if(window.ActiveXObject) {
        try {
            XML_HTTP = new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e) {
            XML_HTTP = false;
        }
    } else {
        try {
            XML_HTTP = new XMLHttpRequest();
        } catch(e) {
            XML_HTTP = false;
        }
    }
    if (! XML_HTTP) {
        alert('Cant create the object!!');
    } else {
        return XML_HTTP;
    }
}
function process() {
    if((XML_HTTP.readyState == 0) || (XML_HTTP.readyState == 4)) {
        food = encodeURIComponent(document.getElementById("user_input").value);
        url = "process.php?food=" + food;
        XML_HTTP.open("GET", url, true);
        XML_HTTP.onreadystatechange = handle_server_response;
        XML_HTTP.send(null);
    } else {
        setTimeout('process()', 1000) ;
    }
}
function handle_server_response() {
    if(XML_HTTP.readyState == 4) {
        if(XML_HTTP.status == 200) {
            XML_response = XML_HTTP.responseXML;
            XML_document_element = XML_response.documentElement;
            message = XML_document_element.firstChild.data;
            document.getElementById("output_area").innerHTML = '<SPAN style = "color:blue">' + message + '</SPAN>';
        } else {
            alert('Something went wrong!!');
        }
    }
}

var-XML\u-HTTP=create\u-XML\u-HTTP\u-request\u-object（）；
函数create_XML_HTTP_request_object（）{
var-XML_-HTTP；
if（window.ActiveXObject）{
试一试{
XML_HTTP=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}捕获（e）{
XML_HTTP=false；
}
}否则{
试一试{
XML_HTTP=newXMLHttpRequest（）；
}捕获（e）{
XML_HTTP=false；
}
}
如果（！XML_HTTP）{
警报（'无法创建对象！！'）；
}否则{
返回XML\uhttp；
}
}
函数过程（）{
if（（XML_HTTP.readyState==0）| |（XML_HTTP.readyState==4））{
food=encodeURIComponent（document.getElementById（“用户输入”）.value）；
url=“process.php？food=“+food；
XML_HTTP.open（“GET”，url，true）；
XML_HTTP.onreadystatechange=处理服务器响应；
XML_HTTP.send（null）；
}否则{
setTimeout（'process（）'，1000）；
}
}
函数句柄\服务器\响应（）{
if（XML_HTTP.readyState==4）{
if（XML_HTTP.status==200）{
XML_response=XML_HTTP.responseXML；
XML\u document\u element=XML\u response.documentElement；
message=XML\u document\u element.firstChild.data；
document.getElementById（“输出区域”）.innerHTML=''+消息+''；
}否则{
警惕（‘出了点问题！’）；
}
}
}
这是我正在使用的PHP代码

<?php
    header('Content-Type: text/xml');
    echo '<?XML version = "1.0" encoding = "UTF-8" standalone = "yes" ?>';
    echo '<response>';
        $food = $_GET['food'];
        $food_array = array('tuna' , 'bacon' , 'loaf' , 'cheese' , 'pizza') ;
        if(in_array($food , $food_array)) {
            echo 'We do have ' . $food . ' !!';
        } elseif($food == '') {
            echo 'Enter a food item';
        } else {
            echo 'Sorry we don\'t sell ' . $food . ' !!';
        }
    echo '</response>';
?>
<代码> 作为您发布的Ajax函数的替代品，请考虑以下内容：

    function _ajax( url, options ){
        var factories=[
            function() { return new XMLHttpRequest(); },
            function() { return new ActiveXObject('Msxml2.XMLHTTP'); },
            function() { return new ActiveXObject('MSXML2.XMLHTTP.3.0'); },
            function() { return new ActiveXObject('MSXML2.XMLHTTP.4.0'); },
            function() { return new ActiveXObject('MSXML2.XMLHTTP.5.0'); },
            function() { return new ActiveXObject('MSXML2.XMLHTTP.6.0'); },
            function() { return new ActiveXObject('Microsoft.XMLHTTP'); }
        ];
        /* Try each factory until we havea winner */
        for( var i=0; i < factories.length; i++ ) {
            try { var req = factories[ i ](); if( req!=null ) { break; } }
            catch( err ) { continue; }
        };

        var method=options.hasOwnProperty('method') ? options.method.toUpperCase() : 'POST';
        var callback=options.hasOwnProperty('callback') ? options.callback :false;

        if( !callback ){
            alert( 'No callback function assigned' );
            return false;
        }

        var headers={
            'Accept': "text/html, application/xml, application/json, text/javascript, "+"*"+"/"+"*"+"; charset=utf-8",
            'Content-type': 'application/x-www-form-urlencoded',
            'X-Requested-With': 'XMLHttpRequest'
        };

        /* The main parameters of the request */
        var params=[];
        if( options.hasOwnProperty('params') && typeof( options.params )=='object' ){
            for( var n in options.params ) params.push( n + '=' + options.params[n] );
        }

        /* Additional arguments that can be passed to the callback function */
        var args=options.hasOwnProperty('args') ? options.args : {};

        /* Assign callback to handle response */
        req.onreadystatechange=function(){
            if( req.readyState ) {
               if( req.status==200 ) options.callback.call( this, req.response, args );
               else console.warn( 'Error: '+req.status+' status code returned' );
            }
        }

        /* Execute the request according to desired method */
        switch( method ){
            case 'POST':
                req.open( method, url, true );
                for( header in headers ) req.setRequestHeader( header, headers[ header ] );
                req.send( params.join('&') );
            break;
            case 'GET':
                req.open( method, url+'?'+params.join('&'), true );
                for( header in headers ) req.setRequestHeader( header, headers[ header ] );
                req.send( null );
            break;  
        }
    }

function\u ajax（url、选项）{
var工厂=[
函数（）{返回新的XMLHttpRequest（）；}，
函数（）{返回新的ActiveXObject（'Msxml2.XMLHTTP'）；}，
函数（）{返回新的ActiveXObject（'MSXML2.XMLHTTP.3.0'）；}，
函数（）{返回新的ActiveXObject（'MSXML2.XMLHTTP.4.0'）；}，
函数（）{返回新的ActiveXObject（'MSXML2.XMLHTTP.5.0'）；}，
函数（）{返回新的ActiveXObject（'MSXML2.XMLHTTP.6.0'）；}，
函数（）{返回新的ActiveXObject（'Microsoft.XMLHTTP'）；}
];
/*尝试每个工厂，直到我们有一个赢家*/
对于（变量i=0；i
然后您可以这样使用它：

function process(){
    call _ajax( this, 'process.php', { 'method':'get', 'callback':handle_server_response, params:{ 'food':food } } );
}

function handle_server_response(response){
    try{/* this is not tested! */
        var XML_document_element = response.documentElement ;
        var message = XML_document_element.firstChild.data ;
        document.getElementById("output_area").innerHTML = '<SPAN style = "color:blue">' + message + '</SPAN>' ;
    }catch(err){
        console.warn('oops, an error occurred: %s',err);
    }
}

函数过程（）{
调用_ajax（这个，'process.php'，{'method'：'get'，'callback'：处理_服务器_响应，参数：{'food'：food}）；
}
函数句柄\服务器\响应（响应）{
试试{/*这是未经测试的*/
var XML_document_element=response.documentElement；
var message=XML\u document\u element.firstChild.data；
document.getElementById（“输出区域”）.innerHTML=''+消息+''；
}捕捉（错误）{
console.warn（'oops，发生错误：%s'，err）；
}
}
对于将来的ajax请求，您只需向
\uAjax
函数提供不同的参数，而不是每次重写。此外，与其弹出警告消息，用户可能不理解错误，不如将其记录到控制台

但就我个人而言，如果不需要使用XML，我建议使用JSON而不是XML。程序读写容易得多，传输的字节数少，不易出现奇数字符异常。

作为AJAX函数的一种替代方法，请考虑以下内容：

    function _ajax( url, options ){
        var factories=[
            function() { return new XMLHttpRequest(); },
            function() { return new ActiveXObject('Msxml2.XMLHTTP'); },
            function() { return new ActiveXObject('MSXML2.XMLHTTP.3.0'); },
            function() { return new ActiveXObject('MSXML2.XMLHTTP.4.0'); },
            function() { return new ActiveXObject('MSXML2.XMLHTTP.5.0'); },
            function() { return new ActiveXObject('MSXML2.XMLHTTP.6.0'); },
            function() { return new ActiveXObject('Microsoft.XMLHTTP'); }
        ];
        /* Try each factory until we havea winner */
        for( var i=0; i < factories.length; i++ ) {
            try { var req = factories[ i ](); if( req!=null ) { break; } }
            catch( err ) { continue; }
        };

        var method=options.hasOwnProperty('method') ? options.method.toUpperCase() : 'POST';
        var callback=options.hasOwnProperty('callback') ? options.callback :false;

        if( !callback ){
            alert( 'No callback function assigned' );
            return false;
        }

        var headers={
            'Accept': "text/html, application/xml, application/json, text/javascript, "+"*"+"/"+"*"+"; charset=utf-8",
            'Content-type': 'application/x-www-form-urlencoded',
            'X-Requested-With': 'XMLHttpRequest'
        };

        /* The main parameters of the request */
        var params=[];
        if( options.hasOwnProperty('params') && typeof( options.params )=='object' ){
            for( var n in options.params ) params.push( n + '=' + options.params[n] );
        }

        /* Additional arguments that can be passed to the callback function */
        var args=options.hasOwnProperty('args') ? options.args : {};

        /* Assign callback to handle response */
        req.onreadystatechange=function(){
            if( req.readyState ) {
               if( req.status==200 ) options.callback.call( this, req.response, args );
               else console.warn( 'Error: '+req.status+' status code returned' );
            }
        }

        /* Execute the request according to desired method */
        switch( method ){
            case 'POST':
                req.open( method, url, true );
                for( header in headers ) req.setRequestHeader( header, headers[ header ] );
                req.send( params.join('&') );
            break;
            case 'GET':
                req.open( method, url+'?'+params.join('&'), true );
                for( header in headers ) req.setRequestHeader( header, headers[ header ] );
                req.send( null );
            break;  
        }
    }

function\u ajax（url、选项）{
var工厂=[
函数（）{返回新的XMLHttpRequest(

<?xml ... ?>