Java0基础_day18_Javaweb前后端融合_Ajax

标签：JavaScript-前端、HttpServlet-后端、XML-JSON-中介

 

1.Ajax简介

Ajax是一种异步的JS和XML联合体，可以理解为一种新方法，整合了前端的JavaScript、HTML、CSS、DOM编程和后端的HttpServlet-Tomcat、Mysql数据库，其中JS用于创建异步对象并代替浏览器发送请求，而Servlet用于操作数据库，返回数据，二者由xml或者json统一。

【注意】现在以JS和JSON居多，因为json轻量级、体积小、易解析。

---

2.Ajax四步法

第一步：在前端创建异步对象XMLHttpRequest→XHR

var xmlHttp = new XMLHttpRequest();

第二步：注册网页状态变化事件

xmlHttp.onreadystatement = function(){

    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
        //处理返回的结果，反应到DOM对象上；一般需要xmlhttp.responseText;
    }
}

第三步：拼接字符串、URL设置、开启连接

var name = document.getElementById("name").value;
var tizhong = document.getElementById("tizhong").value;
var shengao = document.getElementById("shengao").value;
 //拼接位URL格式
var param = "name="+name+"&"+"tizhong="+tizhong+"&"+"shengao="+shengao;
xmlhttp.open("get","bimajaxurl?"+param,true);//拼接为URL发送

第四步：发送数据

 xmlhttp.send();

【交互过程】用户输入http://localhost:8080/jj/，然后自动到站点下的index.html和index.jsp，后者展现输入框，用户输入，然后通过index.jsp获取输入信息，通过四步法构造Ajax异步对象，拼接为URL字符串进行数据访问；后端Servlet从发过来的URL中得到几个字段，然后经过计算后返回数据，在前端页面展示。

【涉及技术】index.jsp→四步法→URL→getParameter→后台计算→response.getWriter().print()→前台获取→异步对象.responseText→更新DOM.

---

3.Ajax项目→根据编号返回省份的查询结果

原材料：mysql建表，从该表查询

DROP TABLE IF EXISTS `province`;
CREATE TABLE `province` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL COMMENT '省份名称',
  `jiancheng` varchar(255) DEFAULT NULL COMMENT '简称',
  `shenghui` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8;


INSERT INTO `province` VALUES ('1', '河北', '冀', '石家庄');
INSERT INTO `province` VALUES ('2', '山西', '晋', '太原市');
INSERT INTO `province` VALUES ('3', '内蒙古', '蒙', '呼和浩特市	');
INSERT INTO `province` VALUES ('4', '辽宁', '辽', '沈阳');
INSERT INTO `province` VALUES ('5', '江苏', '苏', '南京');
INSERT INTO `province` VALUES ('6', '浙江', '浙', '杭州');
INSERT INTO `province` VALUES ('7', '安徽', '皖', '合肥');
INSERT INTO `province` VALUES ('8', '福建', '闽', '福州');
INSERT INTO `province` VALUES ('