什么是AJAX
AJAX(英文全称Asynchronous Javascript And Xml),它能使用js访问服务器,而且是异步访问,服务器给客户端的响应一般是整个页面,一个html完整页面,但在ajax中因为是局部刷新,那么服务器就不用再响应整个页面,而只是数据。
他的表现形式如下
text:纯文本
xml:可扩展标记语言
json:它是js提供的数据交互格式,它在ajax中最受欢迎
异步交互和同步交互
同步交互:
发一个请求,就要等待服务器的响应结束,然后才能发第二个请求,中间这段时间就是一个字“卡”,刷新的是整个页面
异步交互:
发一个请求后,无需等待服务器的响应,然后就可以发第二个请求,可以使用js接收服务器的响应,然后使用js来局部刷新
下面举一个异步交互的简单小例子:
<script type="text/javascript">
windows.onload = function(){ //在文档加载完成后马上执行
// 得到btn元素
var btn = document.getElementById("btn");
// 给btn的click时间注册监听
btn.onclick = function(){ // 在按钮被点击时执行
// 获取h1元素对应的DOM对象
var h1 = document.getElementById("h1");
// 给h1添加内容
h1.innerHTML = "Hello JS!!!";
};
};
</script>
<body>
<button id="but">点击这里</button>
<h1 id="h1"></h1>
</body>
AJAX的应用场景以及优缺点
应用场景:
- 百度的搜索框
- 用户注册时(校验用户名是否被注册过)
优缺点:
-
优点:
异步交互增强了用户的体验
性能方面:因为服务器无需再响应整个页面,只需要响应部分内容,所以服务器的压力减轻了 -
缺点:
AJAX不能应用于所有场景
AJAX无端的增多了对服务器的访问次数,给服务器带来了压力
AJAX发送异步请求(四步操作)
1.得到XMLHttpRequest
AJAX其实只需要学习一个对象:XMLHttpRequest
大多数浏览器都支持:
var xmlHttp = new XMLHttpRequest();
IE6.0:var xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”);
IE5.5以前更早版本的IE:var xmlHttp = new ActiveXObect(“Microsoft.XMLHTTP”);
编写创建XMLHttpRequest对象的函数:
function createXMLHttpRequest(){
try{
return new XMLHttpRequest();
}catch(e){
try{
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("哥们儿,你用的是什么浏览器啊?");
throw e;
}
}
}
}
2.打开与服务器的连接
xmlHttp.open():用来打开与服务器的连接,它需要三个参数:
请求方式:可以是GET或POST
请求的URL:指定的服务器端资源,例如:/day23_1/AServlet
请求是否为异步:如果为true表示发送异步请求,否则同步请求
xmlHttp.open(“GET”,"/day23_1/AServlet",true);
3.发送请求
xmlHttp.send(null):如果不给可能造成部分浏览器无法发送
参数:就是请求体内容,如果是GET请求,必须给出null
4.在xmlHttp对象的一个事件上注册监听器:onreadystatechange
xmlHttp对象一共有5个状态:
0状态:刚创建,还没有调用open()方法;
1状态:请求开始,调用了open()方法,但还没有调用send()方法
2状态:调用完了send()方法
3状态:服务器已经开始响应,但不表示响应结束了
4状态: 服务器响应结束(通常我们只关心最后这个状态)
得到xmlHttp对象的状态:
var state = xmlHttp.readyState;//可能是0、1、2、3、4
得到服务器响应的状态码:
var status = xmlHttp.status;//例如200、404、500
得到服务器响应的内容:
var content = xmlHttp.responseText;//得到服务器响应的文本格式内容
var content = xmlHttp.responseXML;//得到服务器响应的xml响应内容,它是Document对象了
xmlHttp.onreadystatechange = function(){//xmlHttp的5钟状态都会调用本方法
//双重判断:判断是否为4状态,而且还要判断是否为200
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
//获取服务器的响应内容
var text = xmlHttp.responseText;
}
};
下面是一些关于ajax的应用实例
第一例:打印 Hello World
(Servlet):
public class AServlet extends HttpServlet{
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException{
System.out.println("Hello AJAX!");
response.getWriter().print("Hello AJAX!!!");
}
}
(jsp):
<script type="text/javascript">
// 创建异步对象
function createXMLHttpRequest(){
try{
return new XMLHttpRequest();
}catch(e){
try{
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("哥们儿,你用的是什么浏览器啊?");
throw e;
}
}
}
}
windows.onload = function(){ //在文档加载完成后马上执行
// 得到btn元素
var btn = document.getElementById("btn");
// 给btn的click事件注册监听
btn.onclick = function(){ // 在按钮被点击时执行
/* ajax四步操作,得到服务器的响应,把响应结果显示到h1元素中 */
//1.得到异步对象
var xmlHttp = createXMLHttpRequest();
//2.打开与服务器的连接
*指定请求方式
*指定请求的URL
*指定是否为异步
xmlHttp.open("GET", "<c:url value='/AServlet'/>", true);
//3.发送请求
xmlHttp.send(null); //GET请求没有请求体,但也要给出null,不然FireFox可能会不能发送
//4.给异步对象的onreadystatechange事件注册监听器
xmlHttp.onreadystatechange = function(){//当xmlHttp的状态发生变化时执行
//双重判断:xmlHttp判断是否为4状态(服务器响应结束),而且还要判断服务器响应的状态码是否为200(响应成功)
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
//获取服务器的响应内容
var text = xmlHttp.responseText;
// 获取h1元素
var h1 = document.getElementById("h1");
h1.innerHTML = text;
}
};
};
};
</script>
<body>
<button id="btn">点击这里</button>
<h1 id="h1"></h1>
</body>
第二例:发送POST请求(如果发送请求时需要带有参数,一般都用post请求)
open: xmlHttp.open(“POST”…);
添加一步:设置Content-Type请求头:
xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
//发送请求时指定请求体
send:xmlHttp.send(“username = zhangSan&password = 123”);
(Servlet):
public class AServlet extends HttpServlet{
public void doGet(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException{
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("UTF-8");
//获取请求参数
String username = request.getParameter("username");
System.out.println("(POST:)Hello AJAX!" + username);
response.getWriter().print("(POST:)Hello AJAX!!!" + username);
}
}
(jsp) :
<script type="text/javascript">
// 创建异步对象
function createXMLHttpRequest(){
try{
return new XMLHttpRequest();
}catch(e){
try{
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("哥们儿,你用的是什么浏览器啊?");
throw e;
}
}
}
}
windows.onload = function(){ //在文档加载完成后马上执行
// 得到btn元素
var btn = document.getElementById("btn");
// 给btn的click事件注册监听
btn.onclick = function(){ // 在按钮被点击时执行
/* ajax四步操作,得到服务器的响应,把响应结果显示到h1元素中 */
//1.得到异步对象
var xmlHttp = createXMLHttpRequest();
//2.打开与服务器的连接
*指定请求方式
*指定请求的URL
*指定是否为异步
//修改open方法,指定请求方式为POST
xmlHttp.open("GET", "<c:url value='/AServlet'/>", true);
//设置请求头:Content-Type
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//3.发送请求
xmlHttp.send("username = zhangSan&password = 123"); //
//4.给异步对象的onreadystatechange事件注册监听器
xmlHttp.onreadystatechange = function(){//当xmlHttp的状态发生变化时执行
//双重判断:xmlHttp判断是否为4状态(服务器响应结束),而且还要判断服务器响应的状态码是否为200(响应成功)
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
//获取服务器的响应内容
var text = xmlHttp.responseText;
// 获取h1元素
var h1 = document.getElementById("h1");
h1.innerHTML = text;
}
};
};
};
</script>
<body>
<button id="btn">点击这里</button>
<h1 id="h1"></h1>
</body>
第三例:注册表单之检验用户是否注册
1.编写页面:(ajax3.jsp)
给出注册表单页面
给用户名文本框添加onblur事件的监听
获取文本框的内容,通过ajax4步发送给服务器,得到响应结果
* 如果是1:在文本框后显示"用户名已被注册"
* 如果是0:什么都不做
2.编写Servlet(ValidateUsernameServlet)
获取客户端传递的用户名参数
判断是否为itcast
* 是:返回1
* 否:返回0
(ajax3.jsp)
<script type="text/javascript">
// 创建异步对象
function createXMLHttpRequest(){
try{
return new XMLHttpRequest();
}catch(e){
try{
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("哥们儿,你用的是什么浏览器啊?");
throw e;
}
}
}
}
window.onload = function(){
//获取文本框,给它的失去焦点事件注册监听
var userEle = document.getElementById("usernameEle");
userEle.onblur = function(){
//1.得到异步对象
var xmlHttp = createXMLHttpRequest();
//2.打开连接
xmlHttp.open("POST","<c:url value='/ValidateUsernameServlet'>",true);
//3.设置请求头:Content-Type
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.发送请求,给出请求体
xmlHttp.send("username=" + userEle.value);
//5.给xmlHttp的onreadystatechange事件注册监听
xmlHttp.onreadystatechange = function(){
//双重判断
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
//获取服务器的响应,判断是否为1
//是:获取span,添加内容:"用户名已被注册"
var text = xmlHttp.responseText;
if(text == "1"){
//得到span元素
var span = document.getElementById("errorSpan");
span.innerHTML = "用户名已被注册!";
}
};
};
};
</script>
<body>
<h1>演示用户名是否被注册</h1>
<form action="" method="post">
用户名:<input type="text" name="username" id="usernameEle"/><span id="errorSpan"></span></br>
密码:<input type="password" name="password"/><br/>
<input type="submit" value="注册"/>
</form>
</body>
(ValidateUsernameServlet):
public class AServlet extends HttpServlet{
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException{
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("UTF-8");
/*
1.获取参数username
2.判断是否是itcast
3.如果是:响应1 否则响应0
*/
String username = request.getParameter("username");
if(username.equalsIgnoreCase("itcast")){
response.getWriter().print("1");
}
else{
response.getWriter().print("0");
}
}
这是我临时起意想跟大家分享的知识,后期如果还有关于这个板块的内容,我会继续和大家一起学习的。感谢您的阅读嗷❤❤❤