Ajax笔记汇总
什么是AJAX?
AJAX:”Asynchronous JavaScript and XML”
中文意思：异步JavaScript和XML。
指一种创建交互式网页应用的网页开发技术。
不是指一种单一的技术，而是有机地利用了一系列相关的技术：
简单理解为：JavaScript + XMLHttpRequest + CSS +服务器端 的集合.
AJAX优点：
Ajax在本质上是一个浏览器端的技术
Ajax技术之主要目的在于局部交换客户端及服务器间之数据
这个技术的主角XMLHttpRequest 的最主要特点，在于能够不用重新载入整个版面来更新资料，也就是所谓的Refresh without Reload(轻刷新)
与服务器之间的沟通，完全是透过Javascript 来实行
使用XMLHttpRequest 本身传送的数据量很小，所以反应会更快，也就让网络程式更像一个桌面应用程序
AJAX 就是运用Javascript 在后台悄悄帮你去跟服务器要资料，最后再由Javascript 或DOM 来帮你呈现结果，因为所有动作都是由Javascript 代劳，所以省去了网页重载的麻烦，使用者也感受不到等待的痛苦
XMLHttpRequest对象：
Ajax应用程序的核心就是它。
XMLHttpRequest对象在IE浏览器和非IE浏览器中创建的方法不同。
简而言之：它可以异步从服务器端获取txt或者xml数据
创建XMLHttpRequest对象：
一、先来创建XMLHttpRequest对象
在IE、Firefox、safari和Opera中创建该对象的JavaScript代码为：
var xhr = new XMLHttpRequest();
在IE5/6中代码为：
var xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
注意，JavaScript区分大小写。
备注：
function createXmlHttp() {//创建xhr对象
var xhobj = false;
try {
xhobj = new ActiveXObject("Msxml2.XMLHTTP"); // ie msxml3.0+
} catch (e) {
try {
xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml2.6
} catch (e2) {
xhobj = false;
}
}
if (!xhobj && typeof XMLHttpRequest != 'undefined') {// Firefox, Opera 8.0+, Safari
xhobj = new XMLHttpRequest();
}
return xhobj;
}
设置异步对象参数并发送请求：
二、为XMLHttpRequest对象设置请求参数
1.GET方式
1.1设置参数
xhr.open("GET", "GetAreasByAjax.ashx?isAjax=1", true);
1.2GET方式请求可以设置浏览器不使用缓存 xhr.setRequestHeader("If-Modified-Since", "0");
1.3发送: xhr.send(null);//GET方式
2.POST方式： 1.1设置参数：xhr.open("POST", "GetAreasByAjax.aspx", true); 1.2添加请求头：xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
1.3发送：xhr.send("isAjax=1&na=123");//POST方式
备注：
function createXmlHttp() {//创建xhr对象
var xhobj = false;
try {
xhobj = new ActiveXObject("Msxml2.XMLHTTP"); // ie msxml3.0+
} catch (e) {
try {
xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml2.6
} catch (e2) {
xhobj = false;
}
}
if (!xhobj && typeof XMLHttpRequest != 'undefined') {// Firefox, Opera 8.0+, Safari
xhobj = new XMLHttpRequest();
}
return xhobj;
}
设置回调函数：
异步使用XMLHttpRequest对象
异步使用XMLHttpRequest对象时，必须使用：onreadystatechange事件。
使用模式应该是：
创建该对象；-new
设置readystatechange事件触发一个回调函数; -onreadystatechagne
打开请求；-open
发送请求；-send
注：在回调函数中检查readyState属性，看数据是否准备就绪(是否等于4)。
如果没有准备好，隔一段时间再次检查。因为数据没有下载完时，我们无法使用它的属性和方法。
如果已经准备好，就继续往下执行；
编写回调函数：
1.在xhr.send之前添加设置回调函数代码：
xhr.onreadystatechange = watching;
2.回调函数
function watching() {
if (xhr.readyState == 4) {//请求状态
if (xhr.status == 200) {//服务器返回的状态码
var msg = xhr.responseText; //服务器返回的字符串
} else alert("服务器错误!" + ajaxH.status);
}
}
异步对象readyState属性：
readyState属性
readyState属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5种不同的状态。
0：未初始化。new完后;
1：已打开。对象已经创建并初始化，但还未调用send方法
2：已发送。已经调用send 方法，但该对象正在等待状态码和头的返回；
3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整；
4：已加载。所有数据接收完毕
Json--B/S结构数据传递格式：
AJAX传递复杂数据如果自己进行格式定义的话会经历组装、解析的过程，因此AJAX中有一个事实上的数据传输标准JSon。Json（是一个标准，就像XML一样，Json规定了对象以什么样的格式保存为一个字符串）将复杂对象序列化为一个字符串，在浏览器端再将字符串反序列化为JavaScript可以读取的对象。看一下Json的格式。Json被几乎所有语言支持。
JSON是js对象的一个字面量表示法.
C#中将.Net对象序列化为Json字符串的方法：JavaScriptSerializer().Serialize(p)， JavaScriptSerializer在System.Web.Extensions.dll中，是.Net3.x 中新增的类。 完整：System.Web.Script.Serialization.JavaScriptSerializer
备注：
//将序列化成json格式后日期(毫秒数)转成日期格式
function ChangeDateFormat(cellval) {
var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
return date.getFullYear() + "-" + month + "-" + currentDate;
}
扩展：使用C#中JavaScriptSerializer类将对象转换为Json格式数据
常见错误：
AJAX请求服务器时如果服务器出错了怎么办？
编程常见错误
XMLHttpRequest大小写不正确；
多写了对圆括号：
正确：xHRObject.onreadystatechange =getData;
错误：xHRObject.onreadystatechange =getData();
必须弄清楚，在JavaScript中：
函数名后如果有圆括号，意思就是将函数的返回值赋给等号左边的变量；
没有圆括号，是将函数本身赋给等号前的变量。
页面想一般处理程序传参 及 接收数据：
Get方式：
方式一：
//添加评论
function AddComment() {
var pid = $('#HDpid').val();
var comment = $('#message').val();
//url编码 传汉字的时候需要url编码
comment = encodeURIComponent(comment);
$.ajax({
cache: false,
type: "get",
url: "handler/AddComment.ashx?p=" + pid + "&c=" + comment,
success: function (msg) {
if (msg == 0) {
alert("发布成功");
}
},
error: function () {
alert('服务器内部错误！');
}
});
} //添加评论 结束
方式二：
//根据pid获取照片信息
function LoadPhotoInfo() {
var pid = $('#HDpid').val();
$.getJSON("handler/GetPhotoById.ashx?p=" + pid + "&_=" + Math.random(), function (json) {
$('#PhotoTitle').text(json.PTitle); //一般处理程序将对象反序列化后返回 json.PTitle后面的字段名需要和类的字段名一致
$('#screen a').attr('href', "images/" + json.PUrl);
$('#screen img').attr('src', "images/" + json.PUrl);
$('#info p').text(json.PDes);
});
} //根据pid获取照片信息 结束
Post方式：
//添加照片 或 修改照片
$("#btnAdd").click(function () {
var t = $("#txtTitle").val();
var u = $("#txtUrl").val();
var d = $("#txtDes").val();
//以json的形式，把用户输入的数据post到服务器
var data = "json={\"PTitle\":\"" + t + "\",\"PUrl\":\"" + u + "\",\"PDes\":\"" + d + "\",\"PTypeId\":1}&type=" + addOrUpdate;
//修改
if (addOrUpdate == "2") {
var pid = $("#hdPid").val();
data = "json={\"PTitle\":\"" + t + "\",\"PUrl\":\"" + u + "\",\"PDes\":\"" + d + "\",\"PTypeId\":1,\"PId\":" + pid + "}&type=" + addOrUpdate;
}
//异步请求服务器添加数据
$.ajax({
type: "post",
url: "handler/06-AddPhoto.ashx",
data: data,
success: function (msg) {
if (msg == 1) {
//关掉层
$(".coverholder").closeCover();
//清空文本框
//....
if (addOrUpdate == "1") {
//重新加载数据
loadPhotos(1);
} else if (addOrUpdate == "2") {
loadPhotos(p);
}
//
addOrUpdate = -1;
} else {
$("#msg").text("操作失败");
}
},
error: function () {
alert("服务器内部错误");
}
})
})
$.post();用法示例：
$.post("/ashx/CutPhoto.ashx", { "action": "cut", "x": parseInt(x), "y": parseInt(y), "width": parseInt(width), "height": parseInt(height), "imgSrc": d[1] }, function (data) {
$("#imgSrc").attr("src", data);
});
==================================
扩展：
1.jQuery.post(url, [data], [callback], [type])
1.jQuery.post(url, [data], [callback], [type]) url,[data],[callback],[type] String,Map,Function,String url:发送请求地址。 data:待发送 Key/value 参数。 callback:发送成功时回调函数。 type:返回内容格式，xml, html, script, json, text, _default。 示例： 获得 test.ashx 页面返回的 json 格式的内容：： jQuery 代码: $.post("test.ashx", {"methodName": "getNameAndTime" }, function(json){ alert(json.name); //John console.log(json.time); //2pm }, "json");
2.jQuery.getJSON(url, [data], [callback])
jQuery.getJSON(url, [data], [callback]) 参数: url,[data],[callback] String,Map,Function url:发送请求地址。 data:待发送 Key/value 参数。 callback:载入成功时回调函数。 示例: 从 向test.ashx发送请求，附加参数，显示 JSON 数据中一个 name 字段数据。 jQuery 代码: $.getJSON("test.ashx", { name: "John", time: "2pm" }, function(json){ alert("JSON Data: " + json.users[3].name); });
35
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
