文稿案例配套asp

1、Ajax编程技术讲师：马伦北京传智播客教育 什么是AJAX?AJAX:”Asynchronous JavaScript and XML”中文意思：异步JavaScript和XML。指一种创建交互式网页应用的网页开发技术。不是指一种单一的技术，而是有机地利用了一系列相关的技术：简单理解为：JavaScript + XMLHttpRequest + CSS +服务器端 的集合.那，什么是交互式?普通的网页请求回执过程(请求响应模式)画例子画例子Ajax在本质上是一个浏览器端的技术 Ajax技术之主要目的在于局部交换客户端及服务器间之数据 这个技术的主角XMLHttpRequest 的最主要特点，在

2、于能够不用重新载入整个版面来更新资料，也就是所谓的Refresh without Reload(轻刷新)与服务器之间的沟通，完全是透过Javascript 来实行 使用XMLHttpRequest 本身传送的数据量很小，所以反应会更快，也就让网络程式更像一个桌面应用程序 AJAX 就是运用Javascript 在后台悄悄帮你去跟服务器要资料，最后再由Javascript 或DOM 来帮你呈现结果，因为所有动作都是由Javascript 代劳，所以省去了网页重载的麻烦，使用者也感受不到等待的痛苦AJAX优点XMLHttpRequest对象Ajax应用程序的核心就是它。XMLHttpRequest

3、对象在IE浏览器和非IE浏览器中创建的方法不同。简而言之：它可以异步从服务器端获取txt或者xml数据异步请求基本步骤使用XMLHttpRequest对象按照下面模式，可以同步地XMLHttpRequest对象：创建对象； - new (叫助手过来)创建请求； - open (告诉他要去做的事情)发送请求； - send (去吧)具体代码（获得服务器时间）创建XMLHttpRequest对象一、先来创建XMLHttpRequest对象在IE、Firefox、safari和Opera中创建该对象的JavaScript代码为：var xhr = new XMLHttpRequest();在IE5/

4、6中代码为：var xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”);注意，JavaScript区分大小写。设置异步对象参数并发送请求二、为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设置参数：

5、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方式是不是少了什么？请求发送出去后会有响应回来，那我怎么知道请求已经返回了呢？设置回调函数 异步使用XMLHttpRequest对象异步使用XMLHttpRequest对象时，必须使用：onreadystatechange事件。使用模式应该是：创建该对象；-new设置readys

6、tatechange事件触发一个回调函数; -onreadystatechagne打开请求；-open发送请求；-send 注：在回调函数中检查readyState属性，看数据是否准备就绪(是否等于4)。如果没有准备好，隔一段时间再次检查。因为数据没有下载完时，我们无法使用它的属性和方法。如果已经准备好，就继续往下执行；编写回调函数2.回调函数function watching() if (xhr.readyState = 4) /请求状态 if (xhr.status = 200) /服务器返回的状态码 var msg = xhr.responseText; /服务器返回的字符串 else

7、alert(服务器错误! + ajaxH.status); 1.在xhr.send之前添加设置回调函数代码：xhr.onreadystatechange = watching;异步对象readyState属性readyState属性readyState属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5种不同的状态。0：未初始化。new完后;1：已打开。对象已经创建并初始化，但还未调用send方法2：已发送。已经调用send 方法，但该对象正在等待状态码和头的返回；3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方

8、法，因为状态和响应头不完整；4：已加载。所有数据接收完毕XMLHttpRequest常用方法方法说明abort取消请求open需要使用多个参数，第一个设置方法属性，第二个设置目标URL，第三个指定是同步(false)还是异步(true)发送请求send发送请求到服务器setRequestHeader添加自定义HTTP头到请求getAllResponseHeaders获取HTTP响应头的整个列表getResponseHeader仅获取指定的HTTP响应头XMLHttpRequest常用属性属性说明onreadystatechange返回或设置异步请求的事件处理程序readyState返回状态码：

9、0：未初始化；1：打开；2：发送；3：正在接收；4：已加载responseText使用字符串返回HTTP响应responseXML使用XML DOM对象返回HTTP响应status返回HTTP状态码创建XMLHttpRequest对象使用XMLHttpRequest对象示例异步请求下拉框数据Json-B/S结构数据传递格式AJAX传递复杂数据如果自己进行格式定义的话会经历组装、解析的过程，因此AJAX中有一个事实上的数据传输标准JSon。Json（是一个标准，就像XML一样，Json规定了对象以什么样的格式保存为一个字符串）将复杂对象序列化为一个字符串，在浏览器端再将字符串反序列化为JavaS

10、cript可以读取的对象。看一下Json的格式。Json被几乎所有语言支持。JSON是js对象的一个字面量表示法.C#中将.Net对象序列化为Json字符串的方法：JavaScriptSerializer().Serialize(p)， JavaScriptSerializer在System.Web.Extensions.dll中，是.Net3.x 中新增的类。完整：System.Web.Script.Serialization.JavaScriptSerializer常见错误AJAX请求服务器时如果服务器出错了怎么办？编程常见错误XMLHttpRequest大小写不正确；多写了对圆括号：正确

11、：xHRObject.onreadystatechange =getData;错误：xHRObject.onreadystatechange =getData();必须弄清楚，在JavaScript中：函数名后如果有圆括号，意思就是将函数的返回值赋给等号左边的变量；没有圆括号，是将函数本身赋给等号前的变量。案例练习案例：无刷新登录（使用三层连接数据库）练习1：AJAX校验用户名是否存在，焦点离开用户名触发。注册页面，在用户名控件失去焦点（onblur），发出ajax请求（到服务器数据库验证用户名是否存在），服务器返回ok（在服务器端根据不同的情况进行Write(ok)或者error），如果是“error”，就alert提醒用户，用户名已经被注册。案例练习案例：新闻的无刷新评论，防止打断视频播放。刚进入界面的时候评论也是页面显示后才加载，“正在加载评论”。界面上有一个表格，逐条显示评论，页面刚进来的时候显示已有评论。用户在评论文本框中输入文本，点击评论按钮，向服务器发出ajax请求，将用户的评论内容发给服务器，如果服务器返回“插入成功”的消息则将用户的评论动态添加到现有表格中。进入的时候暂时不显示数据库中已有评论。练习：进入页面的时候AJAX加载评论。AJAX增删改查和分页AJ