1.AJAX包括:
使用XHTML和CSS的基于标准的表示技术
使用DOM进行动态显示和交互
使用XML和XSLT进行数据交换和处理
使用XMLHttpRequest进行异步数据检索
使用Javascript将以上技术融合在一起
* 前端使用AJAX的区别*
不再使用from表单
设置div用于存放服务器返回的信息,开始为空
id属性定义是为了利用dom方式找到一个节点,进行操作
div和span的差异,div中的内容独占行,span中的内容和前后其他内容相处良好
2.AJAX准备
注意:需要引入jquery.js
<input type="button" value="校验" onclick="verify()">
<div id="result"></div>
定义用户名校验方法
function verify(){
alert("按钮被点击了");
}
3.JQuery的应用与高级调试技巧
//document.getElementById("userName");dom的方式
//Jquery的查找节点的方式,参数中#加上id属性值可以找到一个接点
//jquery的方法返回的都是jquery的对象,可以继续在上面执行其他jquery方法
var jqueryobj=${"#userName"};
//获取节点的值
var userName=jqueryobj.val();
alert(userName);
//将文本框中的数据发送给服务器端的servlet
//使用jquery的XMLHTTPrequest对象get情求的封装
$.get("AJAXServer?name="+userName,null,callback);
function callback(){ //回调函数
var resultObj = $("#result");
resultObj.html(data);
}
function verify(){
//使用dom的方式获取文本中的值
//document.getElementById("userName")是dom中获取元素节点的一种方法
var userName=document.getElementById("userName").value;
//创建XMLHttpRequest对象
需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同代码
if(window.XMLHttpRequest){
var xmlhttp=new XMLHttpRequest();
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml");
}
}else if (window.ActiveXObject){
var activexName={"MSXML2.XMLHTTP","Microsoft.XMLHTTP"};
for(var i=0;i<activexName.length;i++){
try{
var xmlhttp=new ActiveXObject(activexName[i]);
break;
}catch(e){
}
}
}
}
//确认XMLHttpRequest对象创建成功
if(!xmlhttp){
alert("XMLHttpRequest对象创建失败!!");
return;
}else{
alert(xmlhttp);
}