I have this code
<html>
<head>
<script>
function main(){
function loadWordlist(url){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log('firstFunction');
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
loadWordlist('https://www.example.com/');
}
main()
</script>
</head>
<body>
<script>
console.log('secondFunction')
</script>
</body>
<html>
Here i am getting the content from the url
And during that the browser contain loading the code and execute it
But i get secondFunction first then firstFunction
And i want firstFunction to execute first then secondFunction after firstFunction finish
Call the second function from the first function.
<html>
<head>
<script>
function main(){
function loadWordlist(url){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log('firstFunction');
secondFunction();
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
loadWordlist('https://www.example.com/');
}
main()
</script>
</head>
<body>
<script>
function secondFunction() {
console.log('secondFunction');
}
</script>
</body>
<html>
If that's not possible, you can make xhttp.send() blocking. I strongly advise against it. It's bad user experience. But it's possible, and maybe there are use-cases where this is the only solution.
<html>
<head>
<script>
function main(){
function loadWordlist(url){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log('firstFunction');
}
};
xhttp.open("GET", url, false);
xhttp.send();
}
loadWordlist('https://www.example.com/');
}
main()
</script>
</head>
<body>
<script>
console.log('secondFunction')
</script>
</body>
<html>
Related
What is wrong with this ajax function.
<script>
function loadDoc() {
var a=document.data.fitem.value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "master_find.jsp?val="+a) ;
xhttp.send();
}
</script>
I tried so many ways to supply a variable to the master_find.jsp script to retrieve the main item from a table., no success.
I want when I click the button a GET Request to send but I don't know how to connect the AJAX script with the button.
<script>
var url = "http://myurl.com";
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
console.log(xhr.status);
console.log(xhr.responseText);
}};
xhr.send();
</script>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<button>Make a request</button>
you need transform it in a function and call by the button:
<script>
function call()
{
var url = "http://myurl.com";
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
console.log(xhr.status);
console.log(xhr.responseText);
}};
xhr.send();
}
</script>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<button onclick="call();">Make a request</button>
Seeing as you are importing Jquery, there is also a helper function to fetch data from an AJAX request, you can use it like this:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<button>Make a request</button>
<!-- Javascript -->
<script>
$('button').click(function(){
$.get("http://myurl.com", function(result) {
console.log(result);
});
});
</script>
I have been working with script from w3schools. I would like the ajax_info.txt file to appear as the page loads instead of with the button click. I've seen this question before, but can't find the answer again after a couple of days of looking. I pre-apologize for this idiotic question.
<!DOCTYPE html>
<html>
<body>
<h1>The XMLHttpRequest Object</h1>
<p id="demo">Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script>
</body>
</html>
Why can't AJAX load another HTML page with JavaScript? It loads HTML,CSS,PHP etc... but not JavaScript. Is AJAX supposed to work like that? If so how can I load another HTML page that contains JS with AJAX?
A simple example what I mean
a.php
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h1>The XMLHttpRequest Object</h1>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "b.php", true);
xhttp.send();
}
</script>
</body>
</html>
b.php
<!DOCTYPE html>
<html>
<body>
<h1>b</h1>
<script>
document.write("Hello World!");
</script>
</body>
</html>
Screenshot of response:
Because the javascript code you'll get via ajax is a simple string and not executed. You have to eval() the code in the script tag like:
Example:
<script id="helloworld">
document.write("Hello World!");
</script>
JS:
var jsCode = document.getElementById('helloworld').textContent;
eval(jsCode);
Edit by request:
if (this.readyState == 4 && this.status == 200) {
var demoElement = document.getElementById("demo");
demoElement.innerHTML = this.responseText;
var scriptTags = demoElement.getElementsByTagName('script');
for(i = 0; i < scriptTags.length; i++) {
eval(scriptTag[i].textContent);
}
}
I'm trying to use javascript and read from http://search.yahooapis.com/ WebSearchService /V1/webSearch?appid=YahooDemo &query=persimmon&results=2 using xmlhttp. I'm getting an error because it cannot read
<script type="text/javascript">
url="http://search.yahooapis.com/ WebSearchService /V1/webSearch?appid=YahooDemo &query=persimmon&results=2";
var xmlhttp = null;
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
if ( typeof xmlhttp.overrideMimeType != 'undefined')
{
xmlhttp.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject)
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert('Perhaps your browser does not support xmlhttprequests?');
}
xmlhttp.open('GET', url, true);
xmlhttp.send(null);
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
alert("success");
}
else
{
alert("failure");
}
};
</script>
Unless your web site is hosted on search.yahooapis.com you're probably encountering the Same Origin Policy.
This is causing your outgoing request to return with a 404 status code:
You should be using JSONP instead of XMLHttpRequest:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript file download</title>
<script type="text/javascript">
function yahooApi(resp) {
var scriptEl = document.getElementById("yahooApiJsonP");
scriptEl.parentNode.removeChild(scriptEl);
console.log(resp);
}
window.onload = function() {
var scriptEl = document.createElement("script");
scriptEl.id = "yahooApiJsonP";
scriptEl.src = "http://search.yahooapis.com/WebSearchService/V1/webSearch?output=json&callback=yahooApi&appid=YahooDemo&query=persimmon&results=2";
document.body.appendChild(scriptEl);
};
</script>
</head>
<body>
<p>This is a test</p>
</body>
</html>
This will send the request, which will return a 200 OK status:
It also looks like this service has been shut down: