zoukankan      html  css  js  c++  java
  • 第七章《创建Ajax应用》

      本章节主要介绍如何使用jquery中的Ajax

      1.加载HTML

      $("#body").load(url[,data][,callback]);

      url:指定要加载的HTML页面的URL地址

      data:可选参数,指定要发到服务器数据

      callback:指定在Ajax请求完成时执行

      注:若data为“key1=value1&key2=value2” 则会发送Get请求,使用 Request.QueryString进行访问参数

      若data为{key1:value1,key2:value2}则会发送Post请求,使用Request.Form进行访问参数

      例:$("#div1").load("employee.aspx",{"id":"xxx"},function(){alert('请求完成');});

      这样会把employee.aspx中产生的html代码加载到div1中

      2.加载Json数据

      $.getJSON(url[,data][,callback]);

      参数于加载HTML一致,只是加载的类型不一直

      也可以改写成通用语法:

      $.ajax({

        url:url,

        dataType:"json",

        data:data,

        success:function(data){

        }

      });

      3.加载JavaScript

      $.getScript(url[,success(data,textStatus)]);

      其中url 是访问地址,success是可选参数用于指定请求成功时执行的回调函数里面的data:表示服务器响应的数据,textStatus表示响应的状态文本.

      也可以改写成通用语法:

      $.ajax({

        url:url,

        dataType:"script",

        success:function(data){

        }

      });

      4.Ajax底层实现

      其实所有的Ajax访问都可以采用通用语法,在通用语法里面还有更多可选参数(用于控制各种类型访问)

      使用$.ajax();方法时,可以对以下选项进行设置

      $.ajax({

        async:一个Boolean值,指定释放异步方式发送请求;默认是true

        beforeSend:指定在发送请求之前调用的函数,在该函数内可以修改XMLHttpRequest对象,若要取消当前请求返回false即可

        cache:一把Boolean值,指定是否强制浏览器缓存被请求的页面,默认值为true。(若dataType的类型为 script和jsonp时默认为false)

        comPlete:指定当请求完成时要执行的函数。

        contentType:一个字符串,指定向服务器发送的数据类型,默认为"application/x-www-from-urlencoded"。

        context:一个对象,用于设置所有Ajax相关回到函数的上下文.也就是当前调用ajax的对象

        data:一个对象活字符串,给出要发送到服务器的数据.

        dataFilter(data,type):指定对XMLHttpRequest的原始相应数据进行预处理的筛选函数

        dataType:一个字符串,指定预期服务器返回的数据类型.如果不指定该参数,则jQuery将自动更具HTTP包的MIME信息进行智能判断.

        该类型包括:“xml”、“html”、“script”、“json”、“jsonp”、“text”

        error:指定请求失败时要调用的函数。

        global:一个Boolean值,指定是否触发全局Ajax事件,默认为true。

        ifModified:一个Boolean值,指定是否存在服务器数据改变时才获取新数据.该默认值为false

        jsonp:一个字符串,用于重写jsonp请求中的回调函数名称,该选项的默认值为"callback"

        jsonpCallback:一个字符串,为jsonp请求指定一个回调函数名称。

        password:一个字符串,指定用于响应HTTP反问认证请求的密码.

        processData:一个Boolean值,是否将要发送DOM树信息进行转换 默认为true

        scriptCharset:一个字符串,仅适用于dataType为"jsonp"或"script"且type为“GET”的请求。强制请求解释为某个字符串。通常只在本地和远程的字符集不

                同时使用。

        success:指定请求成功时调用的函数。

        timeout:一个数字,用于设置请求超时值(以毫秒为单位)。

        traditional:一个Boolean值,若要使用传统样式参数进行序列化,则设置为True

        type:一个字符串,指定请求的类型(POST或GET),默认值为GET。

        url:一个字符串,指定请求的地址

        username:一个字符串,指定用于响应HTTP访问认证请求的用户名。

        xhr:用于创建XMLHttpRequest对象的回调函数。默认时在IE中是ActiveXObject。

    });

      5.处理全局Ajax事件

      1)ajaxStart事件

      当Ajax请求开始并且没有其他请求出去活动状态时,会触发ajaxStart事件。

      2)ajaxSend事件

      当发送Ajax请求时,会触发ajaxSend事件。

      3)ajaxComplete事件

      当Ajax请求完成时会触发ajaxComplete事件

      4)ajaxStop事件

      当所有Ajax请求都停止时,会触发ajaxStop事件

      5)ajaxSuccess事件

      当请求成功完成时触发

      6)ajaxError

      当请求发生错误时触发

      附:Asp.net常用实例

    方法一:

    后台方法

    [WebMethod] //将该方法注册到webservice,以便前台调用
    public static string xxx(string p_name1,string p_name2,...) //注意必须为静态方法
    {
     return "";
    }

    前台调用
    $.ajax({
                        type: "post", //传送方式
                        contentType: "application/json", 
                        url: "FrmItemTop.aspx/GetConfigItem", //调用后台方法:   页面路径/页面方法
                        data: "{'cid':'" + $(this).attr("cid") + "'}", //传入参数  注意:参数的“名称”以及“顺序”要和调用的方法一致
                        dataType: 'json',
                        success: function(result) { //当后台方法处理完后 会调用该方法,并通过 result接收返回值
                            $("#item_id").text(result.d["id"]);//不同的返回类型 获取方法不同,见下文
                           
                        }
                    });


    方法二、

    后台方法

    配置文件中:web.config
    <httpHandlers>
       <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" /> --添加该配置
    </httpHandlers>

    page_load中添加一下代码段:
    Ajax.Utility.RegisterTypeForAjax(typeof(页面类名));

    方法:
    [Ajax.AjaxMethod]
    public string[] xxx(int a,string b)
    {
     return string[];
    }

    前台调用
    page_name.xxx(参数1,参数2,...,方法2)

    function 方法2(response)
    {
     var ConfigItem_str = response.value;
     ConfigItem_str[N];
    }


    各返回类型访问方式如下:

    一、
     返回:string
     获取:result.d

    二、
     返回:ArrayList
     获取:result.d[N]
    三、
     返回:Hashtable
     获取:result.d["key"]
    四、
     返回:josn //一般使用比较少,相对比较麻烦
     获取:eval(result);
    五、
     返回:datatable //只能应用到 Ajax.Utility.RegisterTypeForAjax(typeof(FrmItemCrt)); 上
     获取:var ds=response.value;
           ds.Rows[rowindex].columnName;
    六、
     返回:string[]
     获取: var ss=response.value
           ss[0],ss[1]....

      

  • 相关阅读:
    Druid 配置_DruidDataSource参考配置
    Druid 配置 wallfilter
    Druid 配置_配置WebStatFilter
    Druid 配置_StatViewServlet配置
    Druid 配置_StatFilter
    Druid数据库连接池使用
    Spring泛型依赖注入
    java计算代码执行时间
    模板方法在Spring事务中的应用
    maven,阿里云国内镜像,提高jar包下载速度
  • 原文地址:https://www.cnblogs.com/zyj469470971/p/2513157.html
Copyright © 2011-2022 走看看