Jquery与Ajax

Jquery与Ajax

Jquery中的Ajax
jquery中的ajax 分三层
1.$.ajax()
2.load(),$.get(),$.post()
3.$.getScript(),$.getJson()

1.load() 
  load(url[,data][,callback])
  url:请求HTML页面的URL地址,String
  data:发送至服务器的key/value数据 Object
  callback:请求完成时的回调函数，无论请求成功或失败

    <script type="text/javascript">
        $(function() {
        $("#btn").click(function() {
                $("#res").load("text.aspx", function() { alert("我是回调函数！")})

            })

        })
    </script>

当请求页面的内容加载后会获得当前页面应用的CSS样式

筛选
可以通过URL的参数对获取到的内容进行筛选

结构是：url selecter

<script language="javascript" type="text/javascript">
  $(function(){
   $("#send").click(function(){
     $("#resText").load("test.html .para");
   })
  })
</script>

传递方式：
传递方式根据参数data来自动指定，如果没有参数传递则采用get方式，反之则使用post

$("#id").load("text.html",{name:"xxx",age:"18"})

回调参数

回调函数返回3个参数
第一个：请求返回的内容
第二个：请求的状态
第三个：XMLHttpRequest对象

<script language="javascript" type="text/javascript">
  $(function(){
$("#send").click(function(){
$("#resText").load("test.html .para",function (responseText, textStatus, XMLHttpRequest){
alert( $(this).html() );//在这里this指向的是当前的DOM对象，即$("#iptText")[0]
alert(responseText);//请求返回的内容
alert(textStatus);//请求状态：success，error
alert(XMLHttpRequest);//XMLHttpRequest对象
});
})
})
</script>

无论请求是否成功，只要当请求完成就会触发回调函数。

load通常用于获取静态页面。

2.$.get() 全局函数

 $.get(url[,data][,callback][,type])

url:请求的Html地址
data:发送到服务器的参数key/value
callback:载入成功时回调函数，在成功返回（success状态）时才会触发
type:服务端返回内容的格式，包括xml,html,script,json,text,_default等。

$.get()的方法的回调函数只有两个参数
function(data,textStatus){
//data:返回的内容，可以是xml文档，json文件或html片段
//textStatus:请求状态：success,error,notmodified,timeout四种。
}

新建一个一般处理程序

 

namespace jqueryDEMO.ashx
{
    /// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class Data : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            string name = context.Request.Params[0];
            int age = Convert.ToInt32(context.Request.Params[1]);
            context.Response.ContentType = "text/plain";
            context.Response.Write("你的名字是:"+name+",今年："+age+"岁");
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

 

<script type="text/javascript">
        $(function() {
            $.get("../ashx/Data.ashx"//远程地址
                , { name: "xiaobing", age: 18 }//传递的参数
                  , function(data, textstatus) { //回调函数
                      alert(textstatus)
                      alert(data);
                  }
                    , "html");//返回的类型
        })
    </script>

 

     

3.$post() 全局函数

使用和$.get()一样但有以下区别
1.get将参数附加在url后面，post则将参数作为实体发送给web服务器
2.get的参数不能大于2kb,post则几乎没有限制
3.get请求的数据会被浏览器缓存，所以不安全
4.服务端获取参数，get用$_GET[],post用$_POST[],但都可以用$_REQUEST[]来获取

当load方法请求带参数会自动用post方式

4.$.getScript()和$_getJson()

1.$.getScript() 动态加载js文件
有回调函数，在加载完成后执行

2.$.getJson() 和 $.getScript()用法一样，用于加载jso文件

3.$.each() 全局函数，遍历对象和数组
第一个参数是数组或对象的索引，
第二个是回调函数，2个参数，1.对象的成员或数组的索引，2.对应变量或内容
如果要退出each循环，返回false即可。

4.$.ajax() 最底层的Ajax实现

$.ajax(options) 只有一个参数，包含了所需要的请求设置以及回调函数等信息
常用参数：
1.url:发送请求的地址
2.type:请求的方式
3.timeout:请求超时时间，单位是毫秒，此设置将覆盖$.ajaxSetup()方法的全局设置
4.data:如果已经不是字符串，将自动转换为字符串，get请求将附加在url之后。防止这种转换可以查询processData选项。对象必须为key/value格式，例如：{fool:"bar",foo2""bar2"}转换为，
&fool=bar1&foo2=bar2,如果是数组，将自动为不同的值对应一个名称，例如：{foo:["bar1","bar2"]}
5.dataType:返回数据的格式，不指定会根据Http的mone信息返回 responseXML或responseText
可用类型如下：xml,html,script,json,jsonp,text
6.beforSend:请求前指定的函数，返回false可取消ajax请求
7.complete:请求完成后调用的回调函数
function(XMLHttpRequest,textStatus){}
8.success:请求成功后的回调函数，两个参数1.服务器返回并根据datatype参数进行处理后的数据
  2.描述状态的字符串
9.error:请求失败时的回调函数，三个参数：1.XMLHttpRequest对象，错误信息，捕获的错误对象
10.global:默认为true，表示是否触发全局ajax事件，设置为false将不会触发全局ajax。ajaxAtart或AjaxStop可用于控制各种Ajax事件

序列化元素
1.serialize() 将dom元素内容序列化为字符串用户ajax请求

 

 <form id="form1" runat="server">
    <div>
        <label id="lbl_name">
            用户名：</label><input id="name" name="youname" />
        <label id="lbl_pwd">
            密码：</label><input id="pwd" name="youpwd" />
        <input id="sub" type="submit" value="submit" />
    </div>
    </form>

 

<script type="text/javascript">
        $(function() {
            $("#form1").submit(function() {
                alert($(this).serialize());
                //return false;

            });

        })
    </script>

输出结果：

 

注意：1.在像服务器传送参数时必须在submit函数中，远程服务器才可以获取

        2.空间必须有name属性

输出序列化表单值的结果：

$("button").click(function(){
  $("div").text($("form").serialize());
});

定义和用法

serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。

您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。

序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

语法

$(selector).serialize()

详细说明

.serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。

表单元素有几种类型：

<form>
  <div><input type="text" name="a" value="1" id="a" /></div>
  <div><input type="text" name="b" value="2" id="b" /></div>
  <div><input type="hidden" name="c" value="3" id="c" /></div>
  <div>
    <textarea name="d" rows="8" cols="40">4</textarea>
  </div>
  <div><select name="e">
    <option value="5" selected="selected">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select></div>
  <div>
    <input type="checkbox" name="f" value="8" id="f" />
  </div>
  <div>
    <input type="submit" name="g" value="Submit" id="g" />
  </div>
</form>

.serialize() 方法可以操作已选取个别表单元素的 jQuery 对象，比如 <input>, <textarea> 以及 <select>。不过，选择 <form> 标签本身进行序列化一般更容易些：

$('form').submit(function() {
  alert($(this).serialize());
  return false;
});

输出标准的查询字符串：

a=1&b=2&c=3&d=4&e=5

注释：只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单，则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中，元素必须使用 name 属性。

2.serializeArray() 序列化成json格式

3.$.param() 是 serialize()方法的核心，用于对一个数组 或对象按照key/value进行序列化

Ajax全局事件
ajaxStart() 在请求开始执行
ajaxStop()  在请求结束执行
ajaxComplete()请求完成时执行
ajaxError() 发生错误时执行，捕捉到的错误可以作为最后一个参数传递
ajaxSend()请求发送前执行
ajaxSuccess（）请求成功时执行

如果想使某个ajax请求不受全局方法的影响，可以将global设为false