Ajax笔记汇总

什么是AJAX?

AJAX:”Asynchronous JavaScript and XML”
中文意思：异步JavaScript和XML。
指一种创建交互式网页应用的网页开发技术。

不是指一种单一的技术，而是有机地利用了一系列相关的技术：
简单理解为：JavaScript + XMLHttpRequest + CSS +服务器端的集合.@H_404_14@

@H_404_14@

AJAX优点：

Ajax在本质上是一个浏览器端的技术
Ajax技术之主要目的在于局部交换客户端及服务器间之数据
这个技术的主角XMLHttpRequest 的最主要特点，在于能够不用重新载入整个版面来更新资料，也就是所谓的Refresh without Reload(轻刷新)
与服务器之间的沟通，完全是透过Javascript 来实行
使用XMLHttpRequest 本身传送的数据量很小，所以反应会更快，也就让网络程式更像一个桌面应用程序
AJAX 就是运用Javascript 在后台悄悄帮你去跟服务器要资料，最后再由Javascript 或DOM 来帮你呈现结果，因为所有动作都是由Javascript 代劳，所以省去了网页重载的麻烦，使用者也感受不到等待的痛苦@H_404_14@

@H_404_14@

XMLHttpRequest对象：

Ajax应用程序的核心就是它。
XMLHttpRequest对象在IE浏览器和非IE浏览器中创建的方法不同。

简而言之：它可以异步从服务器端获取txt或者xml数据@H_404_14@

异步请求基本步骤：

使用XMLHttpRequest对象

按照下面模式，可以同步地XMLHttpRequest对象：

1.创建对象； - new (叫助手过来)

2.创建请求； - open (告诉他要去做的事情)

3.发送请求； - send (去吧)

创建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;
}

@H_404_14@

设置异步对象参数并发送请求：

二、为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,Safari
xhobj = new XMLHttpRequest();
}
return xhobj;
}

@H_404_14@

设置回调函数：

异步使用XMLHttpRequest对象
异步使用XMLHttpRequest对象时，必须使用：onreadystatechange事件。
使用模式应该是：
创建该对象；-new
设置readystatechange事件触发一个回调函数; -onreadystatechagne
打开请求；-open
发送请求；-send
注：在回调函数中检查readyState属性，看数据是否准备就绪(是否等于4)。
如果没有准备好，隔一段时间再次检查。因为数据没有下载完时，我们无法使用它的属性和方法。
如果已经准备好，就继续往下执行；@H_404_14@

编写回调函数：

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);
}
}

@H_404_14@

异步对象readyState属性：

readyState属性
readyState属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5种不同的状态。
0：未初始化。new完后;
1：已打开。对象已经创建并初始化，但还未调用send方法
2：已发送。已经调用send 方法，但该对象正在等待状态码和头的返回；
3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整；
4：已加载。所有数据接收完毕@H_404_14@

@H_404_14@

回调函数：用户定义，系统调用。

@H_404_14@

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;
}

@H_404_14@

扩展：使用C#中JavaScriptSerializer类将对象转换为Json格式数据@H_404_14@

常见错误：

AJAX请求服务器时如果服务器出错了怎么办？
编程常见错误
XMLHttpRequest大小写不正确；
多写了对圆括号：
正确：xHRObject.onreadystatechange =getData;
错误：xHRObject.onreadystatechange =getData();
必须弄清楚，在JavaScript中：
函数名后如果有圆括号，意思就是将函数的返回值赋给等号左边的变量；
没有圆括号，是将函数本身赋给等号前的变量。@H_404_14@

页面想一般处理程序传参及接收数据：@H_404_14@

Get方式：@H_404_14@

方式一：@H_404_14@

//添加评论
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('服务器内部错误！');
}
});

} //添加评论结束@H_404_14@

@H_404_14@

方式二：@H_404_14@

//根据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获取照片信息结束@H_404_14@

@H_404_14@

Post方式：@H_404_14@

//添加照片或修改照片
$("#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 + "\",\"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("服务器内部错误");
}
})
})@H_404_14@

@H_404_14@

$.post();用法示例：@H_404_14@

$.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);
});@H_404_14@

@H_404_14@

相册完整项目（含Ajax）_标准.rar@H_404_14@

@L_404_3@@H_404_14@

@H_404_14@

==================================@H_404_14@

扩展：@H_404_14@

1.jQuery.post(url,[data],[callback],[type])@H_404_14@

 
      
    
1.jQuery.post(url,[type])

url,[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"); 
      
    

@H_404_14@

2.jQuery.getJSON(url,[callback])@H_404_14@

jQuery.getJSON(url,[callback])

参数:
url,[callback] String,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);
});

Ajax笔记汇总

Ajax笔记汇总

相关文章