Ajax
Ajax
Ajax
Asynchronous JavaScript And XML:异步的JavaScript和XML
Ajax并不是新的编程语言,指的是一种交互方式,异步加载,客户端和服务器的数据交互更新在局部页面的技术,不需要刷新整个页面(局部刷新)。
优点:
1.局部刷新,效率更高。 2.用户体验更好。
示例:同步加载
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>同步加载</title>
</head>
<body>
${str}
<form action="/AjaxServlet1" method="post">
<input type="text" name="text">
<input type="submit">
</form>
</body>
</html>
package com.wildfire.servlet.Ajax;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/AjaxServlet1")
public class AjaxServlet1 extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
String str="HelloWord!";
req.setAttribute("str",str);
req.getRequestDispatcher("Ajax1_tongbu.jsp").forward(req,resp);
}
}
先点击提交查询按钮,然后开始在文本框中输入内容,三秒后,当文本框前弹出“HelloWord”的时候,会中断你的录入。而使用Ajax就不会这样。
基于JQuery的Ajax
导入JQuery:在web下新建js,将jquery-3.4.1.js粘贴到js文件下,在jsp页面中加入如下代码:
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
IDEA--》工具栏--》Build--》Rebuild Project(使js下的jquery-3.4.1.js同步到out中)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Ajax2</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script>
$(function(){
var btn=$("#btn");
btn.click(function () {
$.ajax({
//相当于form表中的action
url:'/AjaxServlet1',
//相当于form表单中的method
type:'post',
//传到Servlet的参数,相当于地址栏拼接了一个id=1
data:'id=1',
//服务端返回的数据类型(该实例中返回的是HelloWord)
dataType:'text',
//成功
success:function (data) {
var text=$("#text")
text.before("<span>"+data+"</span><br>")
}
})
})
})
</script>
</head>
<body>
${str}
<input type="text" name="text" id="text">
<input type="submit" id="btn">
</body>
</html>
package com.wildfire.servlet.Ajax;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/AjaxServlet1")
public class AjaxServlet1 extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String id=req.getParameter("id");
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
String str="HelloWord!";
resp.setContentType("UTF-8");
//不能跳转到Jsp(会将所有的Jsp源代码加载回去),只能将所需数据返回。
resp.getWriter().write(str);
/*req.setAttribute("str",str);
req.getRequestDispatcher("Ajax2.jsp").forward(req,resp);*/
}
}
使用Ajxa,点击提交查询按钮后开始书写,三秒钟后弹出“HelloWord?”,但是同时你仍然可以继续在输入框中输入你想输入的内容。
使用Ajax的注意点:
1.前端:不能使用表单提交(表单提交是同步),改用JQuery的方式动态绑定事件提交。
2.后端:不能跳转到Jsp(会将所有的Jsp源代码加载回去),只能将所需数据返回。
如果使用跳转到Jsp,返回的代码如图:
如果我们用alert(data)将它输出出来,如下图:
传统WEB数据交互和Ajax数据交互的区别:
客户端请求方式不同:
传统WEB数据交互:浏览器发送同步请求(form表单、a标签)。
Ajax:异步引擎对象发送异步请求。
服务器响应方式不同:
传统WEB数据交互:响应一个完整的JSP页面(视图)。
Ajax:响应需要的数据。
客户端处理方式不同:
传统:需要等待服务器完成响应并且重新加载整个页面之后,用户才能进行后续的操作
Ajax:动态更新页面中的局部内容,不影响其他操作。
Ajax原理(了解)
Ajax语法(基于JQuery)
$.ajax({属性})
常用属性:
url:请求的后端服务地址
type:请求⽅式,默认 get
data:请求参数
dataType:服务器返回的数据类型,多数是text/json
success:请求成功的回调函数
error:请求失败的回调函数
complete:请求完成的回调函数(⽆论成功或者失败,都会调⽤)
JSON
JavaScript Object Notation,⼀种轻量级数据交互格式,完成 js 与 Java 等后端开发语⾔对象数据之间 的转换。
例如,在java中创建一个User对象:
package com.wildfire.javabean;
public class User {
private Integer id;
private String name;
private Integer age;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
public User(Integer id, String name, Integer age) {
this.id = id;
this.name = name;
this.age = age;
}
}
User user=new User(20183694,"张三",21);
而使用JSON:
var user = {
id:20183694,
name:"张三",
age:21
}
使用JSON
要导入六个jar包:
示例:
package com.wildfire.servlet.Ajax;
import com.wildfire.javabean.User;
import net.sf.json.JSONObject;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
User user=new User(20183694,"张三",21);
resp.setCharacterEncoding("UTF-8");
//将java对象转化为JSON格式
JSONObject jsonObject =JSONObject.fromObject(user);
resp.getWriter().write(jsonObject.toString());
}
}
<%--
Created by IntelliJ IDEA.
User: DELL
Date: 2020/11/19
Time: 23:31
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Ajax3</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script>
$(function(){
var btn=$("#btn");
btn.click(function(){
$.ajax({
url:'/AjaxServlet',
type:'post',
dataType:'json',
success:function(data){
$("#id").val(data.id);
$("#name").val(data.name);
$("#age").val(data.age);
}
});
});
})
</script>
</head>
<body>
学号<input type="text" name="id" ><br>
姓名<input type="text" name="name"><br>
年龄<input type="text" name="age"><br>
<input type="submit" value="查找" id="btn">
</body>
</html>
Ajax实例:省市区三级联动
参考博客: