1.认识Ajax
a) Ajax,Asynchronous Javascript And Xml，异步的JavaScript和xml。
b) Ajax不是新的技术，是已有技术的更好的使用方式。
c) Ajax是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的艺术。
2.Ajax的使用方式
2.1创建XMLHttpRequest对象
XMLHttpRequest对象时Ajax的核心对象，所有的方法和属性都通过该对象使用。
2.2监听onreadystatechange事件
a)readyState存有XMLHttpRequest的状态信息
>0:请求未初始化；
>1:服务器连接已建立；
>2:请求已接收；
>3:请求处理中；
>4:请求完成且响应已就绪；
b)states表示响应状态码，常见的有200（成功跳转）,304,404（无效页面）等。
2.3初始化请求
open方法：用于打开和数据库的链接，参数如下：
》method:请求方法，get或post.
》url:请求的路径.
》async:是否异步，默认为true.
2.4发送请求
send方法：用于发送请求，post方式提交时，可在send方法中添加请求参数。
2.5接收响应
a)responseTest:用于获取文本响应信息。
b)responseXML:用于获取xml格式的响应信息。
|
function getMsg() { var xmlHttp; // [1] 创建XMLHttpRequest对象 if(window.XMLHttpRequest) {// 现代浏览器 xmlHttp = new XMLHttpRequest(); } else if(window.ActiveXObject) {// ie5, ie6 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else { alert("请升级浏览器!"); return; } // [2] 监听onreadystatechange事件 xmlHttp.onreadystatechange = function() { console.info(xmlHttp.readyState); if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200 || xmlHttp.status == 304) { // [5] 接收响应信息 var result = xmlHttp.responseText; document.getElementById("box").innerHTML = result; } } }; // [3] 准备请求信息 xmlHttp.open("get", "msg", true); // [4] 发送请求 xmlHttp.send(); } |
3.通过AJAX验证用户名是否可用
|
window.onload = function() { document.getElementById("uname").onblur = function() { var xmlHttp; if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } else { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200 || xmlHttp.status == 304) { var result = xmlHttp.responseText; if(result == 0) { document.getElementById("unameSpan").innerHTML = "√"; } else { document.getElementById("unameSpan").innerHTML = "×"; } } } }; xmlHttp.open("get", "uname?uname=" + this.value); xmlHttp.send(); }; }; |