AJAX学习笔记
关于全局刷新和局部刷新
全局刷新：整个浏览器被新的数据覆盖，在网络中传输大量数据。
局部刷新：在浏览器内部发起请求，获取数据，改变页面中的部分内容，网络中数据量传输少。
AJAX是用来做局部刷新的。
局部刷新使用的核心对象是：异步对象（XMLHttpRequest）
这个异步对象是存在浏览器内存中，使用javascript语法创建和使用XMLHttpRequest对象。
AJAX是什么
ajax是一种做局部刷新的方法，不是一种语言
dom，css，xml等等。核心是JS和XML
javascript：负责创建异步对象，发送请求，更新页面的dom对象，ajax请求需要服务器端的数据
xml：网络中传输的数据格式（现在使用了JSON替换了XML）
AJAX使用XMLHttpRequest对象
四步：
创建异步对象-->给异步对象绑定事件-->初始化请求参数-->使用异步对象发送请求
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分类：
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();
}