一只野生的AJAX
Posted Java引导者
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一只野生的AJAX相关的知识，希望对你有一定的参考价值。
AJAX = 异步 javascript 和 XML。（现在很多不用xml而用json）
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面（想想都很麻烦）。
XMLHttpRequest 是 AJAX 的基础，用于在后台与服务器交换数据。
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法：
XMLHttpReq=new XMLHttpRequest();老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");一般就这样写：
var XMLHttpReq;
if (window.XMLHttpRequest){
XMLHttpReq=new XMLHttpRequest(); // IE7+, Firefox, ... 浏览器执行代码
} else {
XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5 浏览器执行代码
}接下来就可以使用 XMLHttpRequest 对象了。
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
/* method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）*/
XMLHttpReq.open(method,url,async);
/* string：仅用于 POST 请求*/
XMLHttpReq.send(string);如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。一般多使用responseText小编觉得xml有些麻烦。
当请求被发送到服务器时，我们需要执行一些基于响应的任务。（这就要用到readyState）每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
XMLHttpReq.onreadystatechange=function(){
if (XMLHttpReq.readyState==4 && XMLHttpReq.status==200) {
alert(XMLHttpReq.responseText);
}
}注意： onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。
下面是一个例子：
<script type="text/javascript">
var XMLHttpReq;
function getXMLHttpRequest(){ //创建XMLHttpRequest对象
if (window.XMLHttpRequest){
XMLHttpReq=new XMLHttpRequest(); // IE7+, Firefox, ... 浏览器执行代码
} else {
XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5 浏览器执行代码
}
}
function send(url){ //发送数据到服务器
getXMLHttpRequest(); //1、建立XMLHttpRequest对象
XMLHttpReq.open("get",url,true); //2、XMLHttpRequest
XMLHttpReq.onreadystatechange=callback; //3、设置一个回调函数，监听XMLHttpRequest状态
XMLHttpReq.send(); //4、发送
}
//数据库返回后更新页面
function callback(){
if (XMLHttpReq.readyState==4 && XMLHttpReq.status==200) {
var result=XMLHttpReq.responseText; //获得页面返回的数据
if(result=="success"){
document.getElementById("msg").innerhtml="登录成功";
document.getElementById("loginForm").style.display="none";
}else{
alert("登录失败");
}
}
}
function login(){
//1、获得用户输入的内容
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
//2、异步提交数据
send("ajaxServlet?username="+username+"&password="+password);
document.getElementById("msg").innerHTML="登录中...";
}
</script><body>
<span id="msg"></span>
<form id="loginForm" action="">
用户：<input name="username" id="username"/><br/>
密码：<input type="password" name="password" id="password"/><br/>
<input type="button" onclick="login()" value="提交"/>
</form>
</body> PrintWriter out = response.getWriter();
String username= request.getParameter("username");
String password= request.getParameter("password");
//假装已经到数据库查询过
if(!username.equals("")&&!password.equals("")){
out.print("success");
}else{
out.print("fail");
}
out.flush();
out.close();了解了AJAX，也许你觉得这样特别麻烦！不过很多框架都封装了这些比如JQuery
$.post(url,{k:value},function(data){
//回调函数该干的事就在这里
//data就是responseText
//text就是xml 一般都用json
},"text");以上是关于一只野生的AJAX的主要内容，如果未能解决你的问题，请参考以下文章