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请求完成时执行的函数