文章目录
- 一、关于Ajax
-
- 1.1 概述
- 1.2 全局刷新与异步刷新
- 二、XMLHttpRequest对象
-
- 2.1 XMLHttpRequest中的相关方法与属性
- 2.2 XMLHttpRequest使用步骤
- 三、Ajax案例
-
- 3.1 计算bmi值
一、关于Ajax
1.1 概述
ajax:Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
- ajax是用来做局部刷新的。局部刷新使用的核心对象是异步对象（XMLHttpRequest）这个异步对象是存在浏览器内存中的 ，使用javascript语法创建和使用XMLHttpRequest对象。
1.2 全局刷新与异步刷新
- 全局刷新： 整个浏览器被新的数据覆盖。 在网络中传输大量的数据。 浏览器需要加载，渲染页面。
- 局部刷新：在浏览器器的内部，发起请求，获取数据，改变页面中的部分内容。其余的页面无需加载和渲染。 网络中数据传输量少， 给用户的感受好。
- ajax是一种做局部刷新的新方法（2003左右），不是一种语言。 ajax包含的技术主要有javascript,dom,css, xml等等。核心是javascript 和 xml
javascript：负责创建异步对象， 发送请求， 更新页面的dom对象。 ajax请求需要服务器端的数据。
xml： 网络中的传输的数据格式。 使用json替换了xml
二、XMLHttpRequest对象
2.1 XMLHttpRequest中的相关方法与属性
- 常用方法
| 方法名 | 说明 |
|---|---|
| open(method,URL,async) | 建立与服务器的连接 method参数指定请求的HTTP方法,典型的值是GET或POST URL参数指定请求的地址 async参数指定是否使用异步请求，其值为true或false(默认是true) |
| setRequestHeader(header,value) | 设置请求的头信息 |
| send(content) | 发送请求 content参数指定请求的参数 |
- 常用属性
| 属性名 | 说明 |
|---|---|
| onreadystatechange | 指定响应请求的回调函数 |
| readystate | XMLHttpRequest执行请求和响应过程的状态信息 |
| status | HTTP请求响应的状态码 |
| responseText | HTTP请求响应的文本内容 |
2.2 XMLHttpRequest使用步骤
1.创建异步对象 var xmlHttp = new XMLHttpRequest();
2.给异步对象绑定事件。：当异步对象发起请求，获取了数据都会触发这个事件。这个事件需要指定一个函数， 在函数中处理状态的变化。onreadystatechange
- 异步对象的属性readyState 表示异步对象请求的状态变化
- 回调：当请求的状态变化时，异步对象会自动调用onreadystatechange事件对应的函数
| 状态值 | 说明 |
|---|---|
XMLHttpRequest对象没有完成初始化, | |
| 1 | XMLHttpRequest对象开始发送请求 |
| 2 | XMLHttpRequest对象的请求发送 |
| 3 | XMLHttpRequest对象开始读取响应，还没有结束，从服务器端获取了数据，此时3， 注意3是异步对象内部使用， 获取了原始的数据 |
| 4 | XMLHttpRequest对象读取响应结束，异步对象把接收的数据处理完成后。 此时开发人员在4的时候处理数据 |
xmlHttp.onreadystatechange= function(){
处理请求的状态变化。
if(xmlHttp.readyState == 4 && xmlHttp.status== 200 ){
//可以处理服务器端的数据，更新当前页面
var data = xmlHttp.responseText;
document.getElementById("name").value= data;
}
}
3.初始异步请求对象,异步的方法open()
xmlHttp.open(请求方式get|post, "服务器端的访问地址", 同步|异步请求（默认是true，异步请求）)
4.使用异步对象发送请求xmlHttp.send()
- 获取服务器返回的数据时，使用异步对象的属性 responseText，例如：
xmlHttp.responseText
三、Ajax案例
3.1 计算bmi值
- index.jsp
<html>
<head>
<title>JSP - Hello World</title>
</head>
<body>
<div>
<!--此处没有使用Ajax-->
身高（米）：<input type="text" id="height">
体重（公斤）：<input type="text" id="weight">
<button type="button" value="bmi" onclick="doAjax()">提交</button>
<div id="data">等待数据更新...</div>
</div>
<script>
function doAjax(){
//1.创建异步对象
var xmlHttp = new XMLHttpRequest();
//2.绑定事件
xmlHttp.onreadystatechange = function (){
//处理服务器返回的数据，更新当前页面
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
// alert("readyState属性值 = " + xmlHttp.responseText)
var data = xmlHttp.responseText;
//更新页面数据
document.getElementById("data").innerText = data;
}
}
//3.初始请求数据
//获取dom对象的value值
var height = document.getElementById("height").value;
var weight = document.getElementById("weight").value;
var param = "&weight=" + weight + "&height=" + height;
alert("param: " + param);
xmlHttp.open("get","bmiAjax?" + param,true);
//4.发送请求
xmlHttp.send();
}
</script>
</body>
</html>
- BmiServlet.java
@WebServlet("/bmiAjax")
public class BmiServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("接收到Ajax的请求");
String weight = req.getParameter("weight");
String height = req.getParameter("height");
//计算bmi
Float fWeight = Float.valueOf(weight);
Float fHeight = Float.valueOf(height);
float bmi = fWeight / (fHeight * fHeight);
String msg = "您的bmi是：" + bmi;
resp.setContentType("text/html;charset=utf-8");
PrintWriter printWriter = resp.getWriter();
printWriter.println(msg);
printWriter.flush();
printWriter.close();
}
}
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)