Implement Web Services in PHP & JavaScript.

Question

I want to use web services with ajax php and javacript, thied this exemple but I still have this error. I tried a lot of code, please someone help me.

XMLHttpRequest cannot load xxxxx/login.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. index.html:1

index.html

<html><head>
<script src="jquery-2.1.0.js"></script>
<script src="jsjsjs.js"></script>
</head>
<body>
<div id='logindiv'>     
        <label>Username:</label>
            <input name="username"  id="username" type="text">
        <label>Password:</label>
            <input name="password" id="password" type="password">
            <input value="Submit" name="submit" class="submit" type="submit" onclick='chk_ajax_login_with_php();'>
        <div id='status'></div>
</div>   
</body>
</html>

jsjsjs.js

function chk_ajax_login_with_php(){
  var username=document.getElementById("username").value;
  var password=document.getElementById("password").value;  
    var params = "username="+username+"&password="+password;
           var url = "xxxxx/login.php";
                $.ajax({
                               type: 'POST',
                               url: url,
                               dataType: 'html',
                               data: params,
                               beforeSend: function() {
                                 document.getElementById("status").innerHTML= 'checking...'  ;},
                               complete: function() { },
                               success: function(html) {
                                    document.getElementById("status").innerHTML= html;
                                     if(html=="success"){                                       
                                       window.location ="/test.php"                                      
                                     }                                      
                                }
                       });     
}

login.php

<?php
if ($_POST['username'] != null and $_POST['username'] != "" and $_POST['password'] != null and $_POST['password'] != ""){
$username = $_POST['username'];
$password = $_POST['password'];
}
if($username == "youssef" and $password=="4656" ){
echo "Nice";
}
else { echo "nono";}
}
?>

possible duplicate of [No 'Access-Control-Allow-Origin' header is present on the requested resource.' Why is it not showing when I use POSTMAN?](http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource-w) — Quentin, Apr 22 '14 at 09:20
You should [learn how to use the label element properly](http://www.456bereastreet.com/archive/200711/use_the_label_element_to_make_your_html_forms_accessible/). Without a for attribute or a form control inside it, a label is useless. — Quentin, Apr 22 '14 at 09:21

score 0 · Answer 1 · answered Apr 22 '14 at 09:19

If the URL your are requesting from is not on the same domain as the request originates browser security will prevent the request completing. This is due to the Same Origin Policy.

To work around this you will need to make a JSONP request or use CORS, assuming the third party supports them, or make a server-side proxy to make the request for you and make the AJAX request to this local URL.

Implement Web Services in PHP & JavaScript.

1 Answers1