文章目录
一、关于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事件对应的函数
状态值 | 说明 |
---|---|
0 | XMLHttpRequest对象没有完成初始化, new XMLHttpRequest();
|
1 | XMLHttpRequest对象开始发送请求 xmlHttp.open()
|
2 | XMLHttpRequest对象的请求发送 xmlHttp.send() , |
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,异步请求))
xmlHttp.open("get", "loginServlet?name=zs&pwd=123",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();
}
}