AJAX
1.什么是AJAX？
• Asynchronous JavaScript and Xml 异步的JavaScript和Xml
• AJAX是一种用来改善用户体验的技术，其实质是，使用XMLHttpRequest对象异步地向服务器发请求
• 服务器返回部分数据，而不是一个完整的页面，以页面无刷新的效果更改页面中的局部内容
1.ajax不是新的技术,是javascript,xml,XMLHttpRequest(xhr)的结合体,完成异步提交功能.
2.同步提交:用户提交数据后,当前页面不可以操作;页面响应成功,才可以操作页面.
3.异步提交:用户提交数据后,还可以在当前页面上操作;和服务器响应是否成功,没有太大影响.
4.特点:从服务器端获取一小部分数据.
2.原理
用户请求交给xhr处理,然后xhr把请求提交给服务器,服务器响应数据给xhr,由xhr把数据接收回来,通过javascript设置数据到页面
3.如何写AJAX？
1.创建xhr对象
2.监听事件，处理事件
2.1从创建xhr到响应数据成功，监听状态的变化onreadystatechanage=function();
readystate:
0：未初始化
1：初始化成功
2：接受数据
3：解析数据
4：响应成功
3.打开链接
4.发送请求
4.底层实现
1.jsp页面
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>AJAX演示</title>
</head>
<script type="text/javascript">
function getXHR(){
var xhr;
if(window.XMLHttpRequest){//所有浏览器都支持
xhr=new XMLHttpRequest();
return xhr;
}
}
//post请求
function checkName(){
/*1.创建xhr对象*/
var xhr=getXHR();
/*2.监听事件，处理事件*/
xhr.onreadystatechange=function(){
//判断获取状态4并且响应的状态200
if(xhr.readyState==4&&xhr.status==200){
//接收服务器响应的数据
var date=xhr.responseText;
console.log(date);
}
}
/*3.打开链接 xhr.open(请求方式，请求路径，同步、异步)*/
//获取用户输入的数据
var userName=document.getElementById("name").value;
xhr.open("get","${pageContext.request.contextPath}/tocheckName.do");
//post请求必须设置请求头
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
/*4.发送请求*/
xhr.send("name="+userName);
}
</script>
<body>
<div>
账号：<input type="text" id="name" οnblur="checkName()"/>
密码：<input type="text" id="pwd" οnblur="checkPwd()"/>
<button id="login">登录</button>
</div>
<img width="500px" height="600px" src="${pageContext.request.contextPath}/999.jpg">
</body>
</html>
2.控制层
@RequestMapping("login.do")
public String login(){
return "loginAjax";
}
@RequestMapping(value="tocheckName.do",produces="text/html;charset=utf-8")
@ResponseBody
public String tocheckName(String name){
String user_name="admin";
if(user_name.equals(name)){
return "0 对了";
}else{
return "1 错了";
}
}
结果演示：
当name与你输入的名字不匹配，则会响应错误。
5.JQuery对ajax的支持
语法：
$.ajax{属性名：属性值，属性名：属性值，…}
属性名和属性值用来控制ajax对象如何向服务器发送请求
1.省市联动查询
1.jsp页面
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>AJAX演示</title>
</head>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
function getCity(provincedvalue){
$.ajax({
url:"${pageContext.request.contextPath}/getcities.do",//请求地址
dataType:"json", //服务器响应类型
type: "post", //请求方式
data: {"provincedcode":provincedvalue} , //请求参数
success:function(result){
if(result.state==1){
//获取id=city的标签
var c=$("#city");
var cities=result.date;
/*清空市的列表*/
c.html("<option>--请选择--</option>");
for(var i=0;i<cities.length;i++){
var cityName=cities[i].cityName;
var cityValue=cities[i].code;
//创建option对象
var option=new Option(cityName,cityValue);
//在option标签末尾
c.append(option);
}
}else{
console.log("521125");
alert(result.message);
}
}
})
}
</script>
<body>
<!--利用ajax进行二级联动查询-->
省：<select id="province" οnchange="getCity(this.value)">
<option value="0">--请选择--</option>
<option value="1">陕西省</option>
<option value="2">关东省</option>
</select>
市：<select id="city">
<option>--请选择--</option>
</select>
</body>
</html>
2.控制层数据处理
@RequestMapping("login.do")
public String login(){
return "loginAjax";
}
@RequestMapping("getcities.do")
@ResponseBody
public JsonResult<List<City>> togetcity(String provincedcode){
int code=Integer.parseInt(provincedcode);
if(code==1){//陕西省
List<City> list=new ArrayList<City>();
City c=new City(1,"西安");
City c2=new City(2,"铜川");
list.add(c);
list.add(c2);
return new JsonResult<List<City>>(list);
}
if(code==2){//关东省
List<City> list=new ArrayList<City>();
City c=new City(1,"陕北");
City c2=new City(2,"银川");
list.add(c);
list.add(c2);
return new JsonResult<List<City>>(list);
}
return null;
}
结果如下:
当点击陕西时
再点击省份；
2.用户名的校验
1.jsp页面
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>AJAX演示</title>
</head>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
function checkName(){
//获取用户名
var userName=$("#name").val();
$.ajax({
url:"${pageContext.request.contextPath}/tocheckName2.do", //请求地址
dataType:"json", //服务器响应类型
type: "get", //请求方式
data: {"name":userName} , //请求参数
/* async */ //同步/异步
success:function(result){ //ajax对象接受服务器的所有数据（回调函数）
if(result.state==1){
console.log(result.date.name);
}
if(result.state==0){//显示异常信息
$("#namespan").html(result.message).attr("style","color:red");
}
console.log(result.state);
console.log("521125");
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});
}
</script>
<body>
<!--JQuery对ajax的支持
语法：
$.ajax{属性名：属性值，属性名：属性值，....}
属性名和属性值用来控制ajax对象如何向服务器发送请求
-->
<div>
账号：<input type="text" id="name" οnblur="checkName()"/><span id="namespan"></span><br>
密码：<input type="text" id="pwd" οnblur="checkPwd()"/>
<span id="namespan"></span>
<!-- <button id="login">登录</button> -->
</div>
<%-- <img width="500px" height="600px" src="${pageContext.request.contextPath}/777.jpg"> --%>
<!--利用ajax进行二级联动查询-->
省：<select id="province" οnchange="getCity(this.value)">
<option value="0">--请选择--</option>
<option value="1">陕西省</option>
<option value="2">关东省</option>
</select>
市：<select id="city">
<option>--请选择--</option>
</select>
</body>
</html>
2.控制层数据处理
@RequestMapping("login.do")
public String login(){
return "loginAjax2";
}
@RequestMapping(value="tocheckName2.do")
@ResponseBody
public JsonResult<User> tocheckName2(String name){
User user=new User(1,"chao",20,"521125");
if(user.getName().equals(name)){
return new JsonResult<User>(user);
}else{
throw new RuntimeException("账号错误");
}
}
当输入用户名错误时：
服务端会返回异常信息，当前页面获取到这个信息，并通过javascript将这个异常信息渲染到当前页面上。
当输入用户名正确时；
服务端会将数据响应到当前页面；
11万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
