AJAX
Posted 愤怒的码农
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AJAX相关的知识,希望对你有一定的参考价值。
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(); }; }; |
以上是关于AJAX的主要内容,如果未能解决你的问题,请参考以下文章