如何在同一个 HTML 页面上进行多个 AJAX 调用


how to make multiple ajax calls on same html page?

我有以下html页面欢迎用户。我打算通过 ajax 调用一次调用/register,然后调用一次/login。但是当这个页面呈现时,单击按钮没有任何作用,甚至没有调用函数 showdata(( 和 reg_user((。可能是什么问题?Chrome开发者工具说以下内容

XMLHttpRequest 无法加载 https://127.0.0.1/login。不 "访问控制允许源"标头存在于请求的上 资源。因此,不允许访问源"http://127.0.0.1"。

但我没有进行任何跨域调用。毕竟,我正在调用同一个本地主机域。请说明正在发生的情况。我在服务器上运行Apache/Ubuntu/PHP

<html>
<title> Welcome </title>
<script>
function makeRequestObject(){
   var xmlhttp=false;
   try {
      xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
   } catch (e) {
      try {
         xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      } catch (E) {
         xmlhttp = false;
      }
   }
   if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
      xmlhttp = new XMLHttpRequest();
   }
   return xmlhttp;
}
function showdata()
{
   alert("show data called");
   var xmlhttp=makeRequestObject();
   var user=document.getElementById('user_name').value;
   var pass=document.getElementById('password').value;
   var url = 'https://127.0.0.1/login';
   var params = 'uname='+user+'&'+'pass='+pass;
   xmlhttp.open('POST', url, true);
   xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   xmlhttp.onreadystatechange=function() {
      if (xmlhttp.readyState==4 && xmlhttp.status == 200) {
         var content = xmlhttp.responseText;
         if( content ){
            document.getElementById('userdiv').innerHTML = content;
         }
      }
   }
   xmlhttp.send(params);
}
function reg_user()
{
   alert("reg_user called");
   var xmlhttp=makeRequestObject();
   var user=document.getElementById('reg_username').value;
   var pass=document.getElementById('reg_password').value;
   var url = 'https://127.0.0.1/register';
   var params = 'uname='+user+'&'+'pass='+pass;
   xmlhttp.open('POST', url, true);
   xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"$
   xmlhttp.onreadystatechange=function() {
      if (xmlhttp.readyState==4 && xmlhttp.status == 200) {
         var content = xmlhttp.responseText;
         if( content ){
            document.getElementById('regdiv').innerHTML = content;
         }
      }
   }
   xmlhttp.send(params);
}
</script>
<body>
Enter user name : <input type="text" id="user_name" /><br/>
Enter your password : <input type="text" id="password"/><br/>
<input type="button" onclick="showdata()" value="Submit"><br/><br/>
<div id="userdiv">
</div>
<br />
Registration
<br />
Enter user name: <input type="text" id="reg_username" /><br/>
Enter your password : <input type="text" id="reg_password"/><br/>
<input type="button" onclick="reg_user()" value="Submit"><br/><br/>
<div id="regdiv">
</div>
</body>
</html>

收到的错误是由 CORS 验证引起的。 确保服务器https://127.0.0.1/根据 CORS 规范设置正确的 HTTP 响应标头。