Ajax Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource
JSONP or "JSON with padding" is a communication technique used in JavaScript programs running in web browsers to request data from a server in a different domain, something prohibited by typical web browsers because of the same-origin policy. JSONP takes advantage of the fact that browsers do not enforce the same-origin policy on script tags. Note that for JSONP to work, a server must know how to reply with JSONP-formatted results. JSONP does not work with JSON-formatted results.
http://en.wikipedia.org/wiki/JSONP
Good answer on stackoverflow: jQuery AJAX cross domain
$.ajax({
type: "GET",
url: 'http://www.oxfordlearnersdictionaries.com/search/english/direct/',
data:{q:idiom},
async:true,
dataType : 'jsonp', //you may use jsonp for cross origin request
crossDomain:true,
success: function(data, status, xhr) {
alert(xhr.getResponseHeader('Location'));
}
});
We can not get the data from third party website without jsonp.
You can use the php function for fetch data like file_get_contents() or CURL etc.
Then you can use the PHP url with your ajax code.
<input id="idiom" type="text" name="" value="" placeholder="Enter your idiom here">
<br>
<button id="submit" type="">Submit</button>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").bind('click',function(){
var idiom=$("#idiom").val();
$.ajax({
type: "GET",
url: 'get_data.php',
data:{q:idiom},
async:true,
crossDomain:true,
success: function(data, status, xhr) {
alert(xhr.getResponseHeader('Location'));
}
});
});
});
</script>
Create a PHP file = get_data.php
<?php
echo file_get_contents("http://www.oxfordlearnersdictionaries.com/search/english/direct/");
?>
Place below line at the top of the file which you are calling through AJAX.
header("Access-Control-Allow-Origin: *");