AJAX

 

1 AJAX

 

1.1AJAX概念

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。

Ajax = 异步 JavaScript 和 XML(标准通用标记语言的子集)。

Ajax 是一种用于创建快速动态网页的技术。

Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。

 

Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

 

传统的Web应用的请求方式:

 

AJAX的web请求流程

 

1.2使用原生的js实现AJAX请求

 

1.2.1GET请求

[1]准备好后台

创建一个响应的servlet。

@WebServlet("/ajax")

public class AjaxServlet extends HttpServlet implements Servlet {

    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

       System.out.println("执行了AjaxServlet--doGet");

    }

 

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

       System.out.println("执行了AjaxServlet--doPost");

    }

}

[2]添加页面

<html>

<head>

<meta charset="UTF-8">

<title>ajax</title>

</head>

<body>

<input type="text" />

<a href="ajax">click</a>

<input type="button" onclick="ajaxReqeust()" value="ajax请求"/>

</body>

</html>

[3]添加函数做ajax请求

①申明和创建请求对象xmlHttpRequest

(此对象用来发送请求,获取响应数据。)

(不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。

IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。)

       var xmlHttp;

       try {

           // Firefox, Opera 8.0+, Safari

           xmlHttp = new XMLHttpRequest();

       } catch (e) {

           // Internet Explorer

           try {

              xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

           } catch (e) {

              try {

                  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

              } catch (e) {

                  alert("您的浏览器不支持AJAX");

                  return false;

              }

           }

       }

②设置回调函数

(XMLHttpRequest从创建到发送请求,到接受响应完成。整个过程中状态会改变,会有一个属性readyState一致改变,用来表示当前的状态:

状态

描述

0

请求未初始化(在调用 open() 之前)

1

请求已提出(调用 send() 之前)

2

请求已发送(这里通常可以从响应得到内容头部)

3

请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)

4

请求已完成(可以访问服务器响应并使用它)

)

当发送请求完成之后,会有一个“对象”等待服务器端响应,监控状态的概念,整个对象其实就是XMLHttpRequest对象的一个方法onreadystatechange:

设置监控(会调)函数:

//设置回调函数

       xmlHttp.onreadystatechange=function(){

           //此函数在ajax请求发送完成之后就开始等待客户端响应

           //判断状态改变的清情况,根据状态做出响应

           if(xmlHttp.readyState==4){//响应处理完成

              if(xmlHttp.status==200){//判断响应状态码

                  //通过xmlHttp获取响应的数据

                  var result = xmlHttp.responseText;

                  console.log("响应结果:"+result);

              }

           }

       }

 

③打开请求

(设置请求的相关数据:请求方式,url,参数等)

       /**

       *@param  请求方式(GET/POST)

       *@param 请求的url ,请求参数可以使用?连接在url后面

       *@param true表示异步请求,false

       */

       xmlHttp.open("GET","ajax",true);

 

④发送请求

    //发送请求 

       xmlHttp.send(null);

Send的参数:post请求时会将请求参数放在send中,get请求时参数是在url后面的,所以send中传递null即可。

 

⑤在GET请求中的携带参数

GET请求的参数就是在url后面。

后台正常获取:

如果使用的是tomcat8以前的版本。在后端解码。

 

⑥AJAX请求的响应

什么是web请求的响应?

任何的web请求响应的一定是符合HTTP协议的响应格式。

浏览器可以解析响应头和响应内容(html)

Ajax请求同样可以获取浏览器接受的所以响应内容。

例如:在后台响应一个HTML。

前端通过ajax获取的响应结果就是整个html的代码:

使用ajax的目标就是为了不响应整个页面。所以当使用ajax请求时一般情况下都是响应一个简单的字符串或者数字等等。

1.2.2POST请求

Post请求的代码和get请求的代码机会一致。

  • 取xmlHttpRequest对象
  • 置回调函数
  • 开请求
  • 设置请求的内容类型

 

       //设置请求的内容类型

        xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

 

  • 发送请求(携带请求参数)

 

1.3异步请求的深度理解

[1]什么是异步?

所谓异步就是多件事可以并发执行。

[2]异步请求

异步请求就是在干其他事的同时进行web请求。

传统的请求是由浏览器发送的。 页面之所以会刷新,是因为浏览器请求了最新的数据,要显示最新的数据,所以会覆盖原来的数据,感觉就是页面刷新了。

 

