处理服务器响应AJAX

handling server response AJAX

本文关键字:AJAX 响应 服务器 处理      更新时间:2023-09-26

在处理一个简单项目的过程中(或者至少我认为很简单),用户点击一个按钮,上面的文本框中会出现一个从php生成的随机语句。我没有访问php文件的权限,所以我看不到代码,感觉有点失落。我认为我遇到的问题是我处理服务器响应(handleServerResponse函数)的方式出错。如有任何建议,我们将不胜感激。

在尝试调试时,我看到了以下消息:(我更改了url)

XMLHttpRequest无法加载http:somephp.php。否请求的上存在"Access Control Allow Origin"标头资源因此,不允许访问源"null"。

迄今为止的代码:

var xmlHttp = createXmlHttpRequestObject();
function createXmlHttpRequestObject(){
var xmlHttp;
if(window.ActiveXObject){
    try{
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }catch(e){
       xmlHttp = false;
       }
    }else{
    try{
       xmlHttp = new XMLHttpRequest();
    }catch(e){
       xmlHttp = false;
    }
  }
if(!xmlHttp)
    alert("Error 1");
  else
    return xmlHttp;
}

$("#BtnReset").click(function () {
    $("#TBSaying").val("");
})
$("#BtnGetSaying").click(function () {
    process();
})

function process(){
    if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
    xmlHttp.open("GET", "http://somephp.php", true);
    xmlHttp.onreadystatechange = handleServerResponse;
    xmlHttp.send(null);
    }else{
       setTimeout('process()', 1000);
    }
}
function handleServerResponse(){
    if(xmlHttp.readyState==4){
       if(xmlHttp.status==200){
        xmlResponse = xmlHttp.responseXML;
        xmlDocumentElement = xmlResponse.documentElement;
        message = xmlDocumentElement.firstChild.data
        $("#TBSaying").val(message);
       }else{
         alert('error 2');
         }
    }
}

阅读JQuery文档并重新启动,将其上传到php所在的同一服务器并运行。这是最后的代码:感谢所有的建议!

$("#BtnReset").click(function () {
    $("#TBSaying").val("");
})
$("#BtnGetSaying").click(function () {
    process();
})

function process(){
            // AJAX Code To Submit Form.
            $.get("http://somephp.php",function(data){
             $("#TBSaying").val(data);
  });
 }

来自浏览器的Ajax调用受到所谓的"同源限制"的限制。基本上,这意味着,默认情况下,您只能对网页所在的服务器进行Ajax回调。这意味着您不能对另一个域、端口或协议上的服务器进行常规Ajax调用。

你可以在这里阅读有关同源政策的信息。

有三种方法可以绕过这个限制,但都需要服务器的合作。

  1. CORS发出请求的服务器在其响应中放入标头,告诉浏览器是否允许跨源请求,甚至允许来自哪个域。这使浏览器有权完成来自不同来源的Ajax调用。

  2. JSONP您可以在这里阅读更多关于JSONP的信息。基本上,您从目标服务器请求一个脚本,脚本的编码方式会为您提供所需的答案(通常是JSON数据格式)。

  3. 服务器代理您可以找到或编写一个服务器代理,该代理将为您从另一台服务器请求数据。由于服务器到服务器的通信不受同源限制的限制,您有时可以找到另一台允许跨源请求的服务器,该服务器将为您获取数据,然后将其返回给您。

您的javascript看起来很糟糕,但唉,错了"Access Control Allow Origin"是一个服务器端(php?)错误,抱歉。

告诉服务器人员添加类似的内容

header("Access-Control-Allow-Origin: *"); 

查看您的javascript是否正确^^

附带说明,

  1. 警报("错误1");可能应该使用console.log或抛出新的Error()
  2. 为什么将xmlHttp作为全局,可以只使用process(e){var-xhr=e.target;…}
  3. 不要这样做setTimeout('process()',1000),do setTimeout(进程,1000)