jQuery, JSONP help needed

z3r0aCc3Ss · Post by **z3r0aCc3Ss** » 09 May 2013, 23:59

I am accessing cross-domain. Here is my code:

<html>
	<body>
    	<!-- Javascript -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function ()
		{
            $("#btn392").click(function()
			{
                var url = "URL of the server";
                
                var success = function(data)
				{
                    var html = [];
                    /* parse JSON */
                    data = $.parseJSON(data);
                    /* loop through array */
                    $.each(data, function(index, d)
					{
                        html.push("firstname : ", d.firstname);
                    });
					
                    $("#div391").html(html.join('')).css("background-color", "red");
                };
				
                $.ajax(
				{
                  type: 'GET',
                  url: url,
				  username:"username",
				  password:"password",
                  dataType: "jsonp",
                  crossDomain: true,
                  cache:false,
				  contentType:'application/json; charset=utf-8',
                  success: success,
                  error:function(jqXHR, textStatus, errorThrown)
				  {
                    alert(errorThrown);
                  },
				  complete: function(requestState)
				  {
					  alert("Working");
				  }
                });
            });
        });
        </script>
        
        <!-- HTML -->
        <div id="example-section39">    
            <div>Get data with JSONP</div>
            <div id="div391"></div><br />
            <button id="btn392" type="button">Submit</button>
        </div>
    </body>
</html>

It's an HTML file. Whenever I execute the above code, I get jQuery was not called.
Can anyone please help me out on this issue?

Post by **maboroshi** » 10 May 2013, 00:12

Doing a bit of quick research have you added

Code: Select all

?callback=?

at the end of the requested URL?

That indicates to the getJSON function that we want to use JSONP. Remove it and a vanilla JSON request will be used. Which will fail due to the same origin policy.

Post by **ayu** » 10 May 2013, 01:19

As Mabs said, you need to use callback, else cross domain requests wont be allowed.

I actually faced the EXACT same issue last night

But I solved it by writing a PHP script that does the request for me, and then I send the AJAX request to my own script on the same server instead, which returns a JSON string.
I prefer to handle stuff like that on my server if possible anyway, since in my case it involved a bunch of parsing.

z3r0aCc3Ss · Post by **z3r0aCc3Ss** » 10 May 2013, 21:19

maboroshi wrote:Doing a bit of quick research have you added
Code: Select all
?callback=?
at the end of the requested URL?

That indicates to the getJSON function that we want to use JSONP. Remove it and a vanilla JSON request will be used. Which will fail due to the same origin policy.

Yup, I had added that. It's just I replaced the entire url with URL word...

Also, I have 1 qstn. Is your domain need to be whitelisted? I mean, what if, the domain from which I am accessing data is blocking all other external requests?

Post by **ayu** » 11 May 2013, 03:58

z3r0aCc3Ss wrote: Yup, I had added that. It's just I replaced the entire url with URL word...
Also, I have 1 qstn. Is your domain need to be whitelisted? I mean, what if, the domain from which I am accessing data is blocking all other external requests?

Well yeah, if the domain is blocking requests you would have to be white listed, but that has nothing to do with JS.
It would be the same with any data in that case, but generally sites don't block data like that, it would be a bit pointless ^^

z3r0aCc3Ss · Post by **z3r0aCc3Ss** » 16 May 2013, 07:05

As with GET method, is it possible to POST data on the server using JSONP?
Can anyone please post some code snippet or working example on it?

z3r0aCc3Ss · Post by **z3r0aCc3Ss** » 31 May 2013, 23:59

cats wrote:As Mabs said, you need to use callback, else cross domain requests wont be allowed.

I actually faced the EXACT same issue last night
But I solved it by writing a PHP script that does the request for me, and then I send the AJAX request to my own script on the same server instead, which returns a JSON string.
I prefer to handle stuff like that on my server if possible anyway, since in my case it involved a bunch of parsing.

@cats, I would like to have some information for implementing PHP proxy for cross-domain issues which you had implemented.
Any working code snippet or links?

