第七章《创建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]....

  

原文地址:https://www.cnblogs.com/zyj469470971/p/2513157.html