No internet connection and timeout in XMLHTTPRequest Script - javascript

I have this code on alot of functions for my web app
function ui_editlocation(id){
var hr = new XMLHttpRequest();
var url = "scripts/ui_processing.php";
var ui = "editlocation";
var vars = "ui="+ui+"&id="+id;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("ui_content").innerHTML = return_data;
}
}
hr.send(vars);
document.getElementById("ui_content").innerHTML = "Loading...";
}
I want to add some code that if the internet connection is down you get a message saying 'Please check your internet connection, click here to try again'
also if there is an internet connection i want it to timeout after 30 seconds and say 'We are currently experiencing high demand on our network, click here to try again'
I need the 'click here to try again' to re send the request
I know this is a big ask, but any help would be appreciated.
Thanks
Carl

function ui_editlocation(id){
var hr = new XMLHttpRequest();
var timeout=setTimeout(function(){
hr.abort();
timeout=null;
if(confirm("Do you want to try again?")){ui_editlocation(id);}
},30000);
var url = "scripts/ui_processing.php";
var ui = "editlocation";
var vars = "ui="+ui+"&id="+id;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
if(timeout){cancelTimeout(timeout);timeout=null;}
var return_data = hr.responseText;
document.getElementById("ui_content").innerHTML = return_data;
}
}
hr.send(vars);
document.getElementById("ui_content").innerHTML = "Loading...";
}

Related

Unable to show the response in alert or console

I'm working on a website in which I need to make a GET request to a webservice and log the response. I'm trying the below code in jsp.
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
var a = this.responseText;
alert(a);
console.log(a);
}
...
xhttp.open("GET", "https://example.com/test.ashx", true);
xhttp.send();
I am able to see the response in Firefox networks tab. But alert/console log doesn't work. What am I doing wrong here?
try this
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == XMLHttpRequest.DONE) {
var a = this.responseText;
alert(a);
console.log(a);
}
}
xhttp.open("GET", "https://example.com/test.ashx", true);
xhttp.send();

How can I pass data from client to server use raw AJAX?

Hello I have already search but they often use jquery ajax to pass data from js to PHP(server-side). but for my project it has a bunch of pure js code so I should use raw AJAX to pass data.
For example, if I want to send a variable "Imgname" that value = 13 and want to echo in php page.
this is my try
<script>
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState === 4 && xmlhttp.status === 200) {
alert('send to server successfully');
}
};
xmlhttp.open("POST", "test2.php", true);
xmlhttp.send("Imgname=13");
}
</script>
in test2.php
<?php
$temp = $_POST['Imgname'];
echo $temp; /////output should be 13
?>
but error Undefined index: Imgname in C:\xampp\htdocs\test2.php on line 2
You need to make sure that you're sending the correct content-type:
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
Try sending the header:
var http = new XMLHttpRequest();
var url = "test2.php";
var params = "Imgname=13";
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(params);

Post data using XMLHttpRequest to laravel 5.2 controller as request

I have done posting/updating successfully with javascript XMLHttpRequest() to php $_REQUEST like:
function ajax_edit(e_id){
var edit_form = document.getElementById('edit_form'+e_id);
var e_name = document.getElementById('name'+e_id).value,
e_email = document.getElementById('email'+e_id).value,
e_contact = document.getElementById('contact'+e_id).value,
e_status = document.getElementById('status'+e_id).value;
xmlhttp.open('GET', 'hello-world.php?edit=yes&id='+e_id+'&name='+e_name+'&email='+e_email+'&contact='+e_contact+'&status='+e_status, true);
xmlhttp.send();
$('#edit'+e_id).modal('hide');
return false;
edit_form.reset();
}
And my php work was like:
if(isset($_REQUEST['edit'])){
$name = mysqli_real_escape_string($conn, strip_tags($_REQUEST['name']));
$email = mysqli_real_escape_string($conn, strip_tags($_REQUEST['email']));
$contact = mysqli_real_escape_string($conn, strip_tags($_REQUEST['contact']));
$status = mysqli_real_escape_string($conn, strip_tags($_REQUEST['status']));
$edit_sql = "UPDATE users SET name = '$name', email = '$email', contact = '$contact', status = '$status' WHERE id = '$_REQUEST[id]'";
$run_edit = mysqli_query($conn, $edit_sql);
}
Now I am trying to apply the same process to another Laravel 5.2 project but don't know how to do, specially the url (hello-world.php?edit=yes) part from where I will send data to my controller as request.
So far I have done with this:
function submit_form(edit_id){
xmlhttp = new XMLHttpRequest();
var edit_form = document.getElementById('edit_form'+edit_id);
var url = "{{ URL::to('updatelabdetails'); }}";
var edit_labname = document.getElementById('labname'+edit_id).value,
edit_pcname = document.getElementById('pcname'+edit_id).value;
alert(edit_pcname);
var params = "labname='+edit_labname+'&pcname='+edit_pcname";
alert(params);
xmlhttp.open('GET', url+"?"+params, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && http.status == 200) {
alert(xmlhttp.responseText);
}
}
xmlhttp.send();
return false;
}
But only able to output till alert(edit_pcname); part.
My Route:
Route::post('updatelabdetails', 'LoginController#updateLabDetails');
My Controller:
public function updateLabDetails(Request $request){
$post = $request->all();
var_dump($post);
die();
}
After submitting its going to some url like /showlabdetails? with MethodNotAllowedHttpException error.
Thanks in advance.
Please update your submit_form function like this
function submit_form(edit_id){
var edit_labname = document.getElementById('labname'+edit_id).value,
edit_pcname = document.getElementById('pcname'+edit_id).value;
var http = new XMLHttpRequest();
var url = "updatelabdetails";
var params = "labname='+edit_labname+'&pcname='+edit_pcname";
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(params);
}
Your laravel roure isn't correct you've registered POST route and accessing the GET one.
Change Route::post('updatelabdetails', 'LoginController#updateLabDetails'); to Route::get('updatelabdetails', 'LoginController#updateLabDetails');
you need to add token in your request as said in the laravel documentation. see this link https://laravel.com/docs/5.4/csrf