如果不是浏览器发送请求,浏览器继续显示原来的数据,由XMLHttpRequest发送请求,并且获取响应的最新的数据,通过javascript将数据显示在页面上,这时浏览器可以继续显示原来的数据,就不会产生覆盖现象,所以页面不会刷新。

例如:在响应结束后,在回调函数中将响应的结果通过js显示在页面上。

请求之后页面并未刷新,而最新的数据已经显示在页面中:

 

请求由XMLHttpRequest发送,并且处理,浏览器继续显示原来数据。

产生的效果是:局部刷新。

 

1.4ajax的同步请求

同步请求的方式就是将open的第三个参数设置为false。

 

Ajax请求完成之后,通过js修改页面内容:

 

让后台等待3秒钟再响应:

 

测试结果:

Ajax请求的回调函数得到响应结果之后,将响应结果显示在页面上之后,才会将网页背景修改为pink。

如果是异步则,在发送请求之后,页面就会改变背景,而不会等待响应结束。

 

1.5ajax的好处

1 无刷新更新页面,减少用户实际和心理等待时间

2 减少网络流通量

3 提高响应速度。

 

最终的目标就是提高用户体验。

“保护数据“;

1.6 使用AJAX实现一个用户列表的请求

[1]页面:

<script type="text/javascript">

    function getAllUser(){

      

    }

</script>

</head>

<body>

    <input type="button" value="走你" onclick="getAllUser()"/>

    <table class="table table-bordered">

       <tr>

           <td>#</td>

           <td>姓名</td>

           <td>年龄</td>

           <td>性别</td>

           <td>操作</td>

       </tr>

    </table>

</body>

[2]添加响应的servlet

@WebServlet("/userList")

public class UserListServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

      

    public UserListServlet() {

        super();

    }

 

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

       //模拟数据

       List<User> users = new ArrayList<User>();

       users.add(new User(1, "东风", 18, 1));

       users.add(new User(2, "南风", 18, 1));

       users.add(new User(3, "西风", 18, 1));

       users.add(new User(4, "北风", 18, 1));

       users.add(new User(5, "红中", 18, 1));

      

       //响应客户端

       StringBuffer sb = new StringBuffer();

       for (User u : users) {

           sb.append("<tr><td>"+u.getId()+"</td><td>"+u.getName()+"</td><td>"+u.getAge()+"</td><td>"+u.getGender()+"</td><td>编辑/删除</td></tr>");

       }

       response.setCharacterEncoding("utf-8");

       response.getWriter().write(sb.toString());

    }

 

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

       doGet(request, response);

    }

}

[3]添加ajax请求:

    function getAllUser(){

       //申明和创建请求对象xmlHttpRequest

       var xmlHttp;

       try {

           // Firefox, Opera 8.0+, Safari

           xmlHttp = new XMLHttpRequest();

       } catch (e) {

           // Internet Explorer

           try {

              xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

           } catch (e) {

              try {

                  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

              } catch (e) {

                  alert("您的浏览器不支持AJAX");

                  return false;

              }

           }

       }

       //设置回调函数

       xmlHttp.onreadystatechange=function(){

           //此函数在ajax请求发送完成之后就开始等待客户端响应

           //判断状态改变的清情况,根据状态做出响应

           if(xmlHttp.readyState==4){//响应处理完成

              if(xmlHttp.status==200){//判断响应状态码

                  //通过xmlHttp获取响应的数据

                  var result = xmlHttp.responseText;

                  console.log("响应结果:"+result);

                  //document.getElementById("result").innerHTML=result;

                  //将响应的结果添加到表格中

                  var table = document.getElementById("table");

                  table.innerHTML = table.innerHTML+result;

              }

           }

       }

      

       /**

       *@param  请求方式(GET/POST)

       *@param 请求的url ,请求参数可以使用?连接在url后面

       *@param true表示异步请求,false相反

       */

       xmlHttp.open("GET","userList",true);

       //发送请求 

       xmlHttp.send(null);

    }

 

 

发现问题:在后台拼接字符串非常麻烦,而且容易出错。

将拼接的过程去掉,直接在JSP中生成表格:

添加jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

    <c:forEach items="users" var="u">

       <tr>

           <td>${u.id }</td>

           <td>${u.name }</td>

           <td>${u.age }</td>

           <td>${u.gender }</td>

           <td>编辑/删除</td>

       </tr>

    </c:forEach>

修改原有的servlet:

 

2 jquery的AJAX

 

2.1了解jquery的AJAX的API:

 

2.2 $.ajax()

参数:

 

 

 

 

案例:

