JavaScript与Ajax应用文档
JavaScript与Ajax应用文档
作者：兰文雄 日期：
一、 JavaScript基础知识
（1） JavaScript是什么？
观点：JavaScript是一种作为嵌入HTML文档的、基于对象的脚本设计语言。
概念说明：1）web开发中，JavaScript是嵌入在HTML文档中，由浏览器解析执行的。2）基于对象，不具备面对对象的特性（封装、继承、多态），而是使用内置的对象。但JavaScript也通过构造函数和原型对象定义伪类实现“面向对象”的机制！
（2）JavaScript的历史版本
观点：JavaScript是Netscape公司发明的，微软也实现了自己的脚本（JScript），ECMA
联合他们制定了ECMAScript标准，请参考http://www.cnblogs.com/vincent-lwx/archive/2008/08/14/1268172.html
（3）JavaScript的功能
观点：JavaScript被广泛的使用于表单验证，动画特效、广告窗口等，DHTML（XHTML/CSS/JavaScript）
和Ajax的出现把JavaScript的地位提升到前所未有的地位。
（4）JavaScript语言知识
观点：学习JavaScript时，可以分为两个方面：核心JavaScript和客户端JavaScript。
概念说明：核心JavaScript是JavaScript语言的基础部分，包括基本语法和内置的对象等。
客户端JavaScript是指把核心JavaScript解析器嵌入到web浏览器中，并在其基础上由浏览器扩展了几个重要对象（document、window等）。特别说明的是正是由于浏览器提供对象的机制导致了让程序员难受的JavaScript兼容性问题，因为不同的浏览器对JavaScript的支持不统一。
参考资源：JS语言CHM文档、《JavaScript权威指南》、w3school在线教程http://www.w3school.com.cn/js/index.asp
二、 JavaScript的典型应用
Ajax （Asynchronous/JavaScript/XML）
基本原理：
1) 创建XMLHTTPRequest对象
2) 指定请求的形式（POST/GET/HEAD）
3) 异步发动请求
4) 解析服务器端的返回数据（TEXT/XML/JSON）
5）DOM：文档对象模型——应用JavaScript对象（document对象）对HTML文档进行控制，并使用从服务器返回的经过解析的数据。请参考《JavaScript权威指南》754页
资源：
非常实用的AJAX工具文件
http://www.cnblogs.com/vincent-lwx/archive/2008/08/19/1270998.html
XMLHTTPRequest对象是AJAX的核心，务必认真对待；请参考《JavaScript权威指南》477
页，我也整理了一篇，请参考：
http://www.cnblogs.com/vincent-lwx/archive/2008/08/08/1263658.html
服务器端针对ASP.NET，使用response.write（）、XML类、JSON类处理Ajax异步请求的数据。
JavaScript解析XML参考 http://www.w3school.com.cn/xml/xml_parser.asp
JavaScript解析JSON请参考http://vincent-lwx.blog.sohu.com/97064653.html
AJAX实战应用（项目中用户名自动验证实例）
（1） 客户端
JS部分：
factories=[
function(){return new XMLHttpRequest();},
function(){return new ActiveXObject("Msxml2.XMLHTTP");},
function(){return new ActiveXObject("Microsoft.XMLHTTP");}
]; //针对不同浏览器的XMLHttpRequest对象数组
function newRequest(){ //创建XMLHttpRequest
for(var i=0;i<factories.length;i++){
try{
var factory=factories[i];
var request=factory();
if(request!=null){
return request; //成功创建XMLHttpRequest
}
}
catch(e){
continue;
}
}
}
//发送get请求
function get(url,callback){
var request=newRequest();
request.onreadystatechange=function(){
if(request.readyState==4 && request.status==200){
callback(request.responseText);
}
}
request.open("GET",url);
request.send(null);
}
//用户名验证回调函数
function userCallback(result){
var message=result;
var userTip = document.getElementById("userTip");
if(message=="OK")
userTip.innerHTML="<span>恭喜，用户名可用！</span>";
else
{
userTip.innerHTML="<span>"+message+"</span>";
document.getElementById("userName").focus();
}
userTip.style.display="block" ;
}
//调用get请求，AJAX验证用户名是否被注册
function userNameValedate(){
var userName = document.getElementById("userName").value;
if(userName==""){
var userTip = document.getElementById("userTip");
userTip.innerHTML="<span>用户名不能为空！</span>";
userTip.style.display="block" ;
document.getElementById("userName").focus();
return;
}
get('CubeHandler.ashx?id=1&userName='+userName,userCallback);
}
HTML部分：
<tr>
<td style="width: 116px">* 用户名： </td>
<td><input name="userName" type="text" onblur="userNameValedate();"/></td>
<td style="width: 210px">
<div id="userTip" style="display: none">
</div></td>
</tr>
服务器端： CubeHandler.ashx
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string id = context.Request.Params["id"];
context.Response.StatusCode = 200;
context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
//验证用户名
if (id == "1")
{
string userName = context.Request.Params["userName"];
bool isPass = ValidateUserName(userName);
if (isPass)
{
context.Response.Write("OK");
}
else
{
context.Response.Write(string.Format("用户名 {0}已经被使用，请从新输入！", userName));
}
}
public bool ValidateUserName(string userName)
{
string sqlstr = "select count(*) from n0_user where n0_userName='" + userName + "'";
int iCount = Convert.ToInt32(SqlHelper.ExecuteScalar(PubConstant.ConnectionString, CommandType.Text, sqlstr));
if (iCount == 1)
{
return false;
}
else
{
return true;
}
}
}
学习提高AJAX的资源：
入门经典：http://www.ibm.com/developerworks/cn/web/wa-ajaxintro/
http://tech.163.com/special/00091SVT/ajax.html
http://www.chinaitlab.com/www/techspecial/ajax/
http://forum.csdn.net/SList/Ajax/
附录：
传统web应用与AJAX应用的比较：交互模式
