第6章 jQuery中的Ajax应用

Ajax的概念：客户端js所引起的http请求代号(是JavaScript,XML,XMLHttpRequest等各项技术的综合应用)
Ajax的特点：无刷新的数据更新,不能跨域访问
Ajax的核心是:XMLHttpRequest对象.
Ajax示例:

var xmlHttpReq=new XMLHttpRequest();    //创建XMLHttpRequest对象
    xmlHttpReq.open("get","firstHandler.ashx",true);    //调用open()方法,true=>采用异步方式
    xmlHttpReq.onreadystatechange=function(){    //设置回调函数
            if(xmlHttpReq.readyState==4&&xmlHttpReq.status==200)    //监控状态的返回
            {
                alert(xmlHttpReq.responseText);        //输出从服务器接受的数据
            }
        }
    xmlHttpReq.send();    //发送HTTP请求

 

JQuery中的Ajax
jQuery对Ajax操作进行了三层封装:
1  $.ajax()方法,属于最底层的方法,因此可以代替第二三层的所有方法
2  第2层是load(), $.get(), $.post()三个方法
3  第3层是$.getScript()和$.getJSON()方法
一般随着层数的递增,调用越简单

jQuery.ajax()方法: $.ajax(options) 
options中包含了的常用参数有
 url:发送请求的地址
 type:请求方式
 data:发送到服务器的数据,一般是json格式(即Key/Value格式),如:{"stuname":"张三","stuAge":"20"}
 dataType:服务器返回的数据类型
 success:请求成功后的回调函数

//示例1:
 $(function () {
            $("#btnSend").click(function () {
                $.ajax({
                    url: "http://localhost:1105/$ajax_post/Handler.ashx",
                    dataType: "text",
                    type: "post",
                    data: { "stuName": "张三", "stuAge": "22", "stuSex": "男" },
                    success: function (data) {
                        alert(data);
                    }
                });
            });
        });

//示例2:    
    $(function () {
            $("#btnGetClass").click(function () {
                $.ajax({
                    type: "post",
                    url: "http://localhost:1105/Handler.ashx",
                    dataType: "JSON",
                    timeout: 2000,
                    error: function () { alert("数据加载错误"); },
                    success: function (data) {
                        $("#ddlClass").empty();        //每次加载时清空下拉框
                        $("<option>" + "--请选择--" + "</option>").appendTo("#ddlClass");    //加载时设置下拉框的第一项为请选择
                        $.each(eval(data), function (i, item) {
                            $("<option>" + item["Classname"] + "</option>").attr("value", item["ClassID"]).appendTo($("#ddlClass"));    //从服务器获取数据并追加到下拉框中
                        })
                    }
                })
            });
        });

 

jQuery.get()方法和jQuery.post()方法: $.get/post(url,[data],[callback],[type]);
它们之间的区别:get()在服务器端用QueryString[]获取值
  post()用json格式传参,在服务器端用Form[]取值.

//示例:
    $(function(){
        $("#btnSend").click(function(){
          $.get("MyHandler.ashx",
          {
            username:$("#txtusername").val(),
            contact:$("#txtContact").val(),
            message:$("#txtmessage").val()
          },function(data,textStatus){
            $("#divContent").append(data);    //把返回的数据追加到div中
            alert(textStatus);    //返回请求状态
           }
        );
        });
    });

 

JQuery中的load()方法: load([data],[callback])
一般利用它去加载指定的页面或内容

//示例:
    $(function(){
       $("#btnLoad").click(funtion(){
        var url=$("#txtUrl").val();
        $("#txtComment").load(url);
         });
    });

 

jQuery中的$.getScript()方法和$.getJSON()方法 
$.getScript/getJSON(url,callback) url=>待载入的js文件或json文件

//示例:
$(function(){
       $("#btnLoad").click(funtion(){
        $.getJSON("student.json",    //引入事先写好的名为"student"的json文件
            function(data){
              $.each(data,function(i,item){        //$.each()通用遍历方法,遍历对象和数组
                alert(item.stuName+" "+item.stuAge+" "+item.stuSex);
            });
           }
        );
         });
    });

 

序列化元素:serialize(),serializeArray()和$.param()方法.
$.param是serialize()方法的核心,将一个数组或对象按照key/value进行序列化,例:
 var obj={a:1, b:2, c:3};
 var k=$.param(obj);
serialize()序列化后返回字符串.
serializeArray():与serialize()类似,但它返回json对象

jQuery中的Ajax全局事件
ajaxSend(callback):AJAX请求发送前执行的函数
ajaxError(callback):AJAX请求发生错误时执行的函数
ajaxSuccess(callback):AJAX请求成功时执行的函数
ajaxComplete(callback):AJAX请求完成时执行的函数