传智播客Ajax视频前十集视频随笔

 +++++++++++++++++++++++Ajax ~~~~~~~~~~~~~~~~~~~~~~~~~~
=======  Ajax 技术  ========

一、第一课    ===》 AJAX概述与IntelliJ安装
a.Ajax读法其实不是我们读的'阿假客斯'，注意专业化。
b.王兴魁老师先讲实践再讲理论。
c.开发工具不再是eclipse了，因为ajax主要写javascript
d.什么是ajax?2005年2月提出来的，国内开始才2年。
不是单纯的技术，杂和5项，
主要是XMLHttpRequest异步传输对象
其次Dom进行动态显示和交互
最后XML和XSLT进行数据交互和处理
Asysnchroniouns Javascript and Xml
e.四天内容
AJAX的思维方式
AJAX的技术核心
AJAX应用实例
AJAX的优缺点
AJAX开发工具
f.老技术、新思想
h.ajax可以做哪些？部分刷新、异步操作
i.安装软件，自己看


二、第二课   ===》 使用IntelliJ开发Web项目
a.使用过程还是自己动手才能了解。
b.简单的表单验证
c.itellij的project相当于myeclpise的workspace
module相当于myeclipse的project
d.第一次使用必须要指定jdk
e.flex预言以后会很火，有时间可以学学
f.配置tomcat,点击之后有很多部署方式，选择tomcat
h.简单一个案例，一个form跳转到一个servlet，在web.xml配置servlet


三、第三课   ===》 用IntelliJ部署Web项目
a.传统的开发，验证用户名跳转新界面在连接返回
b.servlet第二种生成方式，通过换j2ee试图生成servlet


四、第四课   ===》 准备AJAX服务器端环境
a.jquery框架
b.先写服务器端的代码
1、取客户端参数信息
2、  
3、
c.快捷键  crtl+alt+空格 、ctrl+shift+空格 、 alt+enter


五、第五课   ===》 准备AJAX客户端程序环境
a.良好的习惯，标签名称小写，标签都关闭，属性名称小写，值在双引号内
b.ajax方式下可以不需要表单进行数据提交，都通过XMLHttpRequest
c.ajax里面一般不需name属性，需要id属性
d.在客户端一般先预留空间给显示服务器端返回的信息，<div></div> <span></span>
e.id属性的定义式未来dom的方式找到某个节点，进行操作
f.div与span比较：
1)他们都不会对标签内内容改变
2)直接区别，在css中，div块级元素，span内联元素。
简单理解在没有css控制下，div会独占一行，span则不会
g.步骤：点击按钮调用javascript将数据传给服务器，之后将服务器返回的信息显示在界面
h.javascript的脚本一般都写在专门的js文件里。


六、第六课   ===》 使用FireBug调试javascript
a.firefox浏览器有很多好用的插件
b.插件安装很简单，直接拖拽进浏览器窗口
c.firebug的调试，step over、step into、step out==跳过方法细节、不跳、跳出方法


七、第七课   ===》 JQuery的应用与高级调试技巧
a.四步骤：
1)获取文本框中的知识
2)将文本框中的数据发送给服务器的servlet
3)接收服务器端返回的数据
4)将服务器端返回的数据动态的显示在界面上
b.得到文本框值：
Document.getElementById(); Dom的方式
$("#value");value是id对应的值,jquery查找节点的方式
#value如css有id选择器、类选择器、标签选择器，查询表达式
c.var jqueryObj = $("#userName");
jquery方式返回的值都是jquery对象，
可以继续在上面执行其它的jquery方法
var va = jqueryObj.val();得到节点的值
d.发送数据,使用jquery的XMLHttpRequest的对象get请求封装
$.get(url,data,回调函数);
例如:$.get("ajaxserver?name="+va,null,callback);
e.接收服务器端返回的数据
如果回调函数function callback(data)
有data参数的话，ajax引擎会把服务器返回的信息
以参数形式传给callback函数
f.将信息显示到界面上
var resultObj = $("#result");
resultObj.html(data);更改节点的内容


八、第八课   ===》 JQuery的总结与简化调用
a.缩写
$.get("ajaxserver?name="+$("#userName").val(),null,function(data){
$("#result").html(data);
})


九、第九课   ===》 各种Ajax框架的对比介绍
a.dojo、dwr、ext、jquery、mootools、prototype & script.aculo.us、rico


十、第十课   ===》 Ajax技术回顾与XHR对象的创建
a.传统web服务与ajax异步服务
1)时间浪费
2)传统返回是界面、ajax返回感兴趣的数据
3)传统是通过form提交数据、ajax无需手动提交数据
b.不提供框架，自己通过js脚本实现
1)使用dom方式获得数据
var userName = document.getElementById("userName").value;
1)创建XHR对象(需要针对IE和其它浏览器差异)
//xmlhttp需要是全局变量
var xmlHttp;
if(window.XMLHttpRequest){
//针对FireFox、Mozilla、Opera、Safari、IE7、IE8
xmlHttp = new XMLHttpRequest();
if(xmlHttp.overrideMimeType){
//针对某些特定版本的mozilla浏览器的bug进行修正
xmlHttp.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
//针对IE6、IE5.5、IE5
//两个可以创建XMLHttpRequest对象的控件名称，前者版本较新
var activeName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
for(var i=0; i<activeName.length;i++)
{
try{
//取出控件名称创建，创建失败抛出异常继续创建，成功则break
xmlHttp = new ActiveXObject(activeName[i]);
break;
}catch(e){}
}
//确认XHR对象创建成功
if(!xmlHttp){
alert("XHR对象创建失败");
return;
}else{
alert(xmlHttp);
}