How i can use this function in my Yii2 aplication?
<script type="text/javascript">
function ajaxrunning()
{
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp =new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","autoload.php");
xmlhttp.send();
setTimeout("ajaxrunning()", 5000);
}
</script>
And i want to change the autoload.php to be the controller function http://localhost/ta/backend/web/index.php?r=sms/auto
You need to create the function in the controller to you make the call .
The path will be like this controllerName/actionName
Read this example
//PHP UserController.php
function actionSomething(){
//do something
return 'aaaa';
}
//JS code
<script type="text/javascript">
function ajaxrunning() {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
if (xmlhttp.status == 200) {
console.log(xmlhttp.responseText);// this write 'aaaa'.
}
else if (xmlhttp.status == 400) {
alert('There was an error 400');
}
else {
alert('something else other than 200 was returned');
}
}
}
xmlhttp.open("GET", "/user/something");
xmlhttp.send();
setTimeout("ajaxrunning()", 5000);
}
</script>
I recomend to use JQuery and not Javascript Vanilla, is more easy and clear.
Related
I want to get content for my website asynchronously. Now that I have more than one requests for my server I thought it would be great to seperate the "conntection Stuff" into another function:
function conToServerAsync( url, postParams, func )
{
var xmlHttp;
if( window.XMLHttpRequest )
{
xmlHttp = new XMLHttpRequest();
}
else
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange = func;
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Connection", "close");
xmlHttp.send(postParams);
}
Now I have this other function which is executing the "conToServerAsync" function like this:
function findSearchResult(value)
{
conToServerAsync( "Classes/Async/liveSearch.php", "sVal="+value, function()
{
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
document.getElementById("searchResult").innerHTML = xmlHttp.responseText;
document.getElementById("searchResult").style.border="1px solid #A5ACB2";
}
});
}
Now whats actually interesting about my case is that I've checked everything and every parameter that is passed in is valid. Then I tried to allocate the function that is given in the last parameter "conToServerAsync( "Classes...", "sVal..", function(){...}" directly to the onreadystatechange:
...
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
document.getElementById("searchResult").innerHTML = xmlHttp.responseText;
document.getElementById("searchResult").style.border="1px solid #A5ACB2";
}
}
... and it works perfectly :S So definitly the error is about passing the function on a wrong way and I have no idea. Cos my case is that specific I made a own question about it.
Thank you for answering :)
You're trying to use xmlHttp from the callback, but it's out of scope. I suggest the following approach:
function conToServerAsync( url, postParams, func )
{
var xmlHttp;
if( window.XMLHttpRequest )
{
xmlHttp = new XMLHttpRequest();
}
else
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
func.call(xmlHttp, xmlHttp);
}
}
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Connection", "close");
xmlHttp.send(postParams);
}
function findSearchResult(value)
{
conToServerAsync( "Classes/Async/liveSearch.php", "sVal="+value, function(xhr)
{
document.getElementById("searchResult").innerHTML = xhr.responseText;
document.getElementById("searchResult").style.border="1px solid #A5ACB2";
});
}
On my implementation of the XMLHttp wrapper I use the Function.prototype.call to call the callback function from the XMLHttp Object scope, So you can use the keyword this to access properties and I also pass the responseText as a parameter for convenience.
if(typeof func=="function")
func.call(xmlHttp, xmlHttp.responseText);
You can easily print the response on the callback
function callback(response){
alert(response);
}
But you can still have access to all properties of the XMLHttp Object
function callback(response){
alert(this.status); //200
alert(response);
}
Full code:
function conToServerAsync( url, postParams, func ){
var xmlHttp;
if( window.XMLHttpRequest ){
xmlHttp = new XMLHttpRequest();
}
else{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState==4 && xmlHttp.status==200){
if(typeof func=="function")
func.call(xmlHttp, xmlHttp.responseText);
}
}
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Connection", "close");
xmlHttp.send(postParams);
}
function findSearchResult(value){
conToServerAsync( "Classes/Async/liveSearch.php", "sVal="+value, function(response){
document.getElementById("searchResult").innerHTML = response;
document.getElementById("searchResult").style.border="1px solid #A5ACB2";
});
}
Since the function you passed to xmlHttp.onreadystatechange is called with xmlHttp as the context you can use this to refer to that object.
function findSearchResult(value)
{
conToServerAsync( "Classes/Async/liveSearch.php", "sVal="+value, function()
{
if(this.readyState == 4 && this.status == 200)
{
document.getElementById("searchResult").innerHTML = this.responseText;
document.getElementById("searchResult").style.border="1px solid #A5ACB2";
}
});
}
My ajax code is working on my system, but not working on different system. I'm using ajax on mousehover.
<div class="production"> production </div>
and the script is..
<script>
function getXML(){
if(window.XMLHttpRequest){
var ajax=new XMLHttpRequest();
return ajax;
}
else{
var ajax=new ActiveXObject("Microsoft.XMLHTTP");
return ajax;
}
}
function autoProd(){
var ajax=getXML();
/*var name=document.getElementById('sugg').value;*/
var url="../ajax/production.html";
ajax.onreadystatechange=function(){
if(ajax.readyState==4 && ajax.status==200)
document.getElementById('layer1').innerHTML=ajax.responseText;
}
ajax.open("get",url,true);
ajax.send();
}
</script>
You can try following:
function getXML(){
try {
var ajax = new XMLHttpRequest();
return ajax;
} catch (error1) {
try {
var ajax = new ActiveXObject("Msxml2.XMLHTTP");
return ajax;
} catch (error2) {
try {
var ajax = new ActiveXObject("Microsoft.XMLHTTP");
return ajax;
} catch (error3) {
return null;
}
}
}
}
In jQuery you can easily just use their Ajax library. The problem is that I only need it ONE time in my code, so it would not be nessesary to call the whole JavaScript library.
I have this code I have been working on, but I can't seem to get it working. I am trying to start a PHP script by the click of a button. How do I do that?
Here is how far I am right now:
<div onClick="count();">Click!</div>
<script>
function count() {
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest()
} else {
if (window.ActiveXObject) {
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
xhr.open('GET', 'count.php', false);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
while (results.hasChildNodes()) {
results.removeChild(results.lastChild);
}
results.appendChild(document.createTextNode(xhr.responseText));
}
}
xhr.send();
}, false);
}
</script>
And here is the code inside the PHP file:
<?php
mysql_connect("myhost", "username", "password") or die(mysql_error());
mysql_select_db("mydatabase") or die(mysql_error());
mysql_query("INSERT INTO `table` (`field`) VALUES(\'+1\'); ")
or die(mysql_error());
?>
<script>
function count() {
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest()
} else {
if (window.ActiveXObject) {
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
xhr.open('GET', 'count.php', false);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
while (results.hasChildNodes()) {
results.removeChild(results.lastChild);
}
results.appendChild(document.createTextNode(xhr.responseText));
}
}
xhr.send();
}, false); // This Line looks extra. Remove this and try
}
</script>
Very short method.
HTML:
<input type="button" onclick="count()" value="count">
JS:
function count() {
url="yourphp.php";
objX=new XMLHttpRequest();
objX.open("GET",url,false);
objX.send(null);
}
I'm using Ajax and code which is described below. I want to include .js file in Ajax XMLHttpRequest. Does anybody know how to do that?
For example:
I have code below:
function getXMLHttp()
{
var xmlHttp
try
{
//Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch(e)
{
//Internet Explorer
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
alert("Your browser does not support AJAX!")
return false;
}
}
}
return xmlHttp;
}
function MakeRequest(id)
{
var xmlHttp = getXMLHttp();
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4)
{
HandleResponse(xmlHttp.responseText);
}
}
xmlHttp.open("GET", "updatesite.admin.php?id="+id, true);
xmlHttp.send(null);
}
function HandleResponse(response)
{
document.getElementById('Vsebina').innerHTML = response;
}
When program call function MakeRequest(id) then i want to also executed some .js file.
Is it possible to do that?
You could always put this code in your function to cause a script to be loaded and executed...
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://location-of-script.js";
document.body.appendChild(script);
Here's a complete example. These two files just need to be in the same folder on the server.
This is hello.html:
<html>
<head>
<script type="text/javascript">
function doit()
{
var scr = document.createElement('script');
scr.type = "text/javascript";
scr.src = "hello.js";
document.body.appendChild(scr);
}
</script>
</head>
<body>
<input type="button" value="hello" onclick="doit();">
</body>
</html>
And this is hello.js:
alert("helloooo!!");
I have this function below and I call that function in a loop I get the alert n times but only n-1 or sometimes n-2 responses
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert(xmlhttp.responseText);
//document.getElementById("warnings_panel").innerHTML+=xmlhttp.responseText;
}
}
alert("in ajax)
xmlhttp.open("GET","getresponse.php?start="+ start + "&end=" + end,true);
xmlhttp.send();
I have made a class (that you can modify easily) for calling a function in loop and it calls the functions correctly. Maybe this could apply to your need.
(Also if anyone sees something wrong it's good to hear from others)
test.htm
<html>
<head>
<script type="text/javascript">
function myXmlHttp() {
/*constructor simulator*/
this.setPersitent=
function (file, onReadyFunc,params,loop)
{
myXmlHttpObj.loop = loop;
myXmlHttpObj.file=file;
myXmlHttpObj.onReadyFunc='myXmlHttpObj.'+onReadyFunc;
myXmlHttpObj.params=params;
myXmlHttpObj.mySetRequest();
}
this.setParams=
function ( params )
{
myXmlHttpObj.params=params;
}
<!--Standard initial code-->
this.mySetRequest =
function ()
{
request = false;
try { request = new XMLHttpRequest(); }
catch (trymicrosoft) {
try { request = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (othermicrosoft) {
try {request = new ActiveXObject("Microsoft.XMLHTTP");}
catch (failed) {request = false;}/*catch3*/}/*catch2*/}/*catch1*/
if (!request)
alert("Error initializing XMLHttpRequest!");
} /*func*/
this.mySendReq=
function()
{
var url = myXmlHttpObj.file;
request.open("POST", url, true);
//Some http headers must be set along with any POST request.
request.setRequestHeader
("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
request.setRequestHeader("Content-length", myXmlHttpObj.params.length);
request.setRequestHeader("Connection", "close");
request.onreadystatechange = eval(myXmlHttpObj.onReadyFunc);
request.send(myXmlHttpObj.params);
}
this.listenPHP =
function ( ) {
if ( request.readyState == 4) {
if ( request.status == 200)
{
alert(request.responseText);
myXmlHttpObj.loop--;
if(myXmlHttpObj.loop>0)
{
myXmlHttpObj.setParams("js_rand="+Math.random()+"");
myXmlHttpObj.mySendReq();
}
}//inner if
else{alert("status is " + request.status);}
}//outer iff
}//function
}//END
myXmlHttpObj = new myXmlHttp();
myXmlHttpObj.setPersitent
('getresponse.php', 'listenPHP',"js_rand="+Math.random()+"",3) ;
myXmlHttpObj.mySendReq();
</script>
</head>
<body >
</body>
</html>
and getresponse.php
<?PHP
echo 'I recived this random from js:',$_POST['js_rand'],'
this rand is from php:',rand(1,9999);
?>
onreadystatechange gets terminated when your function ends because the xmlhttp object gets removed as it is not a global variable. Am I right?
Better would be to put only the AJAX request in a function, so that the xmlhttp object is only created once (I used a shorter version to create the xmlhttp object in this example).
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
function request() {
xmlhttp.open('GET', 'getresponse.php?start=' + start + '&end=' + end, true);
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(xmlhttp.responseText);
}
}
xmlhttp.send(null);
}
Generally, this should work, but we need more information about how you actually run that loop to know what might be wrong.
I also added encodeURIComponent and changed the condition inside the callback function, because status isn't always 200 when readyState reaches 4.
function request(start, end) {
var xmlhttp;
if (window.XMLHttpRequest)
xmlhttp = new XMLHttpRequest();
else
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open('GET', 'getresponse.php?start=' + encodeURIComponent(start) + '&end=' + encodeURIComponent(end), true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4)
if (xmlhttp.status == 200) {
alert(xmlhttp.responseText);
} else {
// status ≠ 200, output useful error message
}
};
xmlhttp.send();
}