一.ajax概述
1.什么是同步,什么是异步
同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待 卡死状态
异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随 意做其他事情,不会被卡死,也叫局部刷新
2.Ajax的运行原理
页面发起请求,会将请求发送给浏览器内核中的Ajax引擎,Ajax引擎会提交请求到 服务器端,在这段时间里,客户端可以任意进行任意操作,直到服务器端将数据返回 给Ajax引擎后,会触发你设置的事件,从而执行自定义的js逻辑代码完成某种页面1 功能。
二.js原生的Ajax技术
js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的,要使用js原 生的Ajax完成异步操作,有如下几个步骤:
1)创建Ajax引擎对象
2)为Ajax引擎对象绑定监听(监听服务器已将数据响应给引擎)
3)绑定提交地址
4)发送请求
5)接受响应数据
三.ajax的原理
传统的访问方式是客户端发送请求到服务端,等待服务端执行代码的时间后,服务端传输相应到客户端。中间会等待一定的时间
而ajax的原理是客户端中的ajax引擎发送响应到服务器,然后服务器传回数据到ajax引擎,ajax引擎传输数据到客户端。故而无论服务器是否返回响应,客户端都可以随 意做其他事情,不会被卡死。
四.ajax的使用
实例:
1.新建一个web项目:
结构如图:
ajax.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function fn1(){
//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
var xmlHttp = new XMLHttpRequest();
//2、绑定监听 ---- 监听服务器是否已经返回相应数据
xmlHttp.onreadystatechange = function(){
//
if(xmlHttp.readyState==4&&xmlHttp.status==200){
//5、接受相应数据
var res = xmlHttp.responseText;
document.getElementById("span1").innerHTML = res;
alert(res);
}
}
//3、绑定地址
xmlHttp.open("GET","/WEB22/ajaxServlet?name=lisi",true);//异步
//4、发送请求
xmlHttp.send();
}
function fn2(){
//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
var xmlHttp = new XMLHttpRequest();
//2、绑定监听 ---- 监听服务器是否已经返回相应数据
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
//5、接受相应数据
var res = xmlHttp.responseText;
document.getElementById("span2").innerHTML = res;
}
}
//3、绑定地址
xmlHttp.open("POST","/WEB22/ajaxServlet",false);//同步
//4、发送请求
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send("name=wangwu");
}
</script>
</head>
<body>
<input type="button" value="异步访问服务器端" onclick="fn1()"><span id="span1"></span>
<br>
<input type="button" value="同步访问服务器端" onclick="fn2()"><span id="span2"></span>
<br>
<input type="button" value="测试按钮" onclick="alert()">
</body>
</html>
其中要注意ajax的readyState 属性用法,如图:
注意:
如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:
xmlhttp.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
AjaxServlet.java:
package com.itheima.ajax01;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
/*
response.getWriter().write("zhangsan");
try {
Thread.sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}*/
String parameter = request.getParameter("name");
response.getWriter().write(Math.random()+parameter);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
运行界面:
测试结果:点击异步访问按钮后,点击测试按钮,弹出alert对话框
点击同步访问按扭后,点击测试按钮,无响应