06-AJAX

AJAX简介

l 没有AJAX会怎么样？普通的ASP.Net每次执行服务端方法的时候都要刷新当前
页面。如果没有AJAX，在youku看视频的过程中如果点击了“顶、踩”、评论、
评论翻页，页面就会刷新，视频就会被打断。开发一个看效果：用<video
src="diaosi.mp4" autoplay controls></video>播放视频（只有支持html5的浏览器
能播放），然后放一个“赞”按钮的功能（赞的数量存到数据库），看没有ajax
会打断视频，看优酷则不会。
l AJAX是一种进行页面局部异步刷新的技术。用AJAX向服务器发送请求和获得服
务器返回的数据并且更新到界面中，不是整个页面刷新，而是在HTML页面中使
用JavaScript创建XMLHTTPRequest对象来向服务器发出请求以及获得返回的数
据，就像JavaScript版的WebClient一样，在页面中由XMLHTTPRequest来发出
Http请求和获得服务器的返回数据，这样页面就不会刷新了。
XMLHTTPRequest是AJAX的核心对象

 

XMLHTTPRequest

l 开发一个AJAX功能需要开发服务端和客户端两块程序。以一个在服务
器端计算加法的程序为例。首先开发一个Add.ashx，计算两个数的和。
l （*）如果传递给服务器的请求里有中文，则需要使用Javascript函数
encodeURI来进行URL编码。
l 封装一个简单的js库简化XHR调用（备注）。
l 使用AJAX改写“赞”程序
l 案例：AJAX校验用户名是否存在，焦点离开用户名触发。T_Users
Id,Name,Password。在数据库中录入几条数据。注册页面，在用户名
控件失去焦点（blur），发出ajax请求（请求带用户名），服务器返回
ok（在服务器端根据不同的情况进行Write("ok")或者error），如果是
“error”，就alert提醒用户，用户名已经被注册。

 

Json

l AJAX传递复杂数据如果自己进行格式定义的话会经历组装、解析的过
程，因此AJAX中有一个事实上的数据传输标准JSon。Json（是一个标
准，就像XML一样，Json规定了对象以什么样的格式保存为一个字符串
）将复杂对象序列化为一个字符串，在浏览器端再将字符串反序列化为
JavaScript可以读取的对象。看一下Json的格式。Json被几乎所有语言
支持。
l C#中将.Net对象序列化为Json字符串的方法：
JavaScriptSerializer().Serialize(p)， JavaScriptSerializer在
System.Web.Extensions.dll中，是.Net3.x 中新增的类，如果在.Net2.0
中则需要用第三方的组件。
l JS中如何解析Json为JS对象：有的资料上介绍用eval解析json，但是这
样有安全问题；jquery等库都提供了解析json的方法； 有的浏览器原生
支持JSON.parse，不支持的引用json2.js也就可以了（*）。注意js对数
组遍历也要for (var i = 0; i < persons.length; i++)

 

案例练习

l 案例：新闻的无刷新评论，防止打断视频播放。刚进入界面的时候评论
也是页面显示后才加载，“正在加载评论”。进入页面的时候AJAX加
载已有评论。用户在评论文本框中输入文本，点击评论按钮，向服务器
发出ajax请求，将用户的评论内容发给服务器，如果服务器返回“插入
成功”的消息则将用户的评论动态添加到现有表格中，如果用户评论中
含有“TMD”、“去死”等不良信息则提示用户“请文明用语”。
js html var tr1 = document.l 提示中动态创建元素使用createElement("tr");
t1.appendChild(tr1);
l 练习：完全使用AJAX实现人员的增删改查。