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 代劳，所以省去了网页重载的麻烦，使用者也感受不到等待的痛苦

注意事项：
//1 XMLHttpRequest 注意大小写
//2 当通过url发送数据，数据是中文的时候会出现乱码。对发送的中文进行url编码
//3 不读取浏览器的缓存 1 在url后加随机数 2 设置请求头 request.setRequestHeader("If-Modified-Since", "0");
//4 根据响应码 判断服务器是否出现错误
//5 路径中不能出现中文

//1 创建对象 get
var request=createXHR();
function createXHR()//创建xhr对象
{
　　var xhr;
　　if(window.XMLHttpRequest)
　　{ //在firefox、Chrome中的创建方式
　　xhr=new XMLHttpRequest();
　　}else
　　{
　　　　xhr=new ActiveXObject("Microsoft.XMLHTTP");
　　}
　　return xhr;
　　}
　　function send()
　　{
　　//2 创建请求（请求没有发送） 第三个参数 同步（false） 异步（true）

　　//当get的时候URL的参数中有汉字需要进行url编码
var n=encodeURLComponent("张三");
requset.open("get","commen.ashx?name="+n,true);
//告诉浏览器不缓存数据
request.setRequestHeader("If-Modified-Since","0");
//3 注册事件
request.onreadystatechange=function(){
//已经接收完服务器的响应
if(request.readyState==4)
{
//当服务器返回的状态码是200的时候才显示数据
if(request.status==200)
{
var msg=request.ResponseText;
}
}else
{

}
}
//4 发送请求
request.send();
}
//1 创建对象 post
var requset=createXHR();
function createXHR(){
var xhr;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else
{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
function login(){
var msgSpan=document.getElementById("msg");
var name=document.getElementById("txtName").value;
var pwd=document.getElementById("txtPwd").value;
var data="name="+name+"pwd="+pwd;
//2 创建请求
request.open("post","login.ashx",true);
//设置Content-Type
request.setRequsetHeader("Content-Type","application/x-www-form-urlencoded");
//3 注册事件
request.onreadystatechage=function(){
if(request.readyState==4&&request.status==200){
//根据服务器返回值，判断是否登陆成功
var msg=request.ResponseText;
}
}
//4 发送post数据
requset.send(data);
}

//将序列化成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;
}

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

C#中将.Net对象序列化为Json字符串的方法：JavaScriptSerializer().Serialize(p)，
JavaScriptSerializer在System.Web.Extensions.dll中，是.Net3.x 中新增的类。
完整：System.Web.Script.Serialization.JavaScriptSerializer