using JavaScript XMLHttpRequest() with ASP.NET MVC - javascript

I am trying to test using the JavaScript XMLHttpRequest() object in an ASP.NET MVC application.
I have written the following test code which I put into a View -
<script type="text/javascript">
var request;
function getAJAX() {
request = new XMLHttpRequest();
request.open("GET", "test.txt");
request.onreadystatechange = checkData();
request.send(null);
}
function checkData() {
if (request.readyState == 4) {
if (request.status == 200) {
alert(request.responseText);
}
}
}
</script>
<form action="">
<p>
<button type="button" onclick="getAJAX()">DO IT!</button>
</p>
</form>
When I click in the "DO IT!" button, the script functions get called, but the "request.onreadystatechange" never changes.
I have a few questions about this -
Is there a simple way to trace what is happening with the request.open() call?
Will the XMLHttpRequest() object even work in an ASP.NET MVC application?
Will I have to make changes to the Global.asax file (or other changes) to make this work?
I have "test.txt" in the "base" directory (the same location as the Global.asax file) is that where the request.open call will look?
(NOTE: I am trying to do this without jQuery)
Thanks very much!

You're setting the callback to onreadystatechange to the result of executing checkData. Set onreadystatechange equal to checkData instead and you should be good to go:
function getAJAX() {
request = new XMLHttpRequest();
request.open("GET", "test.txt");
request.onreadystatechange = checkData; // Don't execute checkData
request.send(null);
}
As for your other questions:
Is there a simple way to trace what is happening with the request.open() call?
Use Firebug or the development tool of your choice to inspect AJAX requests.
Will the XMLHttpRequest() object even work in an ASP.NET MVC application?
Yes, it'll work fine.
Will I have to make changes to the Global.asax file (or other changes) to make this work?
Not that I'm aware of.
I have "test.txt" in the "base" directory (the same location as the Global.asax file) is that where the request.open call will look?
Maybe? It really depends on your routing rules and how you have IIS configured.

Related

Change content of text with Ajax in pug

I have to use Ajax on my website for a school project. I want to change the content of a button, but I first wanted to be able to change some text. I've found some examples on how to change text in a pug-file but they never seem to be working. Does anybody know what I'm doing wrong?
Pug:
extends layout
block content
#reizen.w3-content.w3-container.w3-padding-64
//test ajax
#demo
h2 The XMLHttpRequest Object
button(type='button' onclick='loadDoc()') Change Content
block content
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();
}
And I have also a little file, ajax_info.txt, in the root map (the pug file is in the views-map) with only:
Ajax is cool!
The result is always some text: The XMLHttpRequest Object,
and under the text a button with, Change content, but nothing happens when I click on it.
Pug is a completely separate paradigm from Ajax. Ajax is used to make a request from a server without reloading a page, and pug dynamically renders pages when they are requested from the server. A pug application involves building multiple pages, and an Ajax application uses one page.
You can generate the HTML and JavaScript using pug, but that's where the pug ends. It simply can't be used in Ajax calls.
You should look into Ajax libraries like Axios or jQuery and focus your attention there. You can use Express (without pug) to handle your API calls.

javascript change xml file on the server

I'm making a Design Studio custom component in Eclipse. I created a property 'backgroundColor' in my contribution.xml file. I can call this xml file inside my javascript and adjust it locally, but is there a way I can upload these changes to the server xml file again? Cause at the moment my alerts return all the new data but on the server side nothing happens.
Code that i have:
Contribution.xml:
<property
id="backgroundColor"
title="BackgroundColor"
type="Color"
group="Display"
visible="true"
bindable="true"/>
component.js:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "serverpath/contribution.xml", true);
xhttp.send();
function myFunction(xml) {
xml.responseXML.getElementsByTagName('property')[0].setAttribute("visible",false);
//this returns BackgroundColor so the call does work
alert(xml.responseXML.getElementsByTagName('property')[0].getAttribute("title"));
}
You will need to make some server side coding to do that. You could achieve that by making simple rest api. But otherwise without any server side coding you cant do that. You are now getting data with GET request to server which means you cant do any modifications, you simply get any server response data.

POST data with ajax

