Ajax的原理和运行机制
|
AJAX，时下它也是非常流行。当然，它并不是什么新技术，而是在各种已有的技术和支持机制下的一个统一。在我的项目中，偶尔也会用到ajax，用来给用户一些无刷新的体验。用过几次之后，我个人决定对它的原理和运行机制做一个总结。 1.使用CSS和XHTML来表示。 ajax的原理
<script language="javascript" type="text/javascript">
var xmlHttp = false;
//创建面向IE的XMLHttpRequest对象
try {
//使用Msxml的一个版本来创建
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
//使用它的另外一个对象来创建
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
//创建面向其它非微软浏览器的XMLHttpRequest对象
xmlHttp = new XMLHttpRequest();
}
</script>
这个过程分为三步，首先我们定义一个xmlHttp来引用创建的XMLHttpRequest。然后，我们尝试在微软的浏览器中创建该对象，先用Msxml.XMLHTTP对象来创建，如果失败再尝试用macrosoft.XMLHTTP来创建它．最后，我们面向非微软浏览器来创建该对象．
function executeXMLHttpRequest(callback,url)
{
//处理非微软浏览器的情况
if(window.XMLHttpRequest)
{
xhr=new XMLHttpRequest();
xhr.onreadystatechange = callback;
xhr.open("Get",url,true);
xhr.send(null);
}
//处理微软浏览器的情况
else if(window.ActiveXObject)
{
xhr=new ActiveXObject("macrosoft.XMLHttp");
if(xhr)
{
xhr.onreadystatechage= callback ;
xhr.open("Get",true);
xhr.send();
}
}
}
由上面可见，执行XMLHttpRequest实际上大多数代码还是用在处理浏览器的区别上面，针对不同的浏览器它还是要做出不同的处理，但是这样看上去也非常的直观。 对于callback来说，我们有： function callback() {
//状态标识为已完成
if (xhr.readyState == 4) {
//已就绪
if (xhr.status == 200) {
document.getElementById('votes').innerHTML = xhr.responseText;//对页面上的div进行异步更新
} else {
alert("There was a problem retrieving the XML data: " +xhr.statusText);
}
}
}
就是说，一旦服务器处理完XMLHttpRequest并返回给浏览器，用xhr.onreadystatechange指派的回调方法将自动调用。 上面差不多就是XMLHttpRequest的整个工作流程，它首先检查XMLHttpRequest的整体状态并且保证它已经完成（readyStatus=4），然后根据服务器的设定询问请求状态，如果一切已经就绪（status=200），那么就执行下面需要的操作。 知道了XMLHttpRequest的工作流程，我们可以看出，XMLHttpRequest是完全用来向服务器发出一个请求的，它的作用也局限于此，但它的作用是整个ajax实现的关键，因为ajax无非是两个过程，发出请求和响应请求。并且它完全是一种客户端的技术。而XMLHttpRequest正是处理了服务器端和客户端通信的问题所以才会如此的重要。 下面提供一个最常见简单的用ajax技术，识别用户名是否被注册的效果：
<%@ page contentType="text/html; charset=utf-8"%>
<html>
<body>
<input type="text" id="text1" />
<input type="button" value="检 测"
onClick="checkUser(document.getElementById('text1'))">
<div id="toolTip"></div>
<script language="javascript">
var http_request = false; //创建xmlhttprequest请求
function createHttpRequest() {
var http_request = false;
if (window.XMLHttpRequest) { // 非IE浏览器
http_request = new XMLHttpRequest(); //创 建XMLHttpRequest对象
} else if (window.ActiveXObject) {// IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");//创 建XMLHttpRequest对象
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP"); //创 建XMLHttpRequest对象
} catch (e) {
}
}
}
if (!http_request) {
alert("不能创建XMLHttpRequest对象实例?");
return false;
}
return http_request;
}
function getResult() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
document.getElementById("toolTip").innerHTML = http_request.responseText;
} else {
alert("您所请求的页面有错误?");
}
}
}
function checkUser(userName) {
if (userName.value == "") {
alert("请输入用户名?");
userName.focus();
return;
} else {
http_request = createHttpRequest();
var url = 'userInput.jsp?user=' + userName.value;
http_request.open('GET',true);
http_request.send();
http_request.onreadystatechange = getResult;
}
}
</script>
</body>
</html>
userInput.JSP页面
<%@page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%
String[] userList = { "明日科技","mr","mrsoft","wgh" };//创建一个一维数组
String user = new String(request.getParameter("user").getBytes("ISO-8859-1"),"utf-8"); //获取用户名
Arrays.sort(userList);//对数组排序
int result = Arrays.binarySearch(userList,user);//搜索数组
if (result > -1) {
out.println("该用户名已注册，请重新输入用户名!"); //输出检测结果
} else {
out.println("该用户名可以使用"); //输出检测结果
}
%> （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |