.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优点

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常用方法

编写回调函数

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属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5种不同的状态。

• 0：未初始化。对象已经创建，但还未初始化，即还没调用open方法；
• 1：已打开。对象已经创建并初始化，但还未调用send方法；
• 2：已发送。已经调用send 方法，但该对象正在等待状态码和头的返回；
• 3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整；
• 4：已加载。所有数据接收完毕

常见错误

1. AJAX请求服务器时如果服务器出错了怎么办？
2. 编程常见错误

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最重要的问题是无法跨域请求，也就是无法在页面中向和当前域名不同的页面发送请求，可以使用在当前页面所在的域的服务端做代理页面的方式解决。