Home > 网页前端 > 使用jQuery Ajax获取用户地址信息和User Agent

使用jQuery Ajax获取用户地址信息和User Agent

September 25th, 2010 发表评论 阅读评论

jQuery 是一个JavaScript 库,它有助于简化 JavaScript 以及 Asynchronous JavaScript + XML (Ajax) 编程。与类似的 JavaScript 库不同,jQuery 具有独特的基本原理,可以简洁地表示常见的复杂代码。

jQuery由John Resig创建,它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。

jQuery 能帮助您保证代码简洁易读。您再也不必编写大堆重复的循环代码和 DOM 脚本库调用了。使用 jQuery,您可以把握问题的要点,并使用尽可能最少的代码实现您想要的功能。毫无疑问,jQuery 的原理是独一无二的:它的目的就是保证代码简洁并可重用。

使用jquery的ajax,我们可以轻松的从特定网页获取所需的信息,并进行相应的处理。

下面的是一个简单示例,我们从这个网页上获取到您的地址信息和用户代理。

<!DOCTYPE html>
<html> 
<head>
<title>Jquery Ajax 获取UA信息</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
</head>
<body> 
<div id="uainfo" style="display:none;"></div> 
<span id="info"></span>
<script type="text/javascript">
$(document).ready(function(){ $("#uainfo").load('http://ip.tangblog.info/uaimg');
$("#uainfo").ajaxStop(function(){ var addr = $("#uainfo #Addrinfo").text();var info = $("#uainfo #UAinfo").html(); $("#info").html('您好,您来自'+addr+',您使用的是'+info+'系统!'); }) })
</script>
</body> 
</html>

把这一段代码保存到本地,你执行一遍试试,是不是得到你的一些信息啦!

如果你想把这些内容部署到您的网站上,那么您首先必须解决Ajax请求跨域的问题了,否则由于网页安全方面的限制默认无权限获取到域外的内容!

下面,我们开始学习jQuery在Ajax方面的应用。

使 Ajax 变得简单

使用 jQuery 将使 Ajax 变得及其简单。jQuery 提供有一些函数,可以使简单的工作变得更加简单,复杂的工作变得不再复杂。

Ajax 最常见的用法就是把一块 HTML 代码加载到页面的某个区域中去。为此,只需简单地选择所需的元素,然后使用 load() 函数即可。下面是一个用于更新统计信息的示例:

$('#stats').load('stats.html');

通常,我们只需简单地把一些参数传递给服务器中的某个页面。正如您所预料的,使用 jQuery 实现这一操作非常地简单。您可以使用 $.post() 或者 $.get(),这由所需的方法决定。如果需要的话,您还可以传递一个可选的数据对象和回调函数。清单 1 显示了一个发送数据和使用回调的简单示例。

清单 1. 使用 Ajax 向页面发送数据

                  
$.post('save.cgi', {
    text: 'my string',
    number: 23
}, function() {
    alert('Your data has been saved.');
});

如果您确实需要编写一些复杂的 Ajax 脚本,那么需要用到 $.ajax() 函数。您可以指定 xmlscripthtml 或者 json,jQuery 将自动为回调函数准备合适的结果,这样您便可以立即使用该结果。还可以指定 beforeSenderrorsuccess 或者 complete 回调函数,向用户提供更多有关 Ajax 体验的反馈。此外,还有一些其它的参数可供使用,您可以使用它们设置 Ajax 请求的超时,也可以设置页面 “最近一次修改” 的状态。清单 2 显示了一个使用一些我所提到的参数检索 XML 文档的示例。

清单 2. $.ajax() 使 Ajax 由复杂变简单

                
$.ajax({
    url: 'document.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function(){
        alert('Error loading XML document');
    },
    success: function(xml){
        // do something with xml
    }
});

当 success 回调函数返回 XML 文档后,您可以使用 jQuery 检索这个 XML 文档,其方式与检索 HTML 文档是一样的。这样使得处理 XML 文档变得相当地容易,并且把内容和数据集成到了您的 Web 站点里面。清单 3 显示了 success 函数的一个扩展,它为 XML 中的每个 <item> 元素都添加了一个列表项到 Web 页面中。

清单 3. 使用 jQuery 处理 XML 文档

               
success: function(xml){
    $(xml).find('item').each(function(){
        var item_text = $(this).text();

        $('<li></li>')
            .html(item_text)
            .appendTo('ol');
    });
}

当然,jquery的AJAX相关的函数使用方法不仅是以上这些,大家有兴趣的话,可以去查找相关资料深入了解!

转载请以超链接注明来自  云在天边看世界
本文永久链接  http://www.tangblog.info/2010/09/25/jQuery-Ajax-catch-user-address-and-user-agent.html