XMLHttpRequest no return value

i am unable to receive a response from the php file.
Javascript
var http = new XMLHttpRequest();
var url = "http://localhost/php_bollywood_romance.php";
var params = "film="+movie_name_entered;
http.open("POST", url, true);
//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(params);
I have even tried to do this.....
var http = new XMLHttpRequest();
if ("withCredentials" in http)
{
var url = "http://localhost/php_bollywood_romance.php";
var movie_name_entered="hi";
var params = "film="+movie_name_entered;
http.open("POST", url, true);
}
else if (typeof XDomainRequest != "undefined"){
http = new XDomainRequest();
var url = "http://localhost/php_bollywood_romance.php";
var movie_name_entered="hi";
var params = "film="+movie_name_entered;
http.open("POST", url);
} else {
http = null;
}
if (http){
http.onload = function(){
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
document.write(http.responseText);
callback(http.responseText);
alert("hey");
}
}
http.send(params);
};
PHP
<?php
{
$name = $_POST["film"];
$file ='data_bollywood_romance.txt';
$current=file_get_contents($file); //gets existing content from the file
$current ="$current \n $name \n";
file_put_contents($file,$current); //put newstuff
echo 'hi';
return 'yes';
}
?>
However this also does not seem to work... if i do alert("http.response") after http.send(params)...it alerts an alert with nothing written on it. I thought this might be because there is same origin policy problem so i tried to do Cross-domain Ajax with Cross-Origin Resource Sharing but that didnt work either( that is the second code). Thanks for your help in advance.
You cannot set this two headers:
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
Previous thread about your problem
I tried it without and worked fine.
Personally i would go all the way using jQuery Ajax, but thats just "lazy me" :)

Extract Title from web page, using just the url

I want to replicate some functionality from Digg.com whereby when you post a new address it automatically scans the url and finds the page title.
I am programming in classic ASP and VBScript and using javascript. Anyone know a script to make this happen..?
Many thanks in advance..
Paul
This is somewhat of a rudimentary example. You should probably include some data verification.
The ASP page should be called something like getPageTitle.asp
<%
Response.Buffer = True
Dim strURL, objXMLHTTP, objXML, strContents
Dim objRegExp, strHTML, strPattern, colMatches, strTitle
strURL = Request.Form("url")
Set objXMLHTTP = Server.CreateObject ("Microsoft.XMLHTTP")
'Or if this doesn't work then try :
'Set objXMLHTTP = Server.CreateObject("MSXML2.ServerXMLHTTP")
objXMLHTTP.Open "GET", strURL, False
objXMLHTTP.Send
strContents = objXMLHTTP.ResponseText
Set objXMLHTTP = Nothing
Set objRegExp = New RegExp
strPattern = "<title>(.*?)<\/title>"
objRegExp.Pattern = strPattern
objRegExp.IgnoreCase = True
objRegExp.Global = True
Set colMatches = objRegExp.Execute(strContents)
If colMatches.Count > 0 then
strTitle = objMatches(0).Value
Else
strTitle = ""
End If
Set objRegExp = Nothing
Response.write(strTitle)
%>
This is a basic JavaScript POST implementation. You could spruce this up a bit with any JS framework you like.
var script = "http://www.example.com/getPageTitle.asp"
var page2check = "http://www.example.com/somePageToCheck.html"
function getXMLHttpRequestObject() {
var xmlhttp;
/*#cc_on
#if (#_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
#else
xmlhttp = false;
#end #*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
var http = new getXMLHttpRequestObject();
var parameters = "url="+page2check;
http.open("POST", script, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", parameters .length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = function() {
if(http.readyState == 4) {
alert(http.responseText);
}
}
http.send(parameters);
var pageTitle = http.ResponseText
I hope this helps.
Send url from clientside to serverside using javascript(ajax).
Load html page by it's url using asp on serverside.
Parse html page, extract title.
Send title to clientside.

Categories