AJAX = 异步的 JavaScript 和 XML
AJAX是基于现有的Internet标准,并且联合使用它们:
1.XMLHttpRequest 对象 (异步的与服务器交换数据);
2.JavaScript/DOM (信息显示/交互);
3.CSS (给数据定义样式)
4.XML (作为转换数据的格式)
关于AJAX的使用:
1.创建XMLHttpRequest对象
var xmlhttp;
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}else
{ // IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2.向服务器发送请求
xmlhttp.open("GET","ajax_info.txt",true);
//有两种get跟post方式,
get:字符提交 安全性不高 处理时间快;
post: 字节提交 安全性比get高 处理时间慢 文件传输都用post;
xmlhttp.send();
3.服务器响应
xmlhttpre.onreadystatechange = function () {
if(xmlhttpre.readyState == 4 && xmlhttpre.status == 200){
//请求成功
var date2 = new Date();
console.log(xmlhttpre.responseText);
console.log("date2:"+(date2.getTime()-date1.getTime()));
}
}
4.onreadystatechange 事件:
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
xmlhttpobjt.onreadystatechange = function () {
// if(xmlhttpobjt.status == 200 && xmlhttpobjt.readyState == 4){
// //请求完成
// alert(xmlhttpobjt.responseText) ;
// }
if(xmlhttpobjt.readyState == 2){
alert("2:"+xmlhttpobjt.responseText) ;
}
if(xmlhttpobjt.readyState == 3){
alert("3:"+xmlhttpobjt.responseText) ;
}
if(xmlhttpobjt.readyState == 4){
alert("4:"+xmlhttpobjt.responseText) ;
}
}
一个简单的登陆操作:
逻辑思维分为以下几个步骤:
1.在body中定义登录框、密码框、提交框;