My js file is not loading

Question

Studying Ajax with Jquery, in Mauricio Samy Silva’s book is not working with me. I made a js file out and now I can’t load it. What I did I think is not wrong. I debugged the browser with F12 and I don’t see any js error. I put several Alerts and didn’t fire any. Below me js and in sequence my html. I used VS2013’s own template.

function iniciaAjax() {

    var objAjax = false;
    if (window.XMLHttpRequest) {

        objAjax = new XMLHttpRequest();
    }
    else if(window.ActiveXObject){

        try
        {
            objAjax = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e)
        {
            try
            {
                objAjax = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (ex)
            {
                objAjax = false;
            }
        }
    }
}

function requisitar(arquivo){

    var requisicaoAjax = iniciaAjax();
    if (requisicaoAjax) {
        alert(1);

        requisicaoAjax.onreadystateshange = function () {
            alert(2);
            mostraResposta(requisicaoAjax);
            alert(3);
            requisicaoAjax.open("GET", arquivo, true);
            requisicaoAjax.send(null);
            alert(4);
        }
    }
}

function mostraResposta(requisicaoAjax) {
alert(11);

    if (requisicaoAjax.readyState == 4) {
alert(21);
        if (requisicaoAjax.status == 200 || requisicaoAjax.status == 304) {

            alert("Problema com o servidor");

        }
        else
        {
            alert("Problema com o servidor");
        }
    }
}

Eveja how is my Html. The file above(js) I put inside a file called libAjax, as it is in my html.

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Teste_Javascript._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

    <script src="Scripts/Ajax/libAjax.js"></script>

    <div class="jumbotron">
        <h1>ASP.NET</h1>
        <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS, and JavaScript.</p>
        <p><a href="http://www.asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
    </div>

    <a href="Content/mensagem.txt" onclick="requisitar(this.href); return false;">Resultado aqui</a>

    <div class="row">
        <div class="col-md-4">
            <h2>Getting started</h2>
            <p>
                ASP.NET Web Forms lets you build dynamic websites using a familiar drag-and-drop, event-driven model.
            A design surface and hundreds of controls and components let you rapidly build sophisticated, powerful UI-driven sites with data access.
            </p>
            <p>
                <a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301948">Learn more &raquo;</a>
            </p>
        </div>
        <div class="col-md-4">
            <h2>Get more libraries</h2>
            <p>
                NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.
            </p>
            <p>
                <a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301949">Learn more &raquo;</a>
            </p>
        </div>
        <div class="col-md-4">
            <h2>Web Hosting</h2>
            <p>
                You can easily find a web hosting company that offers the right mix of features and price for your applications.
            </p>
            <p>
                <a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301950">Learn more &raquo;</a>
            </p>
        </div>
    </div>

</asp:Content>

Answer 1

I think I’ve identified your problem, you’re not returning the objAjax in the role of iniciaAjax(), do:

function iniciaAjax() {

    var objAjax = false;
    if (window.XMLHttpRequest) {

        objAjax = new XMLHttpRequest();
    }
    else if(window.ActiveXObject){

        try
        {
            objAjax = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e)
        {
            try
            {
                objAjax = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (ex)
            {
                objAjax = false;
            }
        }
    }
    return objAjax; /* aqui */
}

I discovered 2 errors in your request function, it was written onreadystateshange instead of onreadystatechange and the request call was within the function.

function requisitar(arquivo){

    var requisicaoAjax = iniciaAjax();
    if (requisicaoAjax) {
        alert(1);

        requisicaoAjax.onreadystatechange = function () {
            alert(3);
            mostraResposta(requisicaoAjax);
            alert(4);
        }
        // isso fica fora do onreadystatechange
        requisicaoAjax.open("GET", arquivo, true);
        requisicaoAjax.send();
        alert(2);
    }
}

Answer 2

Import javascript this way:

<script src='<%=ResolveClientUrl("~/Scripts/Ajax/libAjax.js") %>'></script>