Ajax # ajax简单概述
Posted LRcoding
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax # ajax简单概述相关的知识，希望对你有一定的参考价值。
1. Ajax概述
- 异步的(Asynchronous)，使用Ajax代表不使用之前的转发重定向操作 异步访问，局部刷新
- 使用XMLHttpRequest技术整合
2. 原生Ajax实例 – 使用jsp
【【在<input>标签内，加入 onblur 事件】】
【获取输入】并判断，在页面内进行前端验证
======================================================================================
JS访问服务器
// 1.创建XMLHttpRequest对象
var xhr;
function createXHR(){
if(window.ActiveObject){ // IE
xhr = new ActiveObject('Microsoft.XMLHTTP');
} else {
xhr = new XMLHttpRequest();
}
}
// 2.和服务器建立连接 -- get请求
xhr.open("get", "/example/index.jsp?name=" + name);
// post请求
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.open("post", "/example/index.jsp");
// 3.指定回调函数
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
// 1.获取返回值
var text = xhr.responseText();
// 2.处理返回值.....
} else {
alert(xhr.status + " " + xhr.statusText);
}
}
};
// 4.发送请求给服务器 -- get请求的发送方式
xhr.send();
// post请求
xhr.send("name=" + name);
3. 原生Ajax实例 – 使用servlet
【【在<input>标签内，加入 onblur 事件】】
【获取输入】并判断，在页面内进行前端验证
=====================================================================================
JS访问后端 servlet
// 1.创建XMLHttpRequest对象 ：与上面类似
createXHR();
// 2.和服务器建立连接
xhr.open("post", "/example/servlet/CodeServlet");
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
// 3.指定回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
// 1.获取返回值
var text = xhr.responseText();
// 2.处理返回值.....
var arr = text.split(",");
arr[0] arr[1]
} else {
alert(xhr.status + " " + xhr.statusText);
}
}
};
// 4.发送请求给服务器
xhr.send("code="+code);
======================================================================================
服务端（CodeServlet）【需要配置web.xml】
public class CodeServlet extends HttpServlet {
protected void service(HttpServletRequest req, HttpServletResponse resp) throws Exception {
// 获取数据
String code = req.getParameter("code");
// 调用业务层，访问数据库
Map<String, String> map = new HashMap<>();
map.put("010", "北京，北京");
map.put("", "");
String content = map.get(code);
if(content == null){
content = "未知，未知";
}
// 返回结果
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().println(content);
}
}
4. jQuery封装
- 引入jQuery
<script type="text/javascript" src="js/jquery.jqprint-0.3.js"></script>
- 通过jQuery使用ajax
$(function(){
// get请求，无法处理错误
$.get("/example/index.jsp", "name="+name, function(result){
// result就是结果
});
// post请求
$.post("/example/index.jsp", {"name":name}, function(result){
// result就是结果
});
--------------------------------------------------------------------------------
示例：
$.ajax(function(){
url: "/example/index.jsp",
type: "get",
data: "name="+name,
dataType: "text",
success: function(msg){
// 成功处理
},
error: function(msg){
// 错误处理
}
});
});
5. JSON
Ajax返回复杂数据，比如集合、对象等，使用JSON
-
JSON对象
var person = {"name": "你好", "age": 25, "wife": null}; person.name ==> 你好 -
JSON数组
var arr = ["HTML", "CSS", "JS"]; arr[0] ==> HTML -
对象数组（相当于集合）
var users = [{"id": 1, "username": "root", passwd: "admin"}, {"id": 2, "username": "user", passwd: "123"} ]; users[0].id ==> 1 -
不规则数据
var china = {name: "中国", provinces:[ {name:"山东省", cities:{city:["临沂", "蒙阴"]}}， {name:"河北省", cities:{city:["石家庄", "张家口", "承德"]}} ] }; china.provinces[1].cities.city[1] ==> 张家口 -
JSON对象和JSON字符串之间的转换
var person = {"name": "你好", "age": 25, "wife": null}; // JSON对象 var person1 = {"name": "你好", "age": 25, "wife": null}; // JSON字符串 JSON字符串 ==> JSON对象 1. JSON.parse(person1); 2. eval("(" + person1 + ")"); JSON对象 ==> JSON字符串 JSON.stringify(person); treeify【树化】
6. 简单示例：三级联动菜单
自关联(适合于树状结构的)
provinces：
id
ptitle
citys:
id
ctitle
proid
合并为一张表
areas:
id
atitle
pid
自关联，表中的某一列，关联了这个表中的另外一列，但是它们的业务逻辑含义是不一样的
因为省没有所属的省份，所以pid可以填写为null
城市所属的省份pid，填写省所对应的编号id
在这个表中，结构不变，可以添加区县、乡镇街道、村社区等信息
自连接查询其实等同于连接查询，需要两张表，只不过它的左表（父表）和右表（子表）都是自己。做自连接查询的时候，是自己和自己连接，分别给父表和子表取两个不同的别名，然后附上连接条件。
查询省的名称为“山东省”的所有城市
select city.*
from areas as city
inner join areas as province
on city.pid = province.aid
where province.atitle='山东省';
三级联动
- 省市县三级区域一张表即可
- 通过外键建立上下级关系 自关联
页面：
<style type="text/css">
select{
width:300px;
height:30px;
}
#showdiv{
width:920px;
margin:auto;
margin-top:200px;
}
</style>
<div id="showdiv">
<select name="province" id="province" οnchange="getCity()"></select>
<select name="city" id="city" οnchange="getCounty()"></select>
<select name="county" id="county"></select>
</div>
<script>
// 页面加载完成后，立即加载所有的省级行政区别写入指定的下拉列表中
$(function(){
$.ajax({
url:"servlet地址",
type:"get",
data:{parentId:0},
dataType:"text",
success:function(res){
// 返回的是JSON字符串，将它转换为JSON对象
var arr = eval("(" + res + ")");
// 生成option字符串
var str = "";
for(var i = 0; i < arr.length; i++){
str +=
'<option value="+arr[i].areaId+">+arr[i].areaName+</option>'
}
// 写到下拉列表中
$("#province").html(str);
// 调用getCity()
getCity();
},
error:function(){
}
});
});
// 改变了省级行政区后，加载该省的市级行政区，并写入对应的下拉列表中
function getCity(){
var parentId = $("#province").val();
$.ajax({
url:"servlet地址",
type:"get",
data:{parentId:parentId},
dataType:【"json"】,
success:function(【arr】){
// 返回的是JSON字符串，将它转换为JSON对象
var arr = eval("(" + res + ")");
// 生成option字符串
var str = "";
for(var i = 0; i < 【arr.length】; i++){
str +=
'<option value="+arr[i].areaId+">+arr[i].areaName+</option>'
}
// 写到下拉列表中
$("#city").html(str);
getCounty();
},
error:function(){
}
});
}
//改变了市级行政区后，加载该市的行政区，并写入对应的下拉列表中
function getCounty(){
var parentId = $("#city").val();
$.ajax({
url:"servlet地址",
type:"get",
data:{parentId:parentId},
dataType:"text",
success:function(res){
// 返回的是JSON字符串，将它转换为JSON对象
var arr = eval("(" + res + ")");
// 生成option字符串
var str = "";
for(var i = 0; i < arr.length; i++){
str +=
'<option value="+arr[i].areaId+">+arr[i].areaName+</option>'
}
// 写到下拉列表中
$("#county").html(str);
},
error:function(){
}
});
}
</script>
后端servlet中：
- 获取传入的parentid
- 调用持久层方法，获取指定parentid下的下级区域列表
- 将List转换为字符串（使用Gson工具类）
- Gson gson = new Gson();
- gson.toJson(list);
- 返回结果
以上是关于Ajax # ajax简单概述的主要内容，如果未能解决你的问题，请参考以下文章
Spring MVC 3.2 Thymeleaf Ajax 片段
html PHP代码片段： - AJAX基本示例：此代码演示了使用PHP和JavaScript实现的基本AJAX功能。
JavaLearn#（25）Ajax相关知识三级联动案例Bootstrap入门栅格系统排版表格字体图标等简单概述