Ajax原理及简介
我知道Ajax是google的 google map应该，我们都知道，b/s架构跟c/s架构的区别。所谓的C/S架构其实就是我们常说的胖客户端，需要我们将程序部署到各个客户端上，费时，费力，容易出错，但是也有好处，就是响应能力强，典型的又QQ之类的程序，那B/S架构呢？也就是通俗的网站，程序部署在服务器上，我们通过浏览器浏览内容，B/S是基于HTTP的协议，而HTTP协议的典型特征就是无状态，什么是无状态，就是客户端不能记住我们操作的状态，或者数据。举一个最简单的例子。
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="Mytext" runat="server"></asp:TextBox>
<asp:Button ID="MyButton" Text="Check here" runat="server"
onclick="MyButton_Click" />
</div>
</form>
</body>
这里我们有一个最简单的ASP.NET页面，所要实现的功能也是很简单的，一个文本框一个按钮，要实现的功能就是点击一个按钮，文本逛里的数字就加一。
后台代码
public partial class WebForm1 : System.Web.UI.Page
{
int value = 0;
protected void Page_Load(object sender, EventArgs e)
{
}
protected void MyButton_Click(object sender, EventArgs e)
{
value++;
this.Mytext.Text = value.ToString();
}
}
可是结果却是无论我怎么点击，textbox的值始终是1，但是再winfrom程序里就可以达到我们要的效果，至于原因，我会在ASP.NET的文章里解释，这里只简单的说一下，因为HTTP实际也是请求----响应，一次请求一次响应，彼此之间的请求响应是不互相联系的。那么在我们与浏览器产生交互的时候实际上是向服务器请求数据，然后服务器返回数据给我们。这里就有几个问题，就是每次我们都需要服务器的响应。如果我们想向服务器响应的只是一小部分内容而不是正个页面，这时也还是会返回整个页面，造成长时间的等待，比如验证数据。二就是每次操作都需要往返，用户的体验不好。而Ajax就是为了解决这个问题
AJAX（Asynchronous JavaScript and XML）异步Javascript和XML。先看原理图
解释一下这幅图
1，用户触发页面事件产生交互，调用事件处理函数
2，事件处理函数利用ajax核心的XMLHttpRequest异步向服务器发起请求
3，服务器响应，触发XMLHttpRequest定义的回调函数
4，根据一系列的属性检测返回状态，如果成功执行代码，如果不成功提示用户
这跟正常的请求响应方式有所不同，但是也不是那么难理解，其实就是整个请求是异步的，异步请求，然后服务器返回，我们处理代码。
那么我们刚刚看到了基本原理，也看了AJAX的核心其实就是XMLHttpRequest。现在就介绍一些这个对象，然后看看这个对象怎么使用，这里介绍的例子都是只返回纯文本格式，其实服务器返回的内容的格式可以是XML，也可以是JSON。这里为了简单，返回的都是纯文本。服务器技术为ASP.NET。
XMLHttpRequest最早是在IE5中引进的，但是各个浏览器所实现的标准不一样，所以我们在创建的时候要注意，我在Javascript的文章中有写到怎么检测浏览器，可以参考。这里我们采用的是对象/特性检测法
var xmlHttp;
function CreateXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
xmlHttp = new XMLHttpRequest();
}
}
这里我们创建的是一个全局的变量，也可以使这个函数返回值来创建一个局部变量。
下面来看看XMLHttpRequest对象的一些属性
onreadystatechange //这是一个很重要的属性，即XMLHttpRequest的每个状态改变时都会触发这个事件，即如果我们异步的发送一个请求，请求回来就是改变状态。通常会有一个事件处理函数。
readyState //这个属性同样重要，请求的状态。0=未初始化，1=正在加载，2=已加载，3=交互中，4=完成，我们根据状态做不同的操作
responseText //服务器的响应，表示为一个串
responseXML //服务器的响应，表示为XML。这个对象可以解析为一个DOM对象。
statusText //http状态码的相应文本（OK或NotFound：404）
XMLHttpRequest的一些方法
abort() //停止当前请求
getAllResponseHeaders() //把HTTP请求的所有响应首部作为键值对返回
getResponseHeader("header") //返回指定首部的串值
open("method","url") //建立对服务器的调用。methed参数可以的get，post或put。url参数可以是相对url或绝对url，这个方法还包含3个可选参数。
send(content) //向服务器发送请求
setRequestHeader("header","value") //把指定首部设置为所提供的值。在任何设置首部之前必须先调用open().
open方法的完整参数open("method","url","asynch","username","password")，asynch指示是否是异步，默认为true。后面可以指定一个用户名和密码
我们要注意的是Contect-Type的类型和是否缓存结果，要是不想缓存结果可以设置成response.setHeader("Cache—Control","no-cache");或者response.setHeader("pragma","no-cache");
Get和Post的区别
get和post的区别
1 get是从服务器获取数据，而post则是向服务器提交数据
2 get请求的数据会明文的附在在url后，以?的形式分割，而post则是把数据附在HTTP包的包体中
3 根据第二点，post比get安全性高
4 IE会对URL长度限制，即get的长度限制（2083字节），而Netscape、FireFox等，理论上没有长度限制，其限制取决于操作系统的支持。
get和post的区别参考于http://www.cnblogs.com/hyddd/archive/2009/03/31/1426026.html，如想了解更多信息，请参考以上连接。
简单的AJAX示例
这个示例非常简单，一个文本框，一个按钮。点击按钮，文本框显示服务器端返回的“Hello World”
首先我们定义一个函数，这个函数的作用就是实例化一个XMLHttpRequest，我们之前定义过
var xmlHttp;
function CreateXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
xmlHttp = new XMLHttpRequest();
}
}
然后我们定义另外一个函数，这个函数用于异步向服务器发送请求
function startRequest() {
CreateXMLHttpRequest();
var url = "HelloWorld.ashx";
xmlHttp.onreadystatechange = handleStateChange
xmlHttp.open("GET", url.toString());
xmlHttp.send(null);
}
我们这里的服务端使用的是一般处理程序，ASP.NET还可以使用WebService和后置代码，这个以后再讲
然后我们就可以定义回调函数了
function handleStateChange() {
if(xmlHttp.readyState==4)
{
if (xmlHttp.Status == 200) {
var otext = document.getElementById("MyText");
otext.value = xmlHttp.responseText;
}
}
}
html代码
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="MyText" />
<input type="button" id="MyButton" value="Check me" onclick="startRequest()"/>
</div>
</form>
</body>
HelloWorld.ashx代码
public class HelloWorld : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Write("Hello World");
}
public bool IsReusable
{
get
{
return false;
}
}
}
点击按钮，文本框显示HelloWorld。在这里HelloWorld字符串太短，这个过程我们看不清楚，那我们就返回比较长的字符串来看看效果，我们只需要改动HelloWorld.ashx代码
public class HelloWorld : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string s = "";
context.Response.ContentType = "text/plain";
for (int i = 0; i < 9000000; i++)
{
s = i.ToString();
}
context.Response.Write("Complete!");
}
public bool IsReusable
{
get
{
return false;
}
}
}
执行循环来延迟服务器响应时间。这时我们就可以看到异步的详细了。我们还可以添加一些东西来完善，比如我们经常看到的loading...
需要改动的只是HTML文件
完整代码如下
<head runat="server">
<title></title>
<script type="text/javascript">
var xmlHttp;
function CreateXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
xmlHttp = new XMLHttpRequest();
}
}
function startRequest() {
CreateXMLHttpRequest();
var url = "HelloWorld.ashx";
xmlHttp.onreadystatechange = handleStateChange
xmlHttp.open("GET", url.toString());
xmlHttp.send(null);
}
function handleStateChange() {
if (xmlHttp.readyState == 1) {
var oimage = document.getElementById("MyImg");
oimage.style.display = "";
}
if(xmlHttp.readyState==4)
{
if (xmlHttp.Status == 200) {
var oimage = document.getElementById("MyImg");
oimage.style.display = "none";
var otext = document.getElementById("MyText");
otext.value = xmlHttp.responseText;
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="MyText" />
<input type="button" id="MyButton" value="Check me" onclick="startRequest()"/>
<img id="MyImg" alt="" src="Image/loading.gif" style="display:none" />
</div>
</form>
</body>
当XMLHttpRequest的状态为正在加载时显示loading的图片，完成时隐藏。你还可以设置loading图片的CSS，自定义图片，总之是任何你想要的样式。
基本的AJAX这里就介绍完了，下面要介绍的就是在ASP.NET中怎么异步访问WebService和后台代码。然后还有怎么传输复杂格式如json.