I'm trying to save a few lines of text in a textarea with ajax targeting a classic asp file.
I'm not sure how to use ajax when when it comes to sending data with POST method and NOT using jQuery, didn't find any questions concerning this here either, no duplicate intended.
Ajax function:
function saveDoc() {//disabled
var xhttp = new XMLHttpRequest();
var note = document.getElementById("note");
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("0").innerHTML = xhttp.responseText;
}
};
xhttp.open("POST", "saveNote.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(note);
ASP Classic:
set fs=Server.CreateObject("Scripting.FileSystemObject")
set f=fs.OpenTextFile("c:\inetasp\1.txt",8,true)
dim note
note = RequestForm("note")
f.Write(note)
f.Close
Response.Write("Works.");
set f=nothing
set fs=nothing
I'm aware there might be a lot wrong with the .asp since i couldn't find any specific info about how to handle ajax requests with Classic ASP correctly.
Any suggestions on how to make this work without jQuery are welcome.
I cannot test your code as I don't have a backend running on my machine right now. But I can already tell you a few things:
you are calling xhttp.send(note); but your note is a DOM element. It should be a string with a querystring format.
in your server side code you call RequestForm is it a custom function you have previously defined ? The usual syntax is Request.Form
Hope it can help

Ajax Function Only Working Part of the Time

I am using the following Ajax function format:
var xmlhttp;
function addAddress(str)
{
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
//specific selection text
document.getElementById('info').innerHTML = xmlhttp.responseText;
}
}
var addAddress = "add";
xmlhttp.open("POST", "sys.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var queryString = "&addAddress=" + addAddress;
xmlhttp.send(queryString);
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
if (windows.ActiveXObject)
{
return new ActiveXObject("Micorsoft.XMLHTTP");
}
return null;
}
Up until now, all of my Ajax functions, like the one above, have been running fine. However, now the function will work only sometimes. Now, sometimes I will have to click the onclick event a couple times to execute the function or the function will just hang, and then after about 4 minutes it will execute.
I tested parts of the function and found that the issue lies some where at the:
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
alert(xmlhttp.status);
//specific selection text
document.getElementById('info').innerHTML = xmlhttp.responseText;
}
When the function works, I can alert(xmlhttp.status) and get 200. However, when it's not working, the alert box doesn't even trigger. In fact, nothing happens, not even an error.
Could this be a server issue? I am kind of thinking my website got hacked, but I cannot find any issues accept that the Ajax functions are not executing properly.
Lastly, I do not get this problem on my localhost, it's only happening on the live website.
Any help will be greatly appreciated.
Thanks
First just confirm that the addAddress function is actually being called when you click the button or control that should trigger it.
Just a simple alert in the first line like this would work:
function addAddress(str)
{
alert('addAddress has been called!')
....
}
If you don't get the alert, make sure there isn't a javascript error on the page that is preventing the function from running. In firefox you press CTRL+SHIFT+J to see the error console for example.
If that part is working, trying putting the URL for the ajax request directly into your browser and diagnose it that way.
Looks like you are requesting this url with ajax:
sys.php&addAddress= (address goes here)
Check that the page will load directly in your browser. If not, the problem is not the ajax request, but something with the sys.php page itself - which you can then drill down on.
Hope that helps!
This wasn't the answer I was expecting, but I ended up having my web host (GoDaddy) change servers, and that resolved the problem. For almost a year, I was running IIS7 with PHP. Since I had never run into any problems, I just continued using that server. After the Ajax latency issue and not being able to figure out a solution, I figured I would just switch over to Apache. After the change, everything started running smoothly again.
I am thinking maybe there was a software update that I was not notified about. Or, maybe my website was getting hit with a DDoS, which was decreasing the performance of my Ajax requests. Lastly, maybe someone got into IIS and changed a setting. I don't know, all I know is that the minute the server was changed over to Apache was when the website started running normally again.
Thanks for everyone's suggestions.

Javascript : Different behavior when run on machine and local server

Because my title is too short, I will explain more clearer. I have create a code in JavaScript . And I have two options to run :
1) Run on machine : simple click into html file.
2) Run on local server : mean I start Apache, and start this html file in localhost.
( http://localhost:85/Javascript/index.html for example)
When I choose solution 1, no thing happen. And when I choose solution 2, happen as I wish. But I don't know why.
Here is my code. Purpose : take a json file and process it.
<script>
window.onload = function(){
var url = "http://localhost:85/javascript/json1.json"; // problem here
var request = new XMLHttpRequest();
request.open("GET", url);
request.onload = function(){
if (request.status == 200){
update(request.responseText);
}
}
request.send(null);
};
function update(responseText){ // some code here }
</script>
You cannot use AJAX to read content from a different domain.
Javascript running from file://whatever cannot read localhost:85.
Did you replace this line with the server's original path?
var url = "http://localhost:85/javascript/json1.json";
With
var url = "http://10.0.0.X:85/javascript/json1.json"; // Did you change the right path?
And make sure, the page is not called with the file:// protocol!

Categories