什么是Ajax ,异步,同步,JSON,XMLHttpRequest对象,什么是JSON,使用JQuery实现Ajax
Posted 小智RE0
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了什么是Ajax ,异步,同步,JSON,XMLHttpRequest对象,什么是JSON,使用JQuery实现Ajax相关的知识，希望对你有一定的参考价值。
什么是Ajax
Ajax即Asynchronous Javascript And XML（异步JavaScript和XML） 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: html 或 XHTML, CSS, javascript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。
Ajax实质是利用浏览器提供的对象
（XMLHttpRequest）;异步地向服务器发送请求，服务器返回部分数据，浏览器使用这些数据对页面做部分的更新，整个过程页面无刷新，不打断用户的操作。
同步异步概念
同步: 当客户端与服务器交互时,不能进行其他操作,需要等服务器响应数据过来;在这个过程中,客户端的操作会被打断; 而且服务器响应的过来时会刷新数据;
异步:客户端与服务器交互时,客户端还可以进行其他操作,客户端使用的是XMLHttpRequest对象与服务器交互的,那么服务器在响应时也是通过这个对象将提示信息返回,将信息更新到页面,页面不刷新.
例如,用户正在填写某个注册的表单,信息已经全部填写了,但是点击注册后,由于数据库中已存在了这个账户名,返回给用户信息提示时,用户之前填写的所有数据都被刷新清除了.
这要是用异步交互,那么用户填的数据就不会被全部清除了.
同步异步实例案例
(1)同步:
用户实体类User
public class User {
//Id
private int uId;
//用户名;
private String account;
//密码
private String password;
//性别
private String sex;
//年龄;
private int age;
//电话;
private String mobile;
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getMobile() {
return mobile;
}
public void setMobile(String mobile) {
this.mobile = mobile;
}
public int getuId() {
return uId;
}
public void setuId(int uId) {
this.uId = uId;
}
public String getAccount() {
return account;
}
public void setAccount(String account) {
this.account = account;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
数据访问交互层UserDao;
其中用到了自定义的JDBC工具类
public class UserDao {
//连接对象connection;
Connection connection = null;
//执行查询语句的PreparedStatement;
PreparedStatement pst = null;
//查询的结果集;
ResultSet resultSet = null;
/**
* 根据管理员账号查询管理员;
*/
public User findAdminByAccount(String account)throws SQLException{
User user=null;
try{
//加载数据库驱动;
connection=JdbcUtils.getConnection();
//定义SQL语句
String sql="select Id,account from tb_admin where account=? ";
//预编译;
pst=connection.prepareStatement(sql);
//向占位符 ? 赋值;
pst.setString(1,account);
//获取结果集;
resultSet= pst.executeQuery();
while (resultSet.next()){
user=new User();
user.setuId(resultSet.getInt("Id"));
user.setAccount(resultSet.getString("account"));
}
}finally {
//关闭资源;
JdbcUtils.closeSource(connection,pst,resultSet);
}
return user;
}
}
Jdbc工具类
public class JdbcUtils {
static {
try {
//在Web项目中仅加载一次驱动;
Class.forName("com.mysql.cj.jdbc.Driver");
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
}
//关闭资源的方法;
public static void closeSource(Connection connection, PreparedStatement ps, ResultSet resultSet) throws SQLException {
//若不为空就关闭资源;
if (connection != null) {
connection.close();
}
if (ps != null) {
ps.close();
}
if (resultSet != null) {
resultSet.close();
}
}
}
用到的Ajax01Servlet类;用于数据的获取,验证,以及跳转页面.
//使用反射;
@WebServlet(name = "byAjax01",urlPatterns = "/byAjax01")
public class Ajax01Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取到账号信息;
try {
String account = req.getParameter("account");
//新建数据交互层对象;
UserDao userDao=new UserDao();
//根据账号密码--查询到管理员;
User adminByAccount = userDao.findAdminByAccount(account);
//判断是否与数据库中的用户相同;
if (adminByAccount==null) {
//账号唯一,提示;
req.setAttribute("errorMsg","☺,账号唯一,可注册.");
} else {
//若不是数据库中的账号,给出提示;
req.setAttribute("errorMsg", "该账号已被注册");
}
//将页面请求转发到原来的页面.jsp;
req.getRequestDispatcher("ajax/studyAjax01.jsp").forward(req,resp);
}catch (Exception e){
e.printStackTrace();
//若异常,则跳转到预先设置的异常页面;
resp.sendRedirect("404.jsp");
}
}
}
显示页面jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript">
function getAcc(account){
//账号失去焦点时就把其中的账号数据返回到servlet层.
location.assign("${pageContext.request.contextPath}/byAjax01?account="+account);
}
</script>
</head>
<body>
性别:<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女<br/>
电话:<input type="text" name="mobile" ><br/>
<%--onblur:标签失去焦点时触发;--%>
账号:<input type="text" name="account" onblur="getAcc(this.value)">
<%--errorMsg,验证消息后返回的信息--%>
${errorMsg}<br/>
密码:<input type="password" name="password"><br/>
</body>
</html>
在启动服务器后,输入账号,鼠标离开账号框,数据就和数据库中的账号数据进行验证,弹出提示消息,但是页面已经被刷新,前面填的数据已经没了.响应过来整个页面
(2)异步
用到的Ajax02servlet类
//使用反射;
@WebServlet(name = "byAjax02",urlPatterns = "/byAjax02")
public class Ajax02Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取到账号信息;
try {
String account = req.getParameter("account");
//新建数据交互层对象;
UserDao userDao=new UserDao();
//根据账号密码--查询到管理员;
User adminByAccount = userDao.findAdminByAccount(account);
//设置响应的内容以及编码方式;
resp.setContentType("text/html;charset=UTF-8");
//使用流的方式返回信息;
PrintWriter out= resp.getWriter();
//判断是否与数据库中的用户相同;
if (adminByAccount==null) {
//账号唯一,提示;
out.print("☺,账号唯一,可注册.");
} else {
//若不是数据库中的账号,给出提示;
out.print("该账号已被注册");
}
}catch (Exception e){
e.printStackTrace();
//若异常,则跳转到预先设置的异常页面;
resp.sendRedirect("404.jsp");
}
}
}
显示的jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript">
function getAcc(account){
//新建XMlHttpRequest对象;
var httpRes=new XMLHttpRequest();
//建立与服务器的连接;
// open方法:有三个参数;第一个参数是请求方式method;get或者post请求;
//第二个参数是请求地址url ;第三个参数是async;决定是否使用异步参数;(true/false)
httpRes.open("get","${pageContext.request.contextPath}/byAjax02?account="+account,true);
//发送请求;
httpRes.send();
//获取响应过来的数据信息;
//onreadystatechange:指定回调函数
httpRes.onreadystatechange=function (){
//readyState: XMLHttpRequest的状态信息;就绪状态码有5个;
//readyState为4:表示读取响应结束;
//status：HTTP的状态码;这里判断为200是正常状态码;
if(httpRes.readyState==4 && httpRes.status==200){
//responseText:获得响应的文本内容;
document.getElementById("errorMsgId").innerHTML=httpRes.responseText;
}
}
}
</script>
</head>
<body>
<%--onblur:标签失去焦点时触发; 将输入框中填入的值--%>
性别:<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女<br/>
电话:<input type="text" name="mobile" ><br/>
账号:<input type="text" name="account" onblur="getAcc(this.value)"><span id="errorMsgId"></span>
<br/>
密码:<input type="password" name="password"><br/>
</body>
</html>
启动服务器;账号数据验证后,并未刷新清除前面的数据;仅响应提示信息
XMLHttpRequest对象
通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。
常用方法
open(method,URL,async)
该方法用来建立与服务器的连接;
第一个参数method:请求方式;为GET/POST;
第二个参数URL:指定请求的地址;
第三个参数async:指定是否使用异步请求;为布尔值(true/false)
send(content)
用来发送请求的方法;
content:指定请求参数;
setRequestHeader(header,value)
设置请求的头信息
在返回服务器响应的数据信息时,需要触发回调函数onreadystatechange;
常用属性
使用responseText获取响应的文本内容
可根据需要使用就绪状态码进行判断.
readyState: XMLHttpRequest的状态信息 ;就绪状态码.
| 就绪状态码 | 注释 |
|---|---|
| 0 | XMLHttpRequest对象未完成初始化 |
| 1 | XMLHttpRequest对象开始发送请求 |
| 2 | XMLHttpRequest对象请求发送完成 |
| 3 | XMLHttpRequest对象开始读取响应,没有结束 |
| 4 | XMLHttpRequest对象读取响应结束 |
还可以根据HTTP状态码status进行判断
| 常用状态码 | 说明 |
|---|---|
| 200 | 服务器响应正常 |
| 400 | 无法找到请求资源 |
| 403 | 无权限访问 |
| 404 | 访问资源不存在 |
| 500 | 服务器错误 |
使用Ajax时,GET与POST请求方式的区别
- Get方式提交时,建立连接后,仅需要发送请求即可;
例如:
XMLHttpRequest对象.open(“GET”,“Servlet?name=”+数据信息,true);
XMLHttpRequest对象.send(null);
- Post方式提交时,建立连接后,需要设置http的请求头,然后才发送请求.
例如:
XMLHttpRequest对象.open(“POST”,“Servlet”,true);
设置请求头时,内容提交方式为表单的默认提交方式.
XMLHttpRequest对象.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
XMLHttpRequest对象.send(“name=”+数据信息);
这里设置请求头时的值:“application/x-www-form-urlencoded”;
这是enctype属性规定在发送到服务器之前应该如何对表单数据进行编码;默认的表单数据会编码为 “application/x-www-form-urlencoded”。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 “+” 加号，特殊符号转换为 ASCII HEX 值）
在上面同步异步案例中,已使用get请求方式;
现在试试post方式. ;注意servlet那边是doPost方法接收.
<%--异步 使用POST方式提交 ;注意servlet端--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript">
function getAcc(account){
//新建XMlHttpRequest对象;
var httpRes=new XMLHttpRequest();
//建立与服务器的连接;
// open方法:有三个参数;第一个参数是请求方式method;get或者post请求;
//第二个参数是请求地址url ;第三个参数是async;决定是否使用异步参数;(true/false)
httpRes.open("POST","${pageContext.request.contextPath}/byAjax03",true);
//设置请求头;
httpRes.setRequestHeader("content-Type","application/x-www-form-urlencoded");
//发送请求;
httpRes.send("account="+account);
//获取响应过来的数据信息;
//onreadystatechange:指定回调函数
httpRes.onreadystatechange=function (){
//readyState: XMLHttpRequest的状态信息;就绪状态码有5个;
//readyState为4:表示读取响应结束;
//status：HTTP的状态码;这里判断为200是正常状态码;
if(httpRes.readyState==4 && httpRes.status==200){
//responseText:获得响应的文本内容;
document.getElementById("errorMsgId").innerHTML=httpRes.responseText;
}
}
}
</script>
</head>
<body>
<%--onblur:标签失去焦点时触发; 将输入框中填入的值--%>
性别:<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女<br/>
电话:<input type="text" name="mobile" ><br/>
账号:<input type="text" name="account" onblur="getAcc(this.value)"><span id="errorMsgId"></span>
<br/>
密码:<input type="password" name="password"><br/>
</body>
</html>
启动服务器,URL并未出现参数.
在java对象中封装了数据;想要传递给Ajax这边;
而XMLHttpRequest对象属于JavaScript;
之前上面是传递的文本信息,可以实现;
但是,两种语言需要数据交换;两个不同的对象数据;就得需要一个中间的转换格式;
那么,引入JSON这个概念.
什么是JSON
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据;
约定大于配置
例如:
[ { 属性 : 值 , 属性 : 值 } , { 属性 : 值 ,属性 : 值 } ]
- 数据存在键值对中
- 多个数据使用逗号分隔
- 大括号保存对象
- 方括号保存数组
案例:根据Id查询用户信息,且其中将java对象先转为json格式的字符串,然后再把json格式的字符串转为javaScript对象;
- 用户实体类User省略…
- 数据访问层userDao;
public class UserDao {
//连接对象connection;
Connection connection = null;
//执行查询语句的PreparedStatement;
PreparedStatement pst = null;
//查询的结果集;
ResultSet resultSet = null;
/**
* 根据用户Id查询单个用户;
*/
public User findUserById(String id) throws SQLException{
//创建用户对象;
User user=new User();
try{
//加载驱动,获取连接;
connection=JdbcUtils.getConnection();
//定义SQL语句;
String sql="SELECT * " +
"FROM tb_admin " +
"WHERE id=?";
//预编译;
pst=connection.prepareStatement(sql);
//为占位符赋值;
pst.setString(1,id);
//获取结果集;
resultSet=pst.executeQuery()以上是关于什么是Ajax ,异步,同步,JSON,XMLHttpRequest对象,什么是JSON,使用JQuery实现Ajax的主要内容，如果未能解决你的问题，请参考以下文章