传智播客Ajax视频后集视频随笔

 ===============下骗Ajax ================

十一、第十一课   ===》 使用XHR对象发送和接受数据
a.继续上面步骤
2)注册回调函数,只写函数名称(如果加了括号，那么就把函数返回值注册给回调函数)
xmlHttp.onreadystatechange = callback;
3)设置连接信息
//第一参数是Http请求方式，一般选择get、post
//第二参数是url地址
//第三个参数表示异步还是同步，true表示异步
xmlHttp.open("GET", "ajaxserver?name="+userName, true);
4)发送数据、可是与服务器进行交互
//同步方式下，send会在服务器数据回来后才执行完
//异步方式下，send会立即执行完
xmlHttp.send(null);
5)接收响应数据
function callback(){
//判断对象状态交互完成
if (xmlHttp.readyState == 4){ 
//判断http交互是否成功，http状态码200
if(xmlHttp.status == 200){
//获得服务器返回的纯文本数据
var responseText = xmlHttp.responseText;
//显示到界面
document.getElementById("result").innerHTML = responseText;
}
}
}


十二、第十二课   ===》 浏览器穷尽测试与工具漫谈
a.没什么可写的，都是一些软件的介绍


十三、第十三课   ===》 为学员调试错误与XHR深入讲解
a.局部变量，不能多写var,status写错
b.选择post方式提交数据
xmlHttp.open("POST", "ajaxserver", "true");
//必须设置http的请求头
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send("name=" +userName);

十四、第十四课   ===》 利用XHR接受与处理XML数据
a.服务器端修改，httpServletResponse.setContentType("text/xml;charset-utf-8");
b.客户端修改，var domObj = xmlHttp.responseXML;
//<message>123122</message>
//getElementsByTagName();所有message节点，返回一个数组
var mgeNodes = domObj.getElementsByTagName("message");
//获得子节点、获得文本内容
var textNode = mgeNodes[0].firstChild;
var responseText = textNode.nodeValue;
c.如果服务器setContentType("text/html;charset-utf-8");
firefox可以仍然出来，而ie不可以
d.ajax应用的五个步骤
1)创建XMLHttpRequest对象
2)注册回调函数
3)open与服务器建立链接
4)send向服务器发送数据
5)responseText回调函数针对不同响应状态进行处理


十五、第十五课   ===》 点评学员问题与JQuery处理XML数据
a.研发工作写代码不能太粗心。
getElementsByTagName/send只能一次/
b.javscript的创建对象方式
var obj = { name:"gg", age:20};
c.$.ajax({
type: "POST",
url: "AJAXServer",
data: "name=" + username,
dataType: "xml",  //返回数据类型
success: callback //响应成功调用函数
})
d.jquery解析dom对象
var jqueryObj = $(data);
var message = jqueryObj.children();
var text = message.text();
e.ide技巧sout按tab键就可以补全


十六、第十六课   ===》 解决XHR与图片缓存问题
a.ie的浏览器缓存，在url后面加个时间戳
var timestamp = (new Date()).valueOf();
b.拼接时要考虑前者有?号了没


十七、第十七课   ===》 解决Ajax中文乱码与跨域访问
a.中文发出后以utf-8传出
b.方案一、一般处理
encodeURI(name.val())以utf-8传输
String name = new String(old.getBytes("iso-8859-1"),"utf-8")
页面端发出的数据作一次encodeURI,服务器使用new String(old.getBytes("iso-8859-1"),"utf-8")
c.页面端数据做两次encodeURI，服务器使用URLDecoder.decode(old,"UTF-8");
var url = "ajaxserver?name=" + encodeURI(encodeURI($("#userName").val()))
String name = URLDecoder.decode(old,"UTF-8");
d.跨域，采用代理。
一个界面访问另外一个站点的服务器程序。


十八、第十八课   ===》 DOM模型与DOM.API
a.dom树的概念
b.DOM(Document Object Model)被称作文档对象模型，它是语言和平台中立的接口，允许程序和脚本动态访问和更新文档的内容，结构和风格。
c.在AJAX中，DOM对于我们来说是HTML和XML文档的一个应用程序接口，它可以把HTML,XML与AJAX中的开发语言Javascript连接起来。
d.html标签对应dom树中的元素节点
html里的文本信息都是dom树中的文本节点
html中的注视信息对应dom树中的注释节点
html标签中的属性对应dom树中的属性节点
e.属性节点包含在元素节点里
f.document是根节点，但只是一个虚的
h.html我们又把它叫做根元素节点
j.dom相关的api自己多去写代码吧


十九、第十九课   ===》 导入外部工程的问题及要完成的各种Ajax效果演示
a.如何导入？简单直接双击，intellij会直接关联。


二十、第二十课   ===》 实现淡入淡出.引出FireBug调CSS
a.好的习惯，css、img、jslib、html物理上分开。
b.如何在表示页面中弹出一个窗口？
c.一些css的小内容和firebug的一些调试技巧
d.实现步骤：
//1.找到窗口对应div节点
var winNode = $("#win");
//2.1修改css的值，让窗口显示出来
winNode.css("display","block");//没有动画的感觉
//2.2利用jquery的show方法 
winNode.show("slow");//动画缓慢的出来
//2.3利用jquery的fadeIn方法
winNode.fadeIn("slow");//淡入淡出
e.窗口的美化、出现标题栏
f.将窗口隐藏起来，只要逆向
1.winNode.css("display","none");
2.winNode.hide("slow");
3.winNode.fadeOut("slow");


二十一、第二十一课  ===》 可收缩展开的级联菜单与局部刷新
a.网上例子基本采用<ul><li></li></ul> 当然div也可以
b.list-style 子菜单的样式  margin-left 左外边距
c.初始化加载  $(document).ready(function() {
//查找ul标签
var uls = $("ul");
//注册事件
uls.click(function(){
....
})
})
d. var as = $("ul>a"); //查找ul里面的a节点