全局刷新:整个浏览器被新的数据覆盖,在网络中传输大量数据。
局部刷新:在浏览器内部发起请求,获取数据,改变页面中的部分内容,网络中数据量传输少。
AJAX是用来做局部刷新的。
局部刷新使用的核心对象是:异步对象(XMLHttpRequest)
这个异步对象是存在浏览器内存中,使用javascript语法创建和使用XMLHttpRequest对象。
ajax是一种做局部刷新的方法,不是一种语言
dom,css,xml等等。核心是JS和XML
javascript:负责创建异步对象,发送请求,更新页面的dom对象,ajax请求需要服务器端的数据
xml:网络中传输的数据格式(现在使用了JSON替换了XML)
四步:
创建异步对象-->给异步对象绑定事件-->初始化请求参数-->使用异步对象发送请求
1.创建异步对象:
var xmlHttp = new XMLHttpRequest();
2.给异步对象绑定事件(onreadystatechange):
当异步对象发起请求,获取数据,都会触发该事件。
这个事件需要指定一个函数,在函数中处理状态的变化。
例如:
xmlHttp.onreadystatechange = function(){}
异步对象readyState属性:
readyState 表示异步对象请求的状态变化
0:创建异步对象时:new XMLHttpRequest();
1:初始化异步请求对象:xmlHttp.open();
2:发送请求:xmlHttp.send();
3:从服务器端获取了数据:3是异步对象内部使用
4:异步对象把接收的数据处理完成后,开发人员可以在此时处理数据
异步对象status属性
status 表示网络请求的状况
200:网络请求成功
3.初始异步请求对象
异步的方法open()
xmlHttp.open(请求方式get/post,“服务器端的访问地址”,同步/异步请求(默认是true,异步))
例如:
xmlHttp.open(“get”,“loginServlet?name=zhangsan”,true);
4.使用异步对象发送请求
xmlHttp.send();
获取服务器端返回的数据
使用异步对象的属性:responseText
例如:
xmlHttp.responseText
举例(单个数据传输):
<script type="text/javascript">
function search() {
//发起ajax请求,传递参数给服务器,服务器返回数据
//1.创建异步对象
var xmlHttp = new XMLHttpRequest();
//2.绑定事件
xmlHttp.onreadystatechange = function () {
//如果能到第四步发送,并且返回的状态码是200
if(xmlHttp.readyState==4&&xmlHttp.status==200){
var name=xmlHttp.responseText;//接收Servlet传输过来的数据
document.getElementById("proname").value=name;
}
}
//3.初始化异步对象
var proid=document.getElementById("proid").value;
//get请求方式,传参数,异步
xmlHttp.open("get","queryProvince?proid="+proid,true);
//4.发送请求
xmlHttp.send();
}
script>
<body>
<p>ajax根据省份id获取名称p>
<table>
<tr>
<td>省份编号:td>
<td><input type="text" id="proid">
<input type="button" value="搜索" onclick="search()">
td>
tr>
<tr>
<td>省份名称:td>
<td><input type="text" id="proname" readonly>td>
tr>
table>
<form action="find">
<input type="submit" value="查询省份" >
form>
body>
Servlet:doGet方法
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String proid=request.getParameter("proid");
ProvinceDao dao=new ProvinceDao();
String name="默认没有数据";
//访问dao
if(proid!=null&&!"".equals(proid.trim())){
name=dao.queryProvinceNameById(Integer.valueOf(proid));
}
//使用HttpServletResponse输出数据
response.setContentType("text/html;charset=utf-8");
PrintWriter pw=response.getWriter();
pw.print(name);//把name传给AJAX中的异步对象
pw.flush();
pw.close();
}
JSON分类:
json对象(JSONObject)格式: 名称:值
json数组(JSONArray)格式: [{JSON对象},{JSON对象},……]
为什么使用JSON?(优点)
JSON格式好理解
JSON格式数据在多种语言中,比较容易处理
JSON格式数据占用的空间小,在网络中传输快
处理JSON的工具库:
gson(Google)、fastjson(阿里)、jackson
在JS中,可以把JSON格式的字符串,转为JSON对象
代码实例:
<head>
<title>使用JSON格式的数据title>
<script type="text/javascript">
function doSearch() {
//1.创建异步对象
var xmlHttp=new XMLHttpRequest();
//2.绑定事件
xmlHttp.onreadystatechange=function () {
if(xmlHttp.readyState==4&&xmlHttp.status==200){
var data=xmlHttp.responseText;//接收了这个json格式的字符串
//eval方法把JSON格式的字符串转换为JSON对象
var jsonObject=eval("("+data+")");
//更新dom对象
document.getElementById("proname").value=jsonObject.province;
document.getElementById("projiancheng").value=jsonObject.jiancheng;
document.getElementById("shenghui").value=jsonObject.city;
}
}
//3.初始化异步对象
var proid=document.getElementById("proid").value;
xmlHttp.open("get","queryjson?proid="+proid,true)
//4.发送请求
xmlHttp.send();
}
script>
head>
<body>
<p>ajax请求使用json格式的数据p>
<table>
<tr>
<td>省份编号td>
<td><input type="text" id="proid">
<input type="button" value="搜索" onclick="doSearch()">
td>
tr>
<tr>
<td>省份名称td>
<td><input type="text" id="proname">td>
tr>
<tr>
<td>省份简称td>
<td><input type="text" id="projiancheng">td>
tr>
<tr>
<td>省会名称td>
<td><input type="text" id="shenghui">td>
tr>
table>
body>
Servlet:doGet方法
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//默认值,{}表示json格式的数据,空的json
String json="{}";
//1.获取请求参数省份ID
String proId=request.getParameter("proid");
//判断proid
if(proId!=null&&proId.trim().length()>0){
ProvinceDao dao=new ProvinceDao();
Province pro=dao.queryProvinceById(Integer.valueOf(proId));
//使用jackson把Province对象转为JSON格式的字符串
ObjectMapper om =new ObjectMapper();
json=om.writeValueAsString(pro);
}
//把获取的数据,通过网络传给AJAX中的异步对象
//指定服务器返回给浏览器的是JSON格式的数据
response.setContentType("application/json;charset=utf-8");
PrintWriter pw=response.getWriter();
pw.println(json);//将这个json格式的字符串传给AJAX
pw.flush();
pw.close();
}