日期:2014-05-16  浏览次数:20641 次

AJAX基础和MVC个人总结

? 近期一直在学习WEB方面的知识,渐渐的开始接触并熟悉一些网页设计方面的技术和思想:CSS,JS,JSP,AJAX,这些都是一个java网页编程者必须熟悉并且精通的技术,现在对近两天学习的AJAX和MVC做一个简单的总结。

??一 ?AJAX部分

? 1.首先来介绍一些AJAX技术吧,说到底AJAX也不能称得上一门真正的技术,它其实就是某些技术的综合利用,包含了JS,XMLRequest异步请求,CSS,DOM组件操作以及XML,HTML语言等等。它使用XMLRequest异步请求对象进行数据的读取传输,通过DOM组件的操作来刷新网页的内容。当你注册用户时,如何神奇的不用刷新网页就能在数据库中查找出这个用户名是否已注册,在你使用百度搜索是,如何实时的将你要搜索的内容用下拉框显示出来,这些都是AJAX的应用,不算很神奇,但足够的神秘。

?2. 如何来实现AJAX技术,即如何创建和使用XMLRequest异步请求对象,才是他神秘的地方。传统的WEB技术就是简单的请求处理,而AJAX打破了这种束缚,它通过获取网页中的数据然后通过AJAX代码块进行处理来局部刷新这个网页,并不是一个网页的跳转,这些都归功于XMLRequest,下面来具体说明其实现:

?要使用异步请求对象,当然首先要有一个对象,显然我们需要去创建这样一个对象,下面给出创建异步请求对象的代码:

写道
var request;
function createRequest(){
//判断客户端使用的浏览器是IE内核还是Netscape。
if(window.ActiveXObject){
request = new window.ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
window.alert("您使用的浏览器内核不支持AJAX,请更换浏览器!");
}
}

??

首先我们要知道目前的主流浏览器有两种 IE和Firefox,首先要判断用户使用的是何种浏览器,然后根据浏览器创建XMLRequest对象。

然后是从网页中获取数据并且处理数据。这些都是XMLRequest完成的,接下来要写这段代码,在写之前要考虑下(当然这是学习后才知道),当这些数据处理后,如何显示这些返回的信息呢!这就是问题所在了,所以要在此之前编写回调函数,下面给出这段代码:

写道
//第二步:编写回调函数
function processResult(){
//判断当前请求对象的状态是否已经执行完,并执行后页面的状态是否是200,200表示OK。
//异步请求对象的状态有5个,0表示为初始化,1表示开始载入,2.表示载入完成,3表示正在交互执行,4表示请求处理已经完成。
if(request.readystate == 4 && request.status == 200){
//输出服务器返回的信息
alert("服务器返回的信息是:"+request.responseText);
//将服务器返回的信息显示到DIV上
document.getElementById("divMessage").innerHTML = request.responseText;
}
}

//第三步:编写发送请求函数
function sendRequest(){
//创建异步请求对象
createRequest();
//绑定回调函数,必须要在open前绑定。
request.onreadystatechange = processResult;
//开始发送请求了,HTML发送请求的方式有两种:get和post.
//get请求的方式,如果要使用异步请求将第三个参数设置为true,否则为false即可
//request.open("get","validateUserServlet?userName="+userName,true);
//如果使用的是get方式发送的请求,再最后的时候必须加上request.send(null);
//post请求方式
request.open("post","validateUserServlet",true);
//使用post方式提交的时候一定要加上下边语句
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=gbk");
//获取用户输入的用户名
var userName = document.getElementById("userName").value;
//把用户名发送给服务器
request.send("userName="+userName);
}

???? 回调函数的设置是通过onreadystatechange属性来实现的,还有注意向服务器发送数据的格式。接下来就是在servlet中对得到的数据进行处理后然后返回,那部分代码完全由自己去发挥了。

?? 对于AJAX中要注意的的,个人认为有下面几个方面:

? 首先对于XMLRequest异步请求对象的一些属性和方法要熟悉,比如readyState有四个返回值

?????????? 0 = uninitialized

?????????? 1 = loading

?????????? 2 = loaded

?????????? 3 = interactive

?????????? 4 = complete

Status返回的是服务器的状态,200代表服务器完成处理。onreadystatechange就是指回调函数。open(method,url,async),method是指表单的提交的方法,有get和post两种方法,当要发送的数据大于