function $_ajax(){

    $.ajax({

       type:"GET",//请求的方法类型

       url:"ajax",//请求的url

       //data:"id=123&uname=jerry",

       data:{id:456,uname:'tom'},//请求参数

       success:function(data){//响应成功时的处理函数,data是响应结果

           console.log(data);

       },

       error:function(e){//响应失败时的处理函数

           console.log(e);

       },

       async :true//异步和同步的设

    });

}

2.3 $.get()

和$.ajax中设置type为GET是一样的。

参数:

案例:

function $_get(){

    /**

    *参数1:请求的url

    *参数2:请求参数  (p=v&p1=v1   {p:v,p1:v1})

    *参数3:回调函

    */

    $.get("ajax",{id:789,uname:'卡卡西'},function(data){

       console.log("get:"+data);

    });

}

 

2.4 $.post()

和$.get几乎完全一致,只是请求方式是post

参数:

案例:

function $_post(){

    /**

    *参数1:请求的url

    *参数2:请求参数  (p=v&p1=v1   {p:v,p1:v1})

    *参数3:回调函数

    */

    $.post("ajax",{id:789,uname:'卡卡西'},function(data){

       console.log("post:"+data);

    });

}

 

2.5 $(selector).load(url)

从服务器加载数据,然后把返回到 HTML 放入匹配元素

函数的参数:

案例:

2.6表单序列化

案例:

<script type='text/javascript' src='js/jquery-2.1.0.min.js'></script>

<script type="text/javascript">

function xlh(){

    var pm = $("#ufo").serialize();

    console.log(pm);

    pm = $("#ufo").serializeArray();

    console.log(pm);

}

</script>

</head>

<body>

    <form action="" id="ufo">

       用户名:<input type="text" name="uname"/><br/>

       密码:<input type="text" name="upass"/><br/>

       性别:<input type="radio" name="gender" value="1"/>

       <input type="radio" name="gender" value="2"/>

       <input type="radio" name="gender" value="0"/>不明

       <br/>

       <input type="button" onclick="xlh()" value="序列化"/>

    </form>

</body>

结果:

 

3 JSON

3.1认识json

JSON:JavaScript 对象表示法(JavaScript Object Notation)。

JSON 是存储和交换文本信息的语法。类似 XML。

JSON 比 XML 更小、更快,更易解析。

  • JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
  • JSON 是轻量级的文本数据交换格式
  • JSON 独立于语言 *
  • JSON 具有自我描述性,更易理解

JSON就是对象的字符串表示形式:

一个对象:

Java:

User u = new User();

u.setUname(“张三”);

u.setUage(18);

u.setUbirth(“2018-5-9”);

Js中的对象:

Var u = new Object();

u.uname=”张三”;

u.uage=18

u.ubirth=’2018-5-9’;

var u = {“uname”:”张三”,”uage”:18,”ubirth”:”2018-5-9”};

JSON对象

u = ‘{“uname”:”张三”,”uage”:18,”ubirth”:”2018-5-9”}’;

 

XML表示一个对象

<user>

   <uname>张三</uname>

   <uage>18</uage>

   <ubirth>2018-5-9</ubirth>

</user>

3.2JSON语法

JSON 语法是 JavaScript 对象表示法语法的子集。

  • 数据在名称/值对中
  • 数据由逗号分隔
  • 花括号保存对象
  • 方括号保存数组

案例:

{"total":5,"data":[

    {"uname":"张三","uage":18,"ugener":1},

    {"uname":"张三","uage":18,"ugener":1},

    {"uname":"张三","uage":18,"ugener":1},

    {"uname":"张三","uage":18,"ugener":1},

    {"uname":"张三","uage":18,"ugener":1}

]}

Tips:json的属性理论上都要使用“属性名”,所有的字符串必须使用“”.所有的数字可以省略“”。

3.3在java中json和对象之间的转换

需要三个jar文件

将一个单个对象转换为json

    @Test

    public void testObjectToJsn() throws IOException {

       User u = new User(18, "路飞", 20, 1);

       ObjectMapper mapper = new ObjectMapper();

       //将对象转换为json

       String string = mapper.writeValueAsString(u);

       System.out.println(string);

    }

 

 

将一个Map转换为json

    @Test

    public void testMapToJson() throws IOException {

       User u = new User(18, "路飞", 20, 1);

       Map<String,Object> map = new HashMap<>();

       map.put("uid", 118);

       map.put("uname", "路路飞");

       map.put("u", u);

       //map转换为json

       ObjectMapper mapper = new ObjectMapper();

       String string = mapper.writeValueAsString(map);

       System.out.println(string);

    }

 

