Ajax:(Asynchronout JavaScript And XML)
1.开发工具 Eclipse、IntelliJ
使用XHTML和CSS基于标准的表示技术、DOM进行动态显示和交互、
XML和XSLT数据交换和处理(到后面就主要用JSON)、XMLHttpRequest进行一部数据检索、JavaScript将以上技术融合在一起。
所以说啊,JavaScript的学习是关键 再利用JQuery Library(库)进行开发
能实现Ajax的框架:dojo、DWR、ext JS、JQuery、mootools、prototype、rico
2.Ajax实现简单的用户验证
-获取文本框中的内容
-将文本框中的数据发送给服务器端的Servlet
-接收服务器端返回的数据
-将服务器端返回的数据动态的显示在页面
3.DOM(Document Object Module)
一切都是节点(元素节点(类型值=1)、文本节点(类型值=3)、属性节点(类型值=2))
nodeName,nodeType,nodeValue
replaceNode();
window.onload=function(){ //当文档加载完成后点击事件才会被执行
Document.getElementById("id").onclick=function(){
}
}
setAttributr/getAttribute设置属性/获取属性值
创建新元素节点:Document.createElement("li");
创建新文本节点:Document.createTextNode("aaa");
插入节点:parentNode.insertBefore(newNode,targetNode),parentNode.
4.建立模式对话框显示指定的文档
window.showModelessDialog(sURL,VArguments,sFeatures);
建立模式对话框显示指定的文档,其实就是在指定的区域内加载指定的目标URL中的内容
window.showModelDialog(sURL,VArguments,sFeatures);
sURL:目标网址
VArguments:常用window(代表sURL页面)
sFeatures:字符串参数 设置显示页面的参数(包括页面大小,是否显示工具栏,页面位置)
5.Ajax信息补充:
创建XMLHttpRequest对象(其中要注意浏览器兼容性的问题)具体代码:
function createAjax(){ var xmlhttp; try{ xmlhttp = new XMLHttpRequest(); }catch{ try{ xmlhttp = new ActiveXObject("MSXML2.XMLHttp"); }catch{ try{ xmlhttp = new ActiveXObject("Micrsoft.XMLHttp); } } } return xmlhttp; }
注册回调函数:
xmlhttp.onreadystatechange = callback;
设置连接信息:
xmlhttp.open("GET","URL",true);
发送数据,开始和服务器端交互
xmlhttp.send(null);
//注意:用Get方式发送数据,send方式中的参数不能传送到服务器端
POST方式:
发送数据时设置头信息:
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//该方法必须放置在open之后,作用:告知服务器正在发送数据
xmlhttp.send("usename='aaaaa'&password=99999");
6.JQuery信息补充
DOM对象和JQuery对象之间的转换
DOM对象转为Jquery对象 使用$(DOM对象);
var username = Document.getElementById("id"); //DOM对象
var $username = $(username); //JQuery对象
JQuery对象转为Dom对象 其实Jquery对象相当于一个数组
var $username = $("#username"); //
var username = $username[0]; 或者$username.get(0);
JQuery选择器:$("input:disabled");查找input中不带有enabled属性的input
$("body > div")body下的div子类元素
$("body div")body下所有div元素
$("body + div")div下一个兄弟元素
$("body ~ div")后面兄弟div元素
$("input[type=text]:disabled") 属性过滤选择器
$.each($("input[type=checkbox]:checked"),function(index,domEle){
//$.each是对集合进行遍历
alert($(this).val());
});
$.each($("select option:selected"),function(index,domEle));
//遍历下拉框中被选中的选项
内部插入节点: