xmlHttp.responseText comes empty, what is the problem and solution?
default.aspx :
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="xmlHttpOrnek._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<script type="text/javascript">
var xmlHttp;
function GetXmlHttpObject() {
var xmlHttp = null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
//--------------------------
function callAjaxFunc(val) {
xmlHttp = GetXmlHttpObject();
if (xmlHttp == null) {
alert("Browser does not support HTTP Request");
return;
}
//you can provide your page URL
var url = "Default.aspx";
url = url + "?kod=" + val;
//state change event-this will occur ass soon as response comes from the url
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function stateChanged() {
if (xmlHttp.readyState == 4)
{ //Display contents
var xmlResponse = xmlHttp.responseText;
if (xmlResponse != '') {
var inputMessage = document.getElementById('txb');
inputMessage.value = xmlResponse.toString();
alert(xmlResponse);
}
}
}
</script>
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:textbox ID="txb" runat="server"></asp:textbox>
<asp:Button ID="btn" runat="server" Text="bas" OnClientClick="callAjaxFunc('y')" />
</form>
</body>
</html>
default.aspx.cs:
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
namespace xmlHttpOrnek
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string d = Request.QueryString["kod"];
if (Request.QueryString["kod"] == "y")
{
Response.Write("Başarılı!");
Response.End();
}
}
}
}
I created another project with copy paste of this one; everything is same, but the second one worked. I'm surprised.
Related
I have a simple code to update the database with simple Ajax call using WebMethod but its not updating in the database.
HTML Markup
<i class="fa fa-file"></i> <%= item2 %>
Client Side Method:
<script type="text/javascript">
$(".newProject").on("click", function () {
$.ajax({
type: "POST",
url: "index.aspx/UpdateCode",
data: 'engCode=' + this.id,
success: function (response) {
// window.location.reload();
alert(response);
}
});
return false;
});
</script>
Server side method:
[WebMethod]
public static int UpdateCode(string Code)
{
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("Codes"))
{
int intresult = 0;
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.Add("#Mode", SqlDbType.VarChar, 50).Value = "UpdateCodes";
cmd.Parameters.Add("#Code", SqlDbType.VarChar, 50).Value = Code;
cmd.Connection = con;
try
{
con.Open();
intresult = cmd.ExecuteNonQuery();
}
catch (SqlException ex)
{
ex.ToString();
}
finally
{
cmd.Dispose();
if (con != null)
{
con.Close();
}
}
return intresult;
}
}
}
Its posting the right value on click event of hyperlink but not updating the database.
ASP.NET WebMethods do only work with JSON as the data format:
In your Ajax call, you need to add
dataType: "json",
and also supply the data as JSON:
data: {"engCode":this.id},
you are not passing data in correct formate. try this
<script type="text/javascript">
$(".newProject").on("click", function () {
$.ajax({
type: "POST",
url: "index.aspx/UpdateCode",
data: {Code: this.id}
success: function (response) {
// window.location.reload();
alert(response);
}
});
return false;
});
</script>
Try this code also....
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JavaScriptSample._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>How to call CSharp function in Ajax | JavaScript Sample</title>
<script type="text/javascript">
function getServerTime() {
/// <summary>
/// Call ServerTime web method via ajax request
/// </summary>
if (window.XMLHttpRequest) {
// for IE7+, Firefox, Chrome, Opera, Safari
this.xmlhttp = new XMLHttpRequest();
}
else {
// for IE6, IE5
try {
this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
try {
// older version of Msxml
this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
this.xmlhttp = null;
}
}
}
xmlhttp.onreadystatechange = function() {
/// <summary>
/// Display server time when success
/// </summary>
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// success Status
document.getElementById("ServerTimeResponse").innerHTML = xmlhttp.responseText;
}
}
this.xmlhttp.open("POST", "AjaxServer.asmx/ServerTime", true);
this.xmlhttp.send();
}
</script>
</head>
<body>
<form id="ServerTimeForm" runat="server">
<div>
<input id="ServerTimeButton" type="button" onclick="getServerTime();" value="Get Server Time" />
<div id="ServerTimeResponse" runat="server">
</div>
</div>
</form>
</body>
</html>
Hi I don't know javascript but I am required to use it in one of my templates. I was googling around and found a solution whic is like this:
My Index.php file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript">
window.onload = function(){
document.getElementById("aside").innerHTML="<img src='loadingImage.gif'>";
if(XMLHttpRequest) var x = new XMLHttpRequest();
else var x = new ActiveXObject("Microsoft.XMLHTTP");
x.open("GET", "other_content_1.php", true);
x.send("");
x.onreadystatechange = function(){
if(x.readyState == 4){
if(x.status==200) document.getElementById("aside").innerHTML = x.responseText;
else document.getElementById("aside").innerHTML = "Error loading document";
}
}
}
</script>
</head>
<body>
<div id="aside">This is aside</div>
</body>
</html>
My other_content_1.php file
<div id='other-content-1'>
<?php echo 'This text is loading via php command'; ?>
</div>
As this is the only Javascript function in my site I see no reason to load additional JQuery for it. I am sure there must be a way to do this with plain JavaScript / ajax without the need to load JQuery. Can anybody suggest the correct syntax to do so?
I want to happen asynchronously while the page continues to load.
from http://www.tutorialspoint.com/ajax/ , using plain XHR (XmlHttpRequest)
function loadPage() {
var ajaxRequest;
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "ajax-example.php", true);
ajaxRequest.send(null);
}
loadPage();
Try this:
window.onload = function(){
aside = document.getElementById("aside");
aside.innerHTML="<img src='loadingImage.gif'>";
if(XMLHttpRequest) var x = new XMLHttpRequest();
else var x = new ActiveXObject("Microsoft.XMLHTTP");
x.open("GET", "other_content_1.php", true);
x.send();
x.onreadystatechange = function(){
if(x.readyState == 4){
if(x.status == 200) aside.innerHTML = x.responseText;
else aside.innerHTML = "Error loading document";
}
}
}
And it is cross browser compatible, you never need the extra 32KB just to make a simple function supported cross browser.
While running the code under classic mode works fine.....but it fails when runnnig under integrated mode.
Here is the code: -
function callAjax(method, request, callback) {
http = newHTTP();
http.open('POST', url, true);
setupHeaders(http, method);
http.onreadystatechange = function () { http_onreadystatechange(http, callback); }
http.send(JSON.stringify(request));
return request.id;
}
function newHTTP() {
if (typeof (window) != 'undefined' && window.XMLHttpRequest)
return new XMLHttpRequest(); /* IE7, Safari 1.2, Mozilla 1.0/Firefox, and Netscape 7 */
else
return new ActiveXObject('Microsoft.XMLHTTP'); /* WSH and IE 5 to IE 6 */
}
function http_onreadystatechange(sender, callback) {
if (sender.readyState == /* complete */4) {
var response = sender.status == 200 ?
JSON.parse(sender.responseText) : {};
response.xmlHTTP = sender;
callback(response);
}
if (sender.readyState == 2 || sender.readyState == 3) {
}
}
function setupHeaders(http, method) {
http.setRequestHeader('Content-Type', 'text/plain; charset=utf-8');
http.setRequestHeader('X-JSON-RPC', method);
}
It returns the following response when running under classic mode: -
"{"id":0,"result":{"serverInfo":{"totalCount":2,"serviceName":"FluorineFx.PageableResult","version":1,"cursor":1,"id":null,"columnNames":["ApplicationId","ApplicationParentID","ParentApp","ChildApp"],"initialData":[[1158,1153,"Apps","App_Application1"],[3159,3161,"Databases","DB_Database1"]]}}}"
Whereas, it returns following when running under integrated mode : -
"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title></head>
<body>
<form method="post" action="xxxxx...." id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEXXXXLTE2MTY2ODcyMjlkZLGuNeIyaZaly9gcTafYavVTQG2payFqxE2OaB+1PjxT" />
</div>
<div>
</div>
</form>
</body>
</html>
"
Due to above response it fails inside http_onreadystatechange() method in this line: -
var response = sender.status == 200 ?
JSON.parse(sender.responseText) : {};
My issue is that why does it returns weird response when running under integrated mode?
I am new in learning AJAX and stuck in the first program. Tried to debug but unable to do so.
Below is my code snippet
----------input-ajax.html-------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>HTML PAGE</title>
<script type="text/javascript">
var request=null;
function createRequest(){
try{
request= new XMLHttpRequest();
)catch(e){
try{
request=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
request= new ActiveXObject("Microsoft.XMLHTTP");
}catch(failed){
request=null;
}
}
}
if(request==null){
alert("Error Creating Request Object");
}
}
function getName(){
alert("getname called");
createRequest();
var url = "showName-ajax.jsp";
request.open("POST",url,true);
alert("before");
request.onreadystatechange = updatePage;
alert("after");
request.send(null);
}
function updatePage(){
//var newName= request.getResponseHeader("r1");
var newName= request.responseText;
var name1 = document.getElementById("name");
replaceText(name1,newName);
}
function replaceText(el, text) {
if (el != null) {
clearText(el);
var newNode = document.createTextNode(text);
el.appendChild(newNode);
}
}
function clearText(el) {
if (el != null) {
if (el.childNodes) {
for (var i = 0; i < el.childNodes.length; i++) {
var childNode = el.childNodes[i];
el.removeChild(childNode);
}
}
}
}
</script>
</head>
<body>
<h1>WELCOME <span id="name"> GUEST</span></h1>
<form method="POST">
<input type="text" name="t1">
<input type="button" value="Show Name" onclick="getName();"/>
</form>
</body>
</html>
----------showName-ajax.jsp------------
<%
String s1=request.getParameter("t1");
response.setContentType("text/plain");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(s1); // Write response body.
%>
But When I run the program (click on the button) nothing happens. Even the alert message that getName function is called does not appear. PLEASE HELP!!!!
Typo:
)catch(e){
should be
}catch(e){
This would show up as an error in the console of your browser. Be sure to always check that first if things don't work like they should.
You have a ) instead of a } here:
try{
request= new XMLHttpRequest();
)catch(e){
So your function never gets defined.
change )catch(e){ to }catch(e){
but
why are you creating request object everytime on button click?
you just need to call "createRequest()" only once on page load event.
Goal:
To enable display a pop up if validation was correct or failure.
Problem:
Somehow it doesn't want to make a
validation of the password.
I tried using Firebug but It can't make debugging for this code for some reason.
Before creating this validation I had this code before:
function validation() {
if (mittXHRobjekt.readyState == 4)
alert("Okey");
}
After doing more improvement by adding validation, The readyState don't work properly. All I did was to improve the function validation only.
The current code with validation is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled 1</title>
<script type="text/javascript">
var mittXHRobjekt = null;
function skapaXHRobjekt() {
try {
XHRobjekt = new XMLHttpRequest();
} catch (err1) {
try {
XHRobjekt = new ActiveXObject("Microsoft.XMLHTTP");
} catch (err2) {
try {
XHRobjekt = new ActiveXObject("Msxml2.XMLHTTP");
} catch (err3) {
XHRobjekt = false;
}
}
}
return XHRobjekt;
}
function validation() {
if (mittXHRobjekt.readyState == 4) {
if (window.document.frmPassword.txtPassword.value == mittXHRobjekt.responseText) {
alert("Correct password");
}
else {
alert("Wrong password");
}
}
alert("no ready state 4");
}
function test(url) {
mittXHRobjekt = skapaXHRobjekt();
if (mittXHRobjekt) {
mittXHRobjekt.onreadystatechange = validation;
mittXHRobjekt.open("GET", url);
mittXHRobjekt.send(null);
}
}
</script>
</head>
<body>
<form id="frmPassword">
<input name="txtPassword" type="password" />
<input name="btnPassword" type="button" value="Evaluation" onclick="test('password.txt')" />
</form>
</body>
</html>