Post by **ayu** » 01 Jun 2013, 14:13

z3r0aCc3Ss wrote: @cats, I would like to have some information for implementing PHP proxy for cross-domain issues which you had implemented.
Any working code snippet or links?

Here's the function that queries the off server sites, and then returns a json string.
Rather primitive, but it gets the job done.

Code: Select all

https://github.com/jra89/Mont/blob/master/application/helpers/target_helper.php

And this controller calls the helper function and returns the status code to the client

Code: Select all

https://github.com/jra89/Mont/blob/master/application/controllers/json.php

z3r0aCc3Ss · Post by **z3r0aCc3Ss** » 03 Jun 2013, 23:10

Is it necessary to convert XML to JSON while using PHP proxy?
I have an API, that sends the data in XML format and I am using jQGrid to populate and display data in a grid.

Code: Select all

'use strict';
						$("#tbgrid").jqGrid(
						{
							url: "URL of the XML API,
							datatype: "xml",
							height: 'auto',
							colNames:['Col1', 'Col2', 'Col3', 'Col4'],
							colModel:
							[
								{
									name: 'col1', width: 180, sorttype: 'string', align: 'center'
								},
								{
									name: 'col2', width: 180, sorttype: 'string', align: 'center'
								},
								{
									name: 'col3', width: 180, sorttype: 'int', align: 'center'
								},
								{
									name: 'col4', width: 180, sorttype: 'int', align: 'center'
								}
							],
							xmlReader:
							{
								root: "root element",
								row: "sub",
								repeatitems: false
							},
							loadonce: true,
							rowNum: 5,
							rowList: [5, 10, 15],
							viewrecords: true,
							caption: "Transaction details",
							pgbuttons: true,
							width: 1000,
							sortorder: "desc",
							pager: '#pager'
						}).jqGrid('navGrid', '#pager');

How do I use php proxy with this type?

I am able to make cross-domain request coz I am using
chrome --disable-web-security

EDIT:
Actually, the thing is the server is sending data in XML format. How do I catch that response in XML, convert it to JSON and show it in jQgrid using PHP proxy?

z3r0aCc3Ss · Post by **z3r0aCc3Ss** » 19 Jun 2013, 06:59

@cats, thank you for your help. Your solution really helped me out. I am using PHP Proxy and everything seems to be working correctly.
But, when I use jqGrid, I encode my URL, (%2F, %3D, etc). But after my URL, jqGrid adds some parameters, like, nd, page, sort, etc. And I need to encode those contents also. How do I do that?
For example:

Code: Select all

var proxyuri = "phpproxy.php?url=";
				var inituri = "http://username:password@api.something.co.in/v1.1/cu/tr?format=xml&mobile=54876514584&start_date=2012-01-10&end_date=2013-05-11";				
				var finalURI = proxyuri + encodeURIComponent(inituri).replace(/'/g,"%27").replace(/"/g,"%22");

But, what I see in the browser is:

Code: Select all

myhost.com/html/phpproxy.php?url=http%3A%2F%2Fusername%3Apassword%40api.something.co.in%2Fv1.1%2Fcu%2Ftr%3Fformat%3Dxml%26mobile%3D54876514584%26start_date%3D2012-01-10%26end_date%3D2013-05-11&_search=false&nd=1371646024351&rows=5&page=1&sidx=&sord=desc

The last few parameters (&_search=false&nd=1371646024351&rows=5&page=1&sidx=&sord=desc) are not encoded, and that's the reason I am not getting any response. How do I fix that? I need to encode the URL after all the parameters are appended.

suck-o.com

jQuery, JSONP help needed

jQuery, JSONP help needed

Re: jQuery, JSONP help needed

Re: jQuery, JSONP help needed

Re: jQuery, JSONP help needed

Re: jQuery, JSONP help needed

Re: jQuery, JSONP help needed

Re: jQuery, JSONP help needed

Re: jQuery, JSONP help needed

Re: jQuery, JSONP help needed

Re: jQuery, JSONP help needed