1.Ajax是什么
Ajax是指异步JavaScript和XML(Asynchronous JavaScript And XML)
Ajax不是一个新的语言,是对所学技术整合的应用
使用Ajax是为了实现异步请求,实现页面局部刷新,为了提升用户体验
1.1什么是异步
区分异步和同步
同步:
一个执行完成另一个才能开始执行
当浏览器向服务器发送请求时,要接收服务器发送回来的响应。在这个时间中,浏览器不能做其他工作。
如果服务器没有发回响应,浏览器是白屏
<a href="demo1.do">普通请求</a><br> |
异步:
两个可以同时执行
当浏览器向服务器发送请求时,要接收服务器发送回来的响应。在这个时间中,浏览器可以做其他工作。
如果服务器没有发回响应,浏览器可以继续浏览页面内容
<a href="javascript:toajax()">ajax异步请求</a> |
function toajax(){ createXHR(); xhr.onreadystatechange = callback; xhr.open("GET", "${pageContext.request.contextPath}/demo1.do"); xhr.send(null); } function callback(){ |
@WebServlet("/demo1.do") public class Demo1Controller extends HttpServlet { private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("被调用了一次!"); } |
1.2javascript
js是ajax的核心
普通方式是由浏览器向服务器发送请求
Ajax是在js中,由js的对象向服务器发送请求
1.3 XML/JSON
使用ajax时,在页面上都是进行局部刷新
使用ajax进行局部刷新时,一般都会返回数据
现在基本上返回的都是数据,而数据要有相应的表示格式。
我们以前使用XML作为数据传递对象
<?xml version="1.0" encoding="UTF-8"?> <students> <student id="1"> <name>th</name> <age>20</age> <sex>M</sex> </student> <student id="2"> <name>lx</name> <age>20</age> <sex>M</sex> </student> </students> |
现在使用JSON表示数据
[{"id":1, "name":"th", "age":20, "sex":"M"},{"id":2, "name":"lx", "age":20, "sex":"M"}] |
2.必须记住的几句话
2.1 请求和响应都是纯文本
2.2 一个请求对应一个响应
2.3 针对一个资源的请求,响应内容一致
2.4 ajax是使用JavaScript发送的异步请求
2.5 谁发的请求,谁来接响应
3.Ajax的工作原理
Ajax使用js中的xhr对象向服务器发送异步请求,js中的xhr对象接收服务器发回的响应
1,2 在浏览器端使用事件调用方式调用js,在js中创建xhr对象
3 由xhr对象向服务器发送请求
4 服务器实现功能
5 服务器将响应内容发送给js中的xhr对象
6 响应回来后通过js代码才能影响浏览器的页面展示
注意:ajax整个工作流程中,只使用一个XHR-XMLHttpRequest对象
4 .关于XMLHttpRequest对象
在ajax应用时,就是使用js中的xhr对象实现异步请求,就是使用xhr对象的属性,事件,方法
4.1 onreadystatechange事件
表示xhr对象状态改变的事件
在js中注册事件函数: xhr.onreadystatechange = fn;
在整个ajax过程中,xhr对象的状态会发生多次的改变。
4.2 readyState属性
表示xhr对象状态的属性
xhr对象在整个过程中,状态会发生多次的改变,但是只有在状态4时,才能正常使用
4表示完成,请求/响应完成。
状态描述:
0 请求尚未初始化 (在调用open()之前)
1 请求已提出 (在调用send()之前)
2 请求已发送 (这里通常可以从响应中得到头部内容)
3 请求处理中 (响应中通常有部分数据可用,但是服务器还没有完成响应)
4 请求已完成 (可以访问服务器响应并使用它)
4.3 status属性
表示xhr对象接收的响应状态码
404 没找到资源
500 服务器发生了错误
200 success
4.4 responseText属性
表示xhr对象的响应文本
4.5 open(method, url)方法
Xhr对象的open方法表示创建一个请求
method:请求方式
4.6 send()方法
Xhr对象的send方法表示发送请求
xhr.send(null);
send方法的参数,请求时的请求参数
5. 使用XHR发送异步请求的步骤
5.1 创建XHR对象
针对不同的浏览器,创建方式不一样
<script type="text/javascript"> var xhr = null; function createXHR(){ if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); }else if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ alert("can't create xhr object!"); } } |
5.2在html页面上找到一个事件调用发送请求的函数
<body> <button onclick="toajax()">ajax请求</button>……. |
5.3配置一个回调函数
xhr对象是否接收了响应,如何判断?onreadystatechange事件
xhr.onreadystatechange = 回调函数;
function toajax(){ createXHR(); xhr.onreadystatechange = callback;
} |
5.4写回调函数:影响页面的显示效果
function callback(){ if(xhr.readyState == 4){ if(xhr.status == 200){ var responseText = xhr.responseText; alert(responseText); } } } |
5.5向服务器发送请求
function toajax(){ createXHR(); xhr.onreadystatechange = callback; xhr.open("GET","${pageContext.request.contextPath}/index.jsp"); xhr.send(null); } |