javascript - converting XMLHTTPRequest into $ajax

I am fetching Google in a gadget using this code:

<html>
<head>
<title>Browser</title>
</head>
<body onload= "getListCollection()" style="width:900px; height:900px;" >
<div id="listAttributes" style="width:400px; height:400px;" ></div>
<script>

function getListCollection() {
    var url = ""  
    xmlhttp = new XMLHttpRequest();
    xmlhttp.open('GET',url,true, 'user', 'password');
    xmlhttp.onreadystatechange = function()
    {
        if(xmlhttp.readyState == 4);
        {
            document.getElementById("listAttributes").innerHTML = xmlhttp.responseText
        }
    }
    xmlhttp.send(null);
}
</script>
</body>
</html>

I wonder how can I do the same thing using $ajax?

I looked at different examples but I don't know how they gonna fit in this situation. Or if you can post some nice $ajax tutorials please.

When I change it to this, it doesn't work:

<html>
<head>
<title>Browser</title>
</head>
<body onload= "getListCollection()" style="width:900px; height:900px;" >
<div id="listAttributes" style="width:400px; height:400px;" ></div>
<script src=".5.1/jquery.min.js">

$.ajax({
    url : '',
    type : 'GET',
    success : function(data){
        $('#listAttributes').html(data);
    }
});
</script>
</body>
</html>

Nothing es up on the page.

I am fetching Google in a gadget using this code:

<html>
<head>
<title>Browser</title>
</head>
<body onload= "getListCollection()" style="width:900px; height:900px;" >
<div id="listAttributes" style="width:400px; height:400px;" ></div>
<script>

function getListCollection() {
    var url = "https://www.google.co.uk"  
    xmlhttp = new XMLHttpRequest();
    xmlhttp.open('GET',url,true, 'user', 'password');
    xmlhttp.onreadystatechange = function()
    {
        if(xmlhttp.readyState == 4);
        {
            document.getElementById("listAttributes").innerHTML = xmlhttp.responseText
        }
    }
    xmlhttp.send(null);
}
</script>
</body>
</html>

I wonder how can I do the same thing using $ajax?

I looked at different examples but I don't know how they gonna fit in this situation. Or if you can post some nice $ajax tutorials please.

When I change it to this, it doesn't work:

<html>
<head>
<title>Browser</title>
</head>
<body onload= "getListCollection()" style="width:900px; height:900px;" >
<div id="listAttributes" style="width:400px; height:400px;" ></div>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.5.1/jquery.min.js">

$.ajax({
    url : 'https://www.google.co.uk',
    type : 'GET',
    success : function(data){
        $('#listAttributes').html(data);
    }
});
</script>
</body>
</html>

Nothing es up on the page.

Share Improve this question edited Aug 6, 2012 at 11:57 Shegit Brahm 7132 gold badges9 silver badges22 bronze badges asked May 18, 2012 at 14:24 Muhammad Raja 2,0103 gold badges29 silver badges46 bronze badges

1 Do you mean $.ajax()? Start with the documentation. – jrummell Commented May 18, 2012 at 14:26
What is $ajax? You've tagged this jquery so do you mean $.ajax? Have you tried looking at the tutorials on the jQuery site?! – Quentin Commented May 18, 2012 at 14:26

Add a ment |

4 Answers 4

Sorted by: Reset to default 6

Here's a jQuery version of the code:

$.ajax({
    url : 'https://www.google.co.uk', //cross-domain? this won't work
    username : 'user',
    password : 'password',
    type : 'GET', //default is GET, but i put it here to clarify
    success : function(data){
        $('#listAttributes').html(data);
    }
});

For more details and settings, read the jQuery.ajax() documentation

Something like that:

$.ajax({
    url : "https://www.google.co.uk",
    type : "get",
    username : "user",
    password : "password",
    success : function(data) {
        document.getElementById("listAttributes").innerHTML = data;
    }
});

However, your code most probably won't work since you are trying to access the external resource (i.e. not your domain).

Check the JQuery Ajax documentation for further details.

$.ajax({
   url: url,
   username: 'user',
   password: 'password'
}).done(function (responseText) {
   document.getElementById('listAttributes').innerHTML = responseText;
   //or
   $("#listAttributes").html(responseText);
});

By default, .ajax will use the GET method and be asynchronous, so I omitted those settings. If you don't need the username/password, I would use $.get().

It's really simple and shorter than the pure JavaScript version, here it is:

function getListCollection() {
    $.ajax({
        url: "https://www.google.co.uk",
        username: "user",
        password: "password",
        success: function(data){
            $('listAttributes').html(data);
        }
    });
}

The request is only accepted if the site supports cross-domain origin. Check the jQuery.ajax() documentation here.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - converting XMLHTTPRequest into $ajax - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)