分类: 网页前端 标签:

  1. avatar
    guest 2010-12-07 at 15:57 |#59

    天啦,我看到这堆数字已经晕了。小天真是细心勤奋。
  2. avatar
    Gary 2010-12-04 at 00:27 |#58

    @admin
    slide速度是600,应该不算快,晃眼的可能是scroll,scroll的速度是200,遇到长点的文章的时候可能就会晃眼了。下次把它改久一点吧。
  3. avatar
    admin 2010-12-04 at 00:25 |#57

    @Gary
    我看了,还不错,slide速度有些快,比较晃眼啊
  4. avatar
    Gary 2010-12-04 at 00:14 |#56

    @Gary
    哦耶!你现在可以去我那看看啦,吼吼
  5. avatar
    Gary 2010-12-03 at 00:34 |#55

    @admin
    哈哈,那谢谢你啦,我再试试去哦,你早点睡吧
  6. avatar
    admin 2010-12-03 at 00:12 |#54

    @Gary 你直接替换原来的摘要显示就可以了么,一直搞slide也没意思 你要等load完成再执行其他任务,可以这样写:$(*).load(url,function (){other tasks;}) ,大概是这样的,手机上网回个贴,真不方便啊。。。
    from wap blog
  7. avatar
    Gary 2010-12-02 at 23:25 |#53

    恩,我写的跟你的一样。下面是我写的函数
    function loadpostmore(key,postlink){
    $(post-more-'+key+').load(postlink)
    $(post-more-'+key+').slideDown(1000)
    $(post-'+key+').slideUp(1000)
    };
    可是load,slideDown,slideUp全都同时执行
  8. avatar
    admin 2010-12-02 at 23:21 |#52

    @Gary
    ,这个应该是顺序执行的吧
    load这样使用,可以直接返回载入你所需的部分: $('#result').load('ajax/test.html #container');
  9. avatar
    Gary 2010-12-02 at 22:37 |#51

    @admin
    我是用鼠标响应事件启动了一个函数,这个函数里包含$(area).load和$(area).slideDown,现在怎么让$(area).load执行完之后再执行$(area).slideDown呢?
  10. avatar
    admin 2010-12-02 at 22:33 |#50

    @Gary
    那样写当然是同时执行啦,你写个鼠标响应事件,比如单击
    <a onclick="showallcontent();" href="javascript:void(0);" >显示全文</a>
  11. avatar
    Gary 2010-12-02 at 22:29 |#49

    @admin
    我用.load加载的内容可以了,我想知道怎么让它加载完成之后再执行其它代码啊?就都写在一起的话是同时执行的。
  12. avatar
    admin 2010-12-02 at 21:18 |#50

    @Gary
    不孕不育 这是哪家的AD啊, ,我要过滤掉
  13. avatar
    Gary 2010-12-02 at 21:16 |#49

    @admin
    我有偏执狂,想做的一定要做到。。。嗯嗯,点了你那个不孕不育的广告了
  14. avatar
    admin 2010-12-02 at 21:14 |#48

    @Gary
    我看你就是想弄个连续的背景音乐,做这些改变没啥必要啊,可以不要音乐啊,反正那个没多大用处啊
    ■■,呵呵
  15. avatar
    Gary 2010-12-02 at 21:09 |#47

    @admin
    牛逼,我不会改源程序啊,悲剧
  16. avatar
    admin 2010-12-02 at 21:07 |#46

    @Gary
    是的,专门用来输出评论
  17. avatar
    Gary 2010-12-02 at 20:17 |#45

    @admin
    你这的这个评论的分页是修改程序文件建立了新的接口吗?因为我看你调用了一个/do/ajaxcomments的网址
  18. avatar
    Gary 2010-12-02 at 19:59 |#44

    @admin
    好复杂哦,容我再研究研究,如果哪天我成功了的话过来通知你哦
  19. avatar
    admin 2010-12-02 at 19:40 |#43

    @Gary
    哦,直接请求全文这样也可以,你可以参照我上面的那个示例,现在模板中设置一个隐藏框架(可以放在模版较后位置)用来放置即将请求的页面内容,然后再从这个内容中分析提取你所要的内容,最后再清空隐藏框架的内容,以防造成页面错乱。
    类似这样,你可以在我的首页进行测试
    var footer= $('.footer').html();
    function allcontent(){$('.footer').html('');
    $(".footer").load('http://www.tangblog.info/2010/11/25/tips-for-white-space-css-style.html');
    $(".footer").ajaxStop(function(){ var content = $(".footer .content").html(); $("#post-1483002 .content").html(content); $('.footer').html(footer);}) }
    allcontent()
    理论上这是可行的,但是在实际应用过程中你应该专门建立一个接口来请求所需的数据,这样可以减少请求的数据量,而且也很高效
  20. avatar
    Gary 2010-12-02 at 19:05 |#42

    @admin
    用.load(文章网址)可以载入这个网页吧,那如果我要载入网页内的某一元素呢?比如id是content,后面加#content可以吗?
Comment pages 1234»
  1. 本文目前尚无任何 trackbacks 和 pingbacks.
/static/smilies/icon_twisted.gif /static/smilies/icon_smile.gif /static/smilies/icon_cry.gif /static/smilies/icon_question.gif /static/smilies/icon_razz.gif /static/smilies/icon_mrgreen.gif /static/smilies/icon_sad.gif /static/smilies/icon_evil.gif /static/smilies/icon_exclaim.gif /static/smilies/icon_redface.gif /static/smilies/icon_biggrin.gif /static/smilies/icon_surprised.gif /static/smilies/icon_eek.gif /static/smilies/icon_confused.gif /static/smilies/icon_cool.gif /static/smilies/icon_lol.gif /static/smilies/icon_mad.gif /static/smilies/icon_rolleyes.gif /static/smilies/icon_wink.gif /static/smilies/icon_idea.gif /static/smilies/icon_arrow.gif /static/smilies/icon_neutral.gif
capacha 请输入验证码(不区分大小写)