Display SharePoint 2013 List RowCount in HTML after Query

Question

I am new to CAML queries and javascript but I would like to display a result from a SharePoint list query in HTML. My list has approximately 300 total rows and I would like to get a row count when the Title field contains certain text to display in HTML. The result would be text on the page that reads "There are x records that begin with ..."

My query seems to work but I don't know how to get the query to run on page load to display.

<View><Query><Where><BeginsWith><FieldRef Name='Title' /><Value Type='Text'>AFI</Value></BeginsWith></Where></Query></View>

Once I get this sorted out I would like to also have a few more queries to get the row counts of different query conditions. "Rows that begin with ABC - xx" "Rows that begin with 123 - xx" and so on...

UPDATE: Here is where I am right now and getting Uncaught SyntaxError: Unexpected identifier and Invalid or unexpected token

<script src="/sites/AFA1/SiteAssets/Scripts/jquery-3.2.1.min.js"></script>
<script type="text/javascript" language="javascript" src="/sites/AFA1/SiteAssets/Scripts/jquery.SPServices.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
    getListItems(webUrl,listTitle) 
{
var webUrl = '/sites/AFA1/PMS'
var listTitle = 'Milestone%200%20DataSheet'
var viewXml = '<View><Query><Where><BeginsWith><FieldRef Name='Title' /><Value Type='Text'>AFI</Value></BeginsWith></Where></Query></View>';
    var url = webUrl + "/_api/web/lists/getbytitle('"+listTitle+"')/items"; 
    var queryPayload = {  
               'query' : {
                      '__metadata': { 'type': 'SP.CamlQuery' }, 
                      'ViewXml' : viewXml  
               }
    };

    return $.ajax({
           url: url,
           method: "POST",
           data: JSON.stringify(queryPayload),
           headers: {
              "X-RequestDigest": $("#__REQUESTDIGEST").val(),
              "Accept": "application/json; odata=verbose",
              "content-type": "application/json; odata=verbose"
           }
     });
}
});

</script>

Answer 1

I use this script to get items from list with CAML. You can use the data result object to get the count etc.

function getListItems(webUrl,listTitle) 
{
    var viewXml = '<View><Query><Where><BeginsWith><FieldRef Name='Title' /><Value Type='Text'>AFI</Value></BeginsWith></Where></Query></View>';
    var url = webUrl + "/_api/web/lists/getbytitle('" + listTitle + "')/getitems"; 
    var queryPayload = {  
               'query' : {
                      '__metadata': { 'type': 'SP.CamlQuery' }, 
                      'ViewXml' : viewXml  
               }
    };

    return $.ajax({
           url: url,
           method: "POST",
           data: JSON.stringify(queryPayload),
           headers: {
              "X-RequestDigest": $("#__REQUESTDIGEST").val(),
              "Accept": "application/json; odata=verbose",
              "content-type": "application/json; odata=verbose"
           }
     });
}