• 黑马程序员_使用Jquery实现AJAX功能


    1.AJAX是什么?

    AJAX技术虽然一直听过,但是真正用起来还是工作有一年了的时候,当时需要实现一个异步更新推送的功能。如:在档案管理系统中,存在代办事项和站内信,而这些模块需要在页面不刷新的情况下定时的反馈给前台待办事项的数量以及简要内容,站内信也是如此。这个时候我认为只有AJAX能够胜任,那AJAX是什么?AJAX是在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术。

    2.为什么使用Jquery来实现?

    学习ASP.NET开始,Jquery的强大已经深深捕获了我,而且我还记着老师的原话,Javascript能够实现的Jquery也都能实现,而且还因其封装好供我们使用,所以及其便利。

    3.如何使用Jquery来实现

    1.使用Jquery自带的函数:$.ajax([settings]); //括号内需要提供常用参数,如:type,url,data,dataType,success等。

    2.参数的讲解:

    type: 要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。

    url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。

    data: 要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换,可以查看processData选项。对象必须为key/value格式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组,JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

    dataType: 要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。

    success:要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。(1)由服务器返回,并根据dataType参数进行处理后的数据。(2)描述状态的字符串。

    3.举例实现:

    当前列中没有给 data , dataType 赋值,因为没有用到这些值。若给data赋值,则可在 ToDoList_GetMes.aspx 页后台文件中接收到,并且加以使用。dataType 没有指定,则返回默认格式。

     1     <script type="text/javascript">
     2         $(function () {
     3             $.ajax({
     4                 type: 'get',
     5                 url: 'ToDoList_GetMes.aspx?date=' + Date.now.toString(),
     6                 data: '',
     7                 dataType:'',
     8                 success: function (result) {
     9                     //从接收到信息中查找使用数据
    10                     var v_Html = $(result).find('#s_Mes').html();
    11                     //添加到当前页控件中
    12                     $('#s_Show').append(v_Html);
    13                 }
    14             });
    15         });
    16     </script>
    1     <form id="form1" runat="server">
    2     <div>
    3         <select id="s_Show" runat="server"></select>
    4     </div>
    5     </form>

    4.其他方法来实现

     除了$.ajax() 方法外还有 $.post(); $.get(); 等方法可以使用,这些方法的参数则更少,使用起来也简便一点,但具体效果怎么样,我还没有将这些方法进行比较过,有待研究。

  • 相关阅读:
    用grunt搭建自动化的web前端开发环境-完整教程
    SQL Server:触发器详解
    利用junit对springMVC的Controller进行测试
    jquery-barcode:js实现的条码打印
    16个良好的 Bootstrap Angularjs 管理后台主题
    Spring Security 4 Hello World Annotation+XML
    intellij 13新建javaweb项目并用tomcat 7启动
    JavaScript类和继承:constructor属性
    javascript 的面相对象
    javascript call apply bind caller callee 的用法
  • 原文地址:https://www.cnblogs.com/alben/p/3839667.html
Copyright © 2020-2023  润新知