Jquery Uncaught TypeError: Object # & lt; Object & gt; does not have a 'split' method


When I try to run this page, by clicking on the dropdown, the change event is sending an AJAX request, but it is shows an error: "Uncaught TypeError: Object # has no method 'split'". Why is it displaying that split is not a method?

 <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ajax - jQuery AJAX Powered Cascaded drop down list</title>
        <script type="text/javascript" src="JS/jquery-1.7.2.js"></script>

        <script type="text/javascript">

        //When the socument is ready call the function OnReady

        function OnReady()
            //Handle the change event for the drop down list

        function onChange()
            //create the ajax request
                    type: "POST", //HTTP method
                    url: "Default2.aspx/OnContinentChange", //page/method name
                    data: "{'continentName':'"+$('#drpContinent').val() +"'}", //json to represent argument
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: callback,
                    error: onError


        //Handle the callback on success
        function callback(msg)
            //handle the callback to handle response
            //request was successful. so Retrieve the values in the response.
            var countries = msg.split(';');
            var length = countries.length;

            //Change the second dropdownlists items as per the new values foudn in response.
            //let us remove existing items
            document.getElementById('<%=drpCountry.ClientID %>').options.length = 0;

            //Now add the new items to the dropdown.
            var dropDown = document.getElementById('<%=drpCountry.ClientID %>');
            for(var i = 0; i < length - 1; ++i)
                var option = document.createElement("option");
                option.text = countries[i];
                option.value = countries[i];


        //Handle the callback on error
        function onError()
            alert('something went wrong');


        <form id="form1" runat="server">
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                Select Continent:
                <asp:DropDownList ID="drpContinent" runat="server">
                </asp:DropDownList><br />
                <br />
                Select Country: &nbsp;
                <asp:DropDownList ID="drpCountry" runat="server">

Here we have the OnContinentChange method that handles the AJAX request:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Default2 : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)
        if (IsPostBack == false)
            //Let us populate the list of continents in the first drop down
            drpContinent.DataSource = DBHelper.GetContinentList();
            drpContinent.DataTextField = "continentName";
            drpContinent.DataValueField = "continentName";

            //Set the second dropdown as the list of all countries of selected continent
            drpCountry.DataSource = DBHelper.GetCountriesList(drpContinent.SelectedValue);
            drpCountry.DataTextField = "countryName";
            drpCountry.DataValueField = "countryName";

    public static string OnContinentChange(string continentName)
        DataTable table = DBHelper.GetCountriesList(continentName.Trim());

        string result = string.Empty;

        foreach (DataRow r in table.Rows)
            result += r["countryName"].ToString() + ";";

        return result;

You are saying the dataType is JSON so that means the response will be an object not a string, you can only use split() on a string.