将一个collection转换为json

    @Test

    public void testCollectionToJson() throws IOException {

       Collection c = new ArrayList();

       User u = new User(18, "路飞", 20, 1);

       Map<String, Object> map = new HashMap<>();

       map.put("uid", 118);

       map.put("uname", "路路飞");

       map.put("u", u);

       c.add(u);

       c.add(u);

       c.add(u);

       c.add(map);

       // map转换为json

       ObjectMapper mapper = new ObjectMapper();

       String string = mapper.writeValueAsString(c);

       System.out.println(string);

    }

 

将json转换为对象

    @Test

    public void testJsonToObject() throws Exception {

       String json = "{\"id\":18,\"name\":\"路飞\",\"age\":20,\"gender\":1}";

       //json字符串转换为对象

       ObjectMapper mapper = new ObjectMapper();

       User u = mapper.readValue(json, User.class);

       System.out.println(u);

    }

3.4在javaScript中json和对象的转换

Json本身就是javascript的对象。

<script type="text/javascript">

    var str = '{"id":"18","name":"路飞","age":"20","gender":"1"}';

    console.log(str);

    var s = eval('('+str+')');

    console.log(s);

</script>

 

4. 综合案例

 

[1]注册时验证用户名是否重复

搭建项目:

 

Web.xml配置:

添加beans.xml文件

DAO中通过命名查询用户

Service开发:

在beans.xml中添加配置:

添加servlet继承BaseServlet

@WebServlet("/user")

public class UserServlet extends BaseServlet {

    private IUserService userService = (IUserService) BeansFactory.getBean("userService");

    public void checkLoginName(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException {

       //获取请求参数

       String loginName = request.getParameter("loginName");

       boolean result = userService.checkLoginName(loginName);

       //响应客户端

       String json = "{\"result\":0}";

       if(result) {

           json = "{\"result\":1}";

       }

       response.getWriter().write(json);

    }

}

前端页面中添加验证函数:

$(document).ready(function(){

    //添加一个失去焦点的事件

    $("#loginName").blur(function(){

       //获取输入的登录名

       var loginName = $(this).val();

       if(loginName!=''){

           //通过ajax验证

           $.ajax({

              type:"GET",

              url:"user",

              data:{op:"checkLoginName",loginName:loginName},

              dataType:"json",//预期返回的结果类型

              success:function(data){

                  if(data.result==1){

                     $("#loginName").css("border","1px solid red");

                     alert("登录名重复");

                  }

              }

           });

       }

    });

});

[2]用户列表

响应json格式的数据

DAO实现:

    @Override

    public List<User> queryAll() {

       try {

           return qr.query("select * from bbs_user", new BeanListHandler<>(User.class));

       } catch (SQLException e) {

           e.printStackTrace();

       }

       return null

    }

Service实现:

    public List<User> queryAll() {

       // TODO Auto-generated method stub

       return userDAO.queryAll();

    }

添加一个servlet响应json格式的列表:

public class UserServlet extends BaseServlet {

    private IUserService userService = (IUserService) BeansFactory.getBean("userService");

    public void userList(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException {

       List<User> users = userService.queryAll();

       //将用户列表转化为json

       ObjectMapper mapper = new ObjectMapper();

       String json = mapper.writeValueAsString(users);

       //输出json

       response.setCharacterEncoding("utf-8");

       response.getWriter().write(json);

    }

}

添加页面:

<script type="text/javascript">

    $(document).ready(function(){

       var table = $("#utable");//找到表格对象

       //ajax请求列表

       $.ajax({

           type:"GET",

           url:"user",

           data:{op:"userList"},

           dataType:"json",

           success:function(data){

              //遍历json将数据显示在表格中

              $.each(data,function(index,item){

                  console.log(item);

                  //创建tr

                  var tr = "<tr><td>"+item.uId+"</td><td>"+item.nickName+"</td><td>"+item.loginName+"</td><td>"+(item.gender==1?'':'')+"</td><td>编辑/删除</td></tr>";

                  table.append($(tr));

              })

           }

       });

    });

</script>

</head>

<body>

    <table class="table table-bordered" id="utable">

       <tr>

           <th>#</th>

           <th>昵称</th>

           <th>登录名</th>

           <th>性别</th>

           <th>操作</th>

       </tr>

    </table>

</body>

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值