.NET ASP.NET（Ajax）
Ajax编程技术
什么是Ajax?
AJAX:”Asynchronous JavaScript and XML”
中文意思：异步JavaScript和XML。
指一种创建交互式网页应用的网页开发技术。
AJAX并非缩写词,而是由Jesse James Gaiiett创造的名词。
不是指一种单一的技术，而是有机地利用了一系列相关的技术：
web标准( Standards-Based Presentation )XHTML+CSS的表示,
使用 DOM( Document Object Model )进行动态显示及交互,
使用 XML 和 XSLT 进行数据交换及相关操作,
使用 XMLHttpRequest 进行异步数据查询、检索。
简单理解为：JavaScript + XMLHttpRequest + CSS +服务器端 的集合
普通的网页请求回执过程(请求响应模式)
使用原生态Ajax进行登录
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var btn = document.getElementById("mybtn");
btn.onclick = function () {
var name = document.getElementById("txtname").value;
var pwd = document.getElementById("txtpwd").value;
//先创建AJAX对象
var xhr;
if (window.XMLHttpRequest) {
//IE7+, Firefox, Chrome, Opera, Safari浏览器
xhr = new XMLHttpRequest();
}
else {
xhr = new XMLHttpRequest("Microsoft.XMLHTTP");
}
//向服务器发送请求
xhr.open("get", "01Ajax.ashx?name=" + name + "&pwd=" + pwd, true);
xhr.send();//开始向服务器发送请求
//当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。
//回调函数：当服务器将数据返回给客户端之后自动调用的函数
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {//表示服务器已经将请求的数据分析完成之后，将结果返回，并且保证浏览器接收到了请求结果
if (xhr.status == 200) {//表示响应已经彻底完成
alert(xhr.responseText);
}
}
}
}
}
</script>
</head>
<body>
<form action="01Ajax.ashx" method="get">
<input type="text" name="name" id="txtname" value="" />
<br />
<input type="password" name="pwd" id="txtpwd" value="" />
<br />
<input type="button" value="提交" id="mybtn"/>
</form>
</body>
服务器端处理Ajax请求
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/html";
string name = context.Request["name"];
if (string.IsNullOrEmpty(name))
{
string html = CommonHelper.ShowHtml("01Ajax.html", null);
context.Response.Write(html);
}
else
{
string pwd = context.Request["pwd"];
if (name=="ylt"&&pwd=="123")
{
context.Response.Write("登录成功");
}
else
{
context.Response.Write("登录失败");
}
}
}
Ajax优点
（1）Ajax在本质上是一个浏览器端的技术
（2）Ajax技术之主要目的在于局部交换客户端及服务器间之数据
（3）这个技术的主角XMLHttpRequest 的最主要特点，在于能够不用重新载入整个版面来更新资料，也就是所谓的Refresh without Reload(轻刷新)
（4）与服务器之间的沟通，完全是透过Javascript 来实行
（5）使用XMLHttpRequest 本身传送的数据量很小，所以反应会更快，也就让网络程式更像一个桌面应用程序
（6）AJAX 就是运用Javascript 在后台悄悄帮你去跟服务器要资料，最后再由Javascript 或DOM 来帮你呈现结果，因为所有动作都是由Javascript 代劳，所以省去了网页重载的麻烦，使用者也感受不到等待的痛苦
XMLHttpRequest对象
（1）Ajax应用程序的核心就是它。
（2）XMLHttpRequest对象在IE浏览器和非IE浏览器中创建的方法不同。
（3）简而言之：它可以异步从服务器端获取txt或者xml数据
创建XMLHttpRequest对象
使用XMLHttpRequest对象按照下面模式，可以同步地XMLHttpRequest对象：
（1）创建对象； - new (叫助手过来)
（2）创建请求； - open (告诉他要去做的事情)
（3）发送请求； - send (去吧)
先来创建XMLHttpRequest对象
IE7及以上、谷歌、Firefox、safari和Opera中创建该对象的JavaScript代码为：
var xhr = new XMLHttpRequest();
在IE5/6中代码为：
var xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
注意，JavaScript区分大小写。
为XMLHttpRequest对象设置请求参数
GET方式
（1）设置参数：xhr.open(“GET”, “GetAreasByAjax.ashx?isAjax=1”, true);
（2）GET方式请求可以设置浏览器不使用缓存：xhr.setRequestHeader(“If-Modified-Since”, “0”);
（3）发送: xhr.send(null);//GET方式
POST方式
（1）设置参数：xhr.open(“POST”, “GetAreasByAjax.aspx”, true);
（2）添加请求头：xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
（3）发送：xhr.send(“isAjax=1&na=123”);//POST方式
问题：请求发送出去后会有响应回来，那我怎么知道请求已经返回了呢？
设置回调函数
异步使用XMLHttpRequest对象
异步使用XMLHttpRequest对象时，必须使用：onreadystatechange事件。
使用模式应该是：
（1）创建该对象；-new
（2）设置readystatechange事件触发一个回调函数; -onreadystatechagne
（3）打开请求；-open
（4）发送请求；-send
** 注：在回调函数中检查readyState属性，看数据是否准备就绪(是否等于4)。**
如果没有准备好，隔一段时间再次检查。因为数据没有下载完时，我们无法使用它的属性和方法。
如果已经准备好，就继续往下执行；
XMLHttpRequest常用方法
异步对象常用属性：
异步对象readyState属性
readyState属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5种不同的状态。
0：未初始化。对象已经创建，但还未初始化，即还没调用open方法；
1：已打开。对象已经创建并初始化，但还未调用send方法；
2：已发送。已经调用send 方法，但该对象正在等待状态码和头的返回；
3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整；
4：已加载。所有数据接收完毕
异步对象status属性
200: “OK”
404: 未找到页面
500：服务器出现异常则直接去服务器检查异步请求的问题
常见错误
AJAX请求服务器时如果服务器出错了怎么办？
编程常见错误
XMLHttpRequest大小写不正确；
多写了对圆括号：
正确：xHRObject.onreadystatechange =getData;
错误：xHRObject.onreadystatechange =getData();
必须弄清楚，在JavaScript中：
函数名后如果有圆括号，意思就是将函数的返回值赋给等号左边的变量；
没有圆括号，是将函数本身赋给等号前的变量。
面试题：
AJAX解决什么问题？如何使用AJAX？AJAX有什么问题需要注意？项目中哪里用到了AJAX？
异步问题；
首先下载ajax.dll————ajax插件；把ajax.dll导入到项目；XMLHttpRequest对象；
Ajax应用需要注意的事项：
现在把常见的问题列举如下。
1、编码问题
注意AJAX要取的文件是UTF-8编码的。GB2312编码传回BROWSE后中文会乱码。如果用VBScript的话还可以转化，但是VBScript只有IE支持。
所以，选择UTF-8编码是一劳永逸的办法。
2、清除服务器端文件的缓存。
当用XMLHTTP取回一个服务器端的文件，文件会缓存在浏览器端。下次再取文件时，不会再去服务器取文件。所以，对于刷新频繁的文件，一定要指定文件的过期时间。
3、什么时候使用XML
Ajax里的X指的就是XML，可是真的XML就是最好的解决方案吗?XML和JSON相比，在传递同等量的信息时，XML文件更大。所以往往JSON是更好的选择。不过，你还可以直接输出Javascript执行，这样的效率往往更高：不需要写复杂的回调函数。不过安全问题也要更加注意。
4、两种Ajax的方式
一些人的基础可能还不是很扎实，并不非常了解Ajax的原理，那你知道Ajax由哪两种方式来实现吗?
最古老的一种是iframe来加载一个包含js的网页，这个网页里的脚本用 top.function来调用parent页面里的函数。但是，你可以指定a的target和form的target，这样就不用序列化表单，实际上能很方便地发送表单。当然后期就稍微有点麻烦，出现问题也不容易解决。
后来就是xmlhttp组件的方式。什么时候挑选什么方式，这也是一种技巧。
5、跨域问题
如果一个脚本不在同一个域，两者就不能相互调用。如果iframe里是其他域的网页，就不能访问parent页的具体内容。如果需要访问远程的XML，比如RSS FEED，建议可以用服务器端脚本来中转。在访问量不是非常大的情况下还是很很好的一个解决办法。不过，翻阅JQuery手册发现它能调用(执行)跨域的脚本，具体怎么做的还不是很清楚。大家可以下载JQUERY未加密的版本来研究下。
6、安全问题
在服务器端，虽然客户端能预处理很多东西，你仍要注意一句话：一切来自客户端的变量都是有害的。不在Ajax的情况下很多程序员往往会放松警惕。这使得安全问题更隐蔽。如果是开源程序的话那么问题就会在网友面前马上暴露出来;黑盒的情况下，往往被入侵了还是找不出原因。
结语：实际上在这个框架横行的年代直接编写Ajax实现代码的机会并不多，很多JS框架都集成了AJAX调用函数，一些服务器端的框架，例如THINKPHP也集成了AJAX。但是，理解一些底层的东西，还是有利于排除BUG，提高AJAX应用的性能的。
项目中哪里用到了AJAX：
表单验证
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下使用。AJAX的核心：向服务器发送多个请求而无需用户等待来至服务器的响应。
AJAX解决的问题就是“无刷新更新页面”，用传统的HTML表单方式进行页面的更新时，每次都要将请求提交到服务器，服务器返回后再重绘界面，这样界面就会经历：提交→变白→重新显示这样一个过程，用户体验非常差，使用AJAX则不会导致页面重新提交、刷新。
AJAX最本质的实现是在Javascript中使用XMLHttpRequest进行Http的请求，开发中通常使用UpdatePanel、JQuery等方式简化AJAX的开发，UpdatePanel的方式实现AJAX最简单，但是数据通讯量比较大，因为要来回传整个ViewState，而且不灵活，对于复杂的需求则可以使用JQuery提供的ajax功能。
UpdatePanel的内部原理。
AJAX最重要的问题是无法跨域请求，也就是无法在页面中向和当前域名不同的页面发送请求，可以使用在当前页面所在的域的服务端做代理页面的方式解决。
上一篇： Asp.Net MVC 使用 Ajax
下一篇： 计算机内部的二进制存储