JavaScript与Ajax应用文档
2008-08-14 23:08
543 查看
JavaScript与Ajax应用文档
作者：兰文雄日期：08-08-14
一、 JavaScript基础知识
（1） JavaScript是什么？
观点：JavaScript是一种作为嵌入HTML文档的、基于对象的脚本设计语言。
概念说明：1）web开发中，JavaScript是嵌入在HTML文档中，由浏览器解析执行的。2）基于对象，不具备面对对象的特性（封装、继承、多态），而是使用内置的对象。但JavaScript也通过构造函数和原型对象定义伪类实现“面向对象”的机制！
（2）JavaScript的历史版本
观点：JavaScript是Netscape公司发明的，微软也实现了自己的脚本（JScript），ECMA
联合他们制定了ECMAScript标准，请参考/article/5988834.html
（3）JavaScript的功能
观点：JavaScript被广泛的使用于表单验证，动画特效、广告窗口等，DHTML（XHTML/CSS/JavaScript）
和Ajax的出现把JavaScript的地位提升到前所未有的地位。
（4）JavaScript语言知识
观点：学习JavaScript时，可以分为两个方面：核心JavaScript和客户端JavaScript。
概念说明：核心JavaScript是JavaScript语言的基础部分，包括基本语法和内置的对象等。
客户端JavaScript是指把核心JavaScript解析器嵌入到web浏览器中，并在其基础上由浏览器扩展了几个重要对象（document、window等）。特别说明的是正是由于浏览器提供对象的机制导致了让程序员难受的JavaScript兼容性问题，因为不同的浏览器对JavaScript的支持不统一。
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://www.ajaxdev.net/
http://tech.163.com/special/00091SVT/ajax.html
http://www.chinaitlab.com/www/techspecial/ajax/
http://bbs.okajax.com/
http://www.javaeye.com/
http://forum.csdn.net/SList/Ajax/
附录：
传统web应用与AJAX应用的比较：交互模式
作者：兰文雄日期：08-08-14
一、 JavaScript基础知识
（1） JavaScript是什么？
观点：JavaScript是一种作为嵌入HTML文档的、基于对象的脚本设计语言。
概念说明：1）web开发中，JavaScript是嵌入在HTML文档中，由浏览器解析执行的。2）基于对象，不具备面对对象的特性（封装、继承、多态），而是使用内置的对象。但JavaScript也通过构造函数和原型对象定义伪类实现“面向对象”的机制！
（2）JavaScript的历史版本
观点：JavaScript是Netscape公司发明的，微软也实现了自己的脚本（JScript），ECMA
联合他们制定了ECMAScript标准，请参考/article/5988834.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工具文件
/article/5988844.html
XMLHTTPRequest对象是AJAX的核心，务必认真对待；请参考《JavaScript权威指南》477
页，我也整理了一篇，请参考：
/article/5988823.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://www.ajaxdev.net/
http://tech.163.com/special/00091SVT/ajax.html
http://www.chinaitlab.com/www/techspecial/ajax/
http://bbs.okajax.com/
http://www.javaeye.com/
http://forum.csdn.net/SList/Ajax/
附录：
传统web应用与AJAX应用的比较：交互模式
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 文档07_JavaScript_ajax
- javascript和ajax应用实例（日本写的）
- JavaScript高级应用：使用DOM技术操纵文档
- AJAX工作原理及其优缺点 1.什么是AJAX? AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页
- ASP.NET AJAX 说明文档->客户端引用->全局命名空间->JavaScript 基础类型扩展->Array 类型扩展->contains 函数
- 导步js(javascript和ajax应用) c#
- 使用 Dojo 的 Ajax 应用开发进阶教程，第 1 部分: JavaScript 技巧与高级特性
- Ajax基础应用入门02（结合javascript）
- JavaScript高级应用：使用DOM技术操纵文档
- JavaScript高级应用：使用DOM技术操纵文档
- 在Java2平台企业版中应用异步JavaScript技术和XML（AJAX）
- JavaScript高级应用：使用DOM技术操纵文档
- JavaScript Ajax 编程之应用篇
- JavaScript学习5---Ajax返回xml文档及其解析
- 一个很好的javascript框架，prototype.js 1.4，很好的封装了ajax的应用。
- Sencha-概念-Ajax（异步JavaScript和XML）（官网文档翻译13）
- JavaScript高级应用：使用DOM技术操纵文档
- asp与javascript进行Ajax应用
- Ajax（Asynchronous JavaScript and XML）在JQuery中的应用
- 类AJAX应用，JAVASCRIPT跨域访问