一、什么是Ajax?
Ajax全称为“Asynchronous JavaScript And XML”(异步的JavaScript和XML),是指一种创建交互网页应用的网页开发技术。Ajax并不是一种新的技术,而是几种原有技术的结合体,Ajax使用CSS和XHTML来表示,使用DOM模型来交互和动态显示,使用XMLHttpRequest来和服务器进行异步通信,使用JavaScript来绑定和调用。
二、如何使用Ajax?
1、创建一个XMLHttpRequest对象:
function getXMLHttpRequest(){
var xmlHttp;
try{ //兼容Firefox,Opera 8.0+,Safari
xmlHttp = new XMLHttpRequest();
} catch(e) {
try{ //兼容Internet Explorer
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
}
}
}
return xmlHttp;
}
2、创建并发送请求
function AjaxGet(){
//获取一个XMLHttpRequest对象
var xmlHttp = getXMLHttpRequest();
//创建请求
/*open方法的第一个参数是请求的方式:GET请求为“GET”、POST请求为“POST”
第二个参数是请求的路径
第三个参数是该请求是否异步:true异步,false同步*/
xmlHttp.open("GET","/testServerlet",true);
//发送请求
xmlHttp.send();
}
3、获得请求返回的响应
使用XMLHttpRequest的onreadystatechange事件来监听Ajax请求,通过XMLHttpRequest的readyState和status属性来判断请求的状态,其中readyState和status有对应的状态码,具体如下:
在后台处理请求的代码最后添加响应的内容,具体使用如下:
response.setContentType("text/html;charset=utf-8");
response.getWriter().write("响应的内容");
在HTML页面添加处理请求响应的代码
function ajaxGet(){
//获取XMLHttpRequest对象
var xmlHttp = getXMLHttpRequest();
//创建请求
xmlHttp.open("GET","/testServerlet",true);
//使用onreadystatechange事件监听请求,如果请求状态发生改变,就会触发后面的事件
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
alert(xmlHttp.responseText);
}
}
//发送请求
xmlHttp.send():
}
三、Ajax以GET或POST带参数请求
1、以GET带参数请求:
function ajaxGet(){
xmlHttp = getXMLHttpRequest();
//在请求路径后面拼接参数
xmlHttp.open("GET","/testServerlet?name=aa&&password=123456",true);
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readystate == 4 && xmlHttp.status == 200){
alert(xmlHttp.responseText);
}
}
xmlHttp.send();
}
2、以POST带参数请求
function ajaxPost(){
xmlHttp = getXMLHttpRequest();
xmlHttp.open("POST","/testServerlet",true);
//如果是POST方式带数据请求,需要添加一个请求头,说明提交的数据类型是经过url编码的form表单数据
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//在send方法中添加表单数据
xmlHttp.send("name=test&&password=123456");
}