北京动力节点-王鹤-AJAX-jQuery.pdf

ajax大纲

image.png

1.全局刷新和局部刷新

全局刷新： 整个浏览器被新的数据覆盖。 在网络中传输大量的数据。 浏览器需要加载，渲染页面。
局部刷新： 在浏览器器的内部，发起请求，获取数据，改变页面中的部分内容。
其余的页面无需加载和渲染。 网络中数据传输量少， 给用户的感受好。
ajax是用来做局部刷新的。局部刷新使用的核心对象是 异步对象（XMLHttpRequest）
这个异步对象是存在浏览器内存中的 ，使用javascript语法创建和使用XMLHttpRequest对象。

2.ajax:Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

Asynchronous: 异步的意思
JavaScript：javascript脚本，在浏览器中执行
and : 和
xml : 是一种数据格式

ajax是一种做局部刷新的新方法（2003左右），不是一种语言。 ajax包含的技术主要有javascript,
dom,css, xml等等。 核心是javascript 和 xml 。
javascript：负责创建异步对象， 发送请求， 更新页面的dom对象。 ajax请求需要服务器端的数据。
xml： 网络中的传输的数据格式。 使用json替换了xml 。
<数据>
<数据1>宝马1</数据1>
<数据2>宝马2</数据2>
<数据3>宝马3</数据3>
<数据4>宝马4</数据4>
</数据>

3.ajax中使用XMLHttpRequest对象

  1.      1）创建异步对象 var xmlHttp = new XMLHttpRequest();

2）给异步对象绑定事件。onreadystatechange ：当异步对象发起请求，获取了数据都会触发这个事件。
这个事件需要指定一个函数， 在函数中处理状态的变化。

  1. btn.onclick = fun1()<br />    function fun1(){<br />     alert("按钮单击");<br />    }<br />        例如：<br />    xmlHttp.onreadystatechange= function(){<br />       处理请求的状态变化。<br />   if(xmlHttp.readyState == 4 && xmlHttp.status== 200 ){<br />           //可以处理服务器端的数据，更新当前页面<br />     var data = xmlHttp.responseText;<br />     document.getElementById("name").value= data;<br />   }<br />    }

异步对象的属性 readyState 表示异步对象请求的状态变化
0：创建异步对象时， new XMLHttpRequest();
1: 初始异步请求对象， xmlHttp.open()
2：发送请求， xmlHttp.send()
3: 从服务器端获取了数据，此时3， 注意3是异步对象内部使用， 获取了原始的数据。
4：异步对象把接收的数据处理完成后。 此时开发人员在4的时候处理数据。
在4的时候，开发人员做什么 ？ 更新当前页面。
异步对象的status属性，表示网络请求的状况的， 200， 404， 500， 需要是当status==200
时，表示网络请求是成功的。

3) 初始异步请求对象
异步的方法open().
xmlHttp.open(请求方式get|post, “服务器端的访问地址”, 同步|异步请求（默认是true，异步请求）)
例如：
xmlHttp.open(“get”, “loginServlet?name=zs&pwd=123”,true);

4)使用异步对象发送请求
xmlHttp.send()
获取服务器端返回的数据， 使用异步对象的属性 responseText .
使用例子：xmlHttp.responseText
回调：当请求的状态变化时，异步对象会自动调用onreadystatechange事件对应的函数。
访问地址： 使用get方式传递参数
http://localhost:8080/course_myajax/bmiPrint?name=李四&w=82&h=1.8

3.1 使用ajax的局部刷新

1.新建jsp，使用XMLHttpRequest异步对象。
使用异步对象有四个步骤：
1.创建
2.绑定事件
3.初始请求
4.发送请求。
2.创建服务器的servlet，接收并处理数据， 把数据输出给异步对象。

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3.   <head>
  4.       <title>局部刷新-ajax</title>
  5.       <script type="text/javascript">
  6.           //使用内存中的异步对象，代替浏览器发起请求。异步对象使用js创建和管理的。
  8.           function  doAjax() {
  9.               //1.创建异步对象
  10.               var xmlHttp = new XMLHttpRequest();
  11.               //2.绑定事件
  12.               xmlHttp.onreadystatechange = function () {
  13.                   //处理服务器端返回的数据，更新当前页面
  14.                   //alert("readyState属性值======" + xmlHttp.readyState + "| status:" + xmlHttp.status)
  15.                   if( xmlHttp.readyState == 4 && xmlHttp.status ==200){
  16.                      // alert(xmlHttp.responseText);
  17.                       var  data = xmlHttp.responseText;
  18.                       //更新dom对象， 更新页面数据
  19.                       document.getElementById("mydata").innerText = data;
  20.                   }
  21.               }
  23.               //3.初始请求数据
  24.               //获取dom对象的value属性值
  25.               var name = document.getElementById("name").value;
  26.               var w = document.getElementById("w").value;
  27.               var h = document.getElementById("h").value;
  29.               //bmiPrint?name=李四&w=82&h=1.8
  30.               var param = "name="+name + "&w="+w+"&h="+h;
  31.               //alert("param="+param);
  32.               xmlHttp.open("get","bmiAjax?"+param,true);
  34.               //4.发起请求
  35.               xmlHttp.send();
  36.           }
  40.       </script>
  41.   </head>
  42.   <body>
  43.     <p>局部刷新ajax-计算bmi</p>
  44.     <div>
  45.         <!-- 没有使用form  -->
  46.        姓名：<input type="text" id="name" /> <br/>
  47.        体重（公斤）:<input type="text" id="w" /> <br/>
  48.        身高（米）：<input type="text" id="h" /> <br/>
  49.        <input type="button" value="计算bmi" onclick="doAjax()">
  50.         <br/>
  51.         <br/>
  52.         <div id="mydata">等待加载数据....</div>
  53.     </div>
  54.   </body>
  55. </html>
  1. package com.bjpowernode.controller;
  3. import javax.servlet.ServletException;
  4. import javax.servlet.http.HttpServlet;
  5. import javax.servlet.http.HttpServletRequest;
  6. import javax.servlet.http.HttpServletResponse;
  7. import java.io.IOException;
  8. import java.io.PrintWriter;
  10. // servlet
  11. public class BmiAjaxServlet extends HttpServlet {
  12.     protected void doPost(HttpServletRequest request,
  13.                           HttpServletResponse response)
  14.             throws ServletException, IOException {
  16.     }
  18.     protected void doGet(HttpServletRequest request,
  19.                          HttpServletResponse response)
  20.             throws ServletException, IOException {
  21.         System.out.println("====接收了ajax的请求=====");
  23.         //接收参数
  24.         String strName = request.getParameter("name");
  25.         String weight  = request.getParameter("w");
  26.         String height = request.getParameter("h");
  28.         //计算bmi
  29.         float h = Float.valueOf(height);
  30.         float w = Float.valueOf(weight);
  31.         float bmi = w / ( h * h);
  33.         //判断bmi的范围
  34.         String msg = "";
  35.         if( bmi <= 18.5) {
  36.             msg = "您比较瘦";
  37.         } else if( bmi > 18.5 && bmi <= 23.9 ){
  38.             msg = "你的bmi是正常的";
  39.         } else if( bmi >24 && bmi <=27){
  40.             msg = "你的身体比较胖";
  41.         } else {
  42.             msg = "你的身体肥胖";
  43.         }
  44.         System.out.println("msg="+msg);
  45.         msg = "您好："+strName + "先生/女士, 您的bmi值是："+ bmi + ","+ msg;
  47.         //响应ajax需要的数据，使用HttpServletResponse输出数据
  48.         response.setContentType("text/html;charset=utf-8");
  49.         PrintWriter pw = response.getWriter();
  50.         pw.println(msg);
  51.         pw.flush();
  52.         pw.close();
  53.     }
  54. }

4.json使用

ajax发起请求———-servlet（返回的一个json格式的字符串 { name:”河北”, jiancheng:”冀”,”shenghui”:”石家庄”}）

4.1 json分类：

  1. json对象 ，JSONObject ,这种对象的格式 名称:值， 也可以看做是 key:value 格式。
    2. json数组， JSONArray, 基本格式 [{ name:”河北”, jiancheng:”冀”,”shenghui”:”石家庄”} , { name:”山西”, jiancheng:”晋”,”shenghui”:”太原”} ]

4.2 为什么要使用json ：

  1. json格式好理解
    2. json格式数据在多种语言中，比较容易处理。 使用java， javascript读写json格式的数据比较容易。
    3. json格式数据他占用的空间下，在网络中传输快， 用户的体验好。
    处理json的工具库： gson（google）； fastjson（阿里），jackson， json-lib
    在js中的，可以把json格式的字符串，转为json对象， json中的key，就是json对象的属性名。

4.3 ajax请求处理方法

image.png

5、根据省份id查询省份名称

省份实体类

  1. package com.bjpowernode.entity;
  3. public class Province {
  5.     private Integer id;
  6.     private String name;
  7.     private String jiancheng;
  8.     private String shenghui;
  10.     public Integer getId() {
  11.         return id;
  12.     }
  14.     public void setId(Integer id) {
  15.         this.id = id;
  16.     }
  18.     public String getName() {
  19.         return name;
  20.     }
  22.     public void setName(String name) {
  23.         this.name = name;
  24.     }
  26.     public String getJiancheng() {
  27.         return jiancheng;
  28.     }
  30.     public void setJiancheng(String jiancheng) {
  31.         this.jiancheng = jiancheng;
  32.     }
  34.     public String getShenghui() {
  35.         return shenghui;
  36.     }
  38.     public void setShenghui(String shenghui) {
  39.         this.shenghui = shenghui;
  40.     }
  41. }

DAO层

  1. package com.bjpowernode.dao;
  3. import com.bjpowernode.entity.Province;
  5. import java.sql.*;
  7. //使用jdbc访问数据库
  8. public class ProvinceDao {
  10.     //根据id获取名称
  11.     public String queryProviceNameById(Integer proviceId){
  12.         Connection conn = null;
  13.         PreparedStatement pst = null;
  14.         ResultSet rs  = null;
  15.         String sql= "";
  17.         String url="jdbc:mysql://localhost:3306/springdb";
  18.         String username="root";
  19.         String password="123456";
  21.         String name = "";
  22.         //加载驱动
  23.         try {
  24.             Class.forName("com.mysql.jdbc.Driver");
  25.             conn = DriverManager.getConnection(url,username,password);
  26.             //创建PreparedStatement
  27.             sql="select  name from province where id=?";
  28.             pst = conn.prepareStatement(sql);
  29.             //设置参数值
  30.             pst.setInt(1,proviceId);
  31.             //执行sql
  32.             rs = pst.executeQuery();
  33.             //遍历rs
  34.             /*while(rs.next()){ //当你的rs中有多余一条记录时。
  35.                name =  rs.getString("name");
  36.             }*/
  38.             if( rs.next()){
  39.                 name =rs.getString("name");
  40.             }
  42.         } catch (ClassNotFoundException | SQLException e) {
  43.             e.printStackTrace();
  44.         } finally {
  45.             try{
  46.                 if( rs != null){
  47.                     rs.close();
  48.                 }
  49.                 if( pst != null){
  50.                     pst.close();
  51.                 }
  52.                 if( conn != null){
  53.                     conn.close();
  54.                 }
  56.             }catch(Exception e){
  57.                 e.printStackTrace();
  58.             }
  60.         }
  61.         return name;
  62.     }
  65.     //根据id获取一个完整的Province对象
  66.     public Province queryProviceById(Integer proviceId){
  67.         Connection conn = null;
  68.         PreparedStatement pst = null;
  69.         ResultSet rs  = null;
  70.         String sql= "";
  72.         String url="jdbc:mysql://localhost:3306/springdb";
  73.         String username="root";
  74.         String password="123456";
  76.         Province province = null;
  77.         //加载驱动
  78.         try {
  79.             Class.forName("com.mysql.jdbc.Driver");
  80.             conn = DriverManager.getConnection(url,username,password);
  81.             //创建PreparedStatement
  82.             sql="select id, name, jiancheng, shenghui  from province where id=?";
  83.             pst = conn.prepareStatement(sql);
  84.             //设置参数值
  85.             pst.setInt(1,proviceId);
  86.             //执行sql
  87.             rs = pst.executeQuery();
  88.             //遍历rs
  89.             /*while(rs.next()){ //当你的rs中有多余一条记录时。
  90.                name =  rs.getString("name");
  91.             }*/
  93.             if( rs.next()){
  94.                 province  = new Province();
  95.                 province.setId( rs.getInt("id"));
  96.                 province.setName(rs.getString("name"));
  97.                 province.setJiancheng(rs.getString("jiancheng"));
  98.                 province.setShenghui(rs.getString("shenghui"));
  99.             }
  101.         } catch (ClassNotFoundException | SQLException e) {
  102.             e.printStackTrace();
  103.         } finally {
  104.             try{
  105.                 if( rs != null){
  106.                     rs.close();
  107.                 }
  108.                 if( pst != null){
  109.                     pst.close();
  110.                 }
  111.                 if( conn != null){
  112.                     conn.close();
  113.                 }
  115.             }catch(Exception e){
  116.                 e.printStackTrace();
  117.             }
  119.         }
  120.         return province;
  121.     }
  122. }
  1. package com.bjpowernode.controller;
  3. import com.bjpowernode.dao.ProvinceDao;
  5. import javax.servlet.ServletException;
  6. import javax.servlet.http.HttpServlet;
  7. import javax.servlet.http.HttpServletRequest;
  8. import javax.servlet.http.HttpServletResponse;
  9. import java.io.IOException;
  10. import java.io.PrintWriter;
  12. public class QueryProviceServlet extends HttpServlet {
  13.     @Override
  14.     protected void doGet(HttpServletRequest req,
  15.                          HttpServletResponse resp) throws ServletException, IOException {
  16.        //处理get请求
  17.         String strProid = req.getParameter("proid");
  18.         System.out.println("strProid:"+ strProid);
  20.         String name = "默认是无数据";
  21.         //访问dao，查询数据库
  22.         if( strProid != null && !"".equals(strProid.trim()) ){
  23.             //创建dao对象，调用它的方法
  24.             ProvinceDao dao  = new ProvinceDao();
  25.             name  = dao.queryProviceNameById( Integer.valueOf(strProid));
  26.         }
  29.         //使用HttpServletResponse输出数据
  30.         // servlet返回给浏览器的是 文本数据， 数据的编码是utf-8
  31.         resp.setContentType("text/html;charset=utf-8");
  32.         PrintWriter pw  = resp.getWriter();
  33.         //pw.println("中国");
  34.         pw.println(name);
  35.         pw.flush();
  36.         pw.close();
  37.     }
  38. }
  1. package com.bjpowernode.controller;
  3. import javax.servlet.ServletException;
  4. import javax.servlet.http.HttpServlet;
  5. import javax.servlet.http.HttpServletRequest;
  6. import javax.servlet.http.HttpServletResponse;
  7. import java.io.IOException;
  9. public class LoginServlet extends HttpServlet {
  10.     @Override
  11.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  12.         super.doGet(req, resp);
  13.     }
  15.     @Override
  16.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  17.         super.doPost(req, resp);
  18.     }
  19. }
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3.   <head>
  4.     <title>ajax根据省份id获取名称</title>
  5.     <script type="text/javascript">
  6.         function search() {
  7.            //发起ajax请求，传递参数给服务器， 服务器返回数据
  8.            //1.创建异步对象
  9.            var  xmlHttp  = new XMLHttpRequest();
  10.            //2.绑定事件
  11.            xmlHttp.onreadystatechange = function () {
  12.                if( xmlHttp.readyState == 4 && xmlHttp.status== 200){
  13.                  //alert(xmlHttp.responseText)
  14.                  //更新页面，就是更新dom对象
  15.                  document.getElementById("proname").value= xmlHttp.responseText;
  16.                }
  17.            }
  18.            //3.初始异步对象
  19.           //获取proid文本框的值
  20.            var proid = document.getElementById("proid").value;
  21.            xmlHttp.open("get","queryProvice?proid="+proid,true);
  23.            //4.发送请求
  24.            xmlHttp.send();
  25.         }
  26.     </script>
  27.   </head>
  28.   <body>
  29.     <p>ajax根据省份id获取名称</p>
  30.     <table>
  31.       <tr>
  32.         <td>省份编号：</td>
  33.         <td><input type="text" id="proid"/>
  34.             <input type="button" value="搜索" onclick="search()" />
  35.         </td>
  36.       </tr>
  37.       <tr>
  38.         <td>省份名称：</td>
  39.         <td><input type="text" id="proname" /></td>
  40.       </tr>
  41.     </table>
  42.   </body>
  43.   <a href="html/main.jsp">link</a>
  44. </html>
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>使用json格式的数据</title>
  5.     <script type="text/javascript">
  6.         function  doSearch() {
  7.             //1.创建异步对象
  8.             var xmlHttp = new XMLHttpRequest();
  9.             //2.绑定事件
  10.             xmlHttp.onreadystatechange = function() {
  11.                 if( xmlHttp.readyState == 4 && xmlHttp.status == 200){
  12.                     var data = xmlHttp.responseText;
  13.                     //eval是执行括号中的代码， 把json字符串转为json对象
  14.                     var jsonobj = eval("(" + data + ")");
  15.                     //更新dom对象
  16.                     callback(jsonobj);
  17.                 }
  18.             }
  20.             //3.初始异步对象的请求参数
  21.             var proid = document.getElementById("proid").value;
  23.             // true :异步处理请求。 使用异步对象发起请求后，不用等待数据处理完毕，就可以执行其它的操作。
  24.             // false:同步，异步对象必须处理完成请求，从服务器端获取数据后，才能执行send之后的代码。 任意时刻只能执行一个异步请求。
  26.             xmlHttp.open("get","queryjson?proid="+proid,false);
  28.             //4.发送请求
  29.             xmlHttp.send();
  32.             //也可以创建其它的 XMLHttpRequest， 发送其它的请求处理。
  34.             alert("====在send之后的代码====")
  35.         }
  37.         //定义函数，处理服务器端返回的数据
  38.         function callback(json){
  39.             document.getElementById("proname").value = json.name;
  40.             document.getElementById("projiancheng").value=json.jiancheng;
  41.             document.getElementById("proshenghui").value= json.shenghui;
  42.         }
  44.     </script>
  45. </head>
  46. <body>
  47.     <p>ajax请求使用json格式的数据</p>
  48.     <table>
  49.         <tr>
  50.             <td>省份编号：</td>
  51.             <td><input type="text" id="proid">
  52.                 <input type="button" value="搜索" onclick="doSearch()">
  53.             </td>
  54.         </tr>
  55.         <tr>
  56.             <td>省份名称：</td>
  57.             <td><input type="text" id="proname"></td>
  58.         </tr>
  59.         <tr>
  60.             <td>省份简称：</td>
  61.             <td><input type="text" id="projiancheng"></td>
  62.         </tr>
  63.         <tr>
  64.             <td>省会名称：</td>
  65.             <td><input type="text" id="proshenghui"></td>
  66.         </tr>
  67.     </table>
  68. </body>
  69. </html>
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>使用json格式的数据</title>
  5.     <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  6.     <script type="text/javascript">
  8.         $(function(){
  9.             $("#btn").click(function () {
  10.                 //获取dom的value值
  11.                 var proid = $("#proid").val();
  12.                 //发起ajax请求
  13.                 $.ajax({
  14.                     url:"queryjson",
  15.                     data:{
  16.                         "proid":proid
  17.                     },
  18.                     dataType:"json",
  19.                     success:function (resp) {
  20.                         //resp是json对象
  21.                         //alert(resp.name + " === "+resp.jiancheng)
  22.                         $("#proname").val(resp.name);
  23.                         $("#projiancheng").val(resp.jiancheng);
  24.                         $("#proshenghui").val(resp.shenghui);
  25.                     }
  26.                 })
  27.             });
  28.         })
  29.     </script>
  30. </head>
  31. <body>
  32.     <p>ajax请求使用json格式的数据</p>
  33.     <table>
  34.         <tr>
  35.             <td>省份编号：</td>
  36.             <td><input type="text" id="proid">
  37.                 <input type="button" value="搜索" id="btn">
  38.             </td>
  39.         </tr>
  40.         <tr>
  41.             <td>省份名称：</td>
  42.             <td><input type="text" id="proname"></td>
  43.         </tr>
  44.         <tr>
  45.             <td>省份简称：</td>
  46.             <td><input type="text" id="projiancheng"></td>
  47.         </tr>
  48.         <tr>
  49.             <td>省会名称：</td>
  50.             <td><input type="text" id="proshenghui"></td>
  51.         </tr>
  52.     </table>
  53. </body>
  54. </html>
  1. package com.bjpowernode.controller;
  3. import com.bjpowernode.dao.ProvinceDao;
  4. import com.bjpowernode.entity.Province;
  5. import com.fasterxml.jackson.databind.ObjectMapper;
  7. import javax.servlet.ServletException;
  8. import javax.servlet.http.HttpServlet;
  9. import javax.servlet.http.HttpServletRequest;
  10. import javax.servlet.http.HttpServletResponse;
  11. import java.io.IOException;
  12. import java.io.PrintWriter;
  14. public class QueryJsonServlet extends HttpServlet {
  15.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  17.     }
  19.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  20.         //默认值， {} ：表示json格式的数据
  21.         String json = "{}";
  23.         // 获取请求参数，省份的id
  24.         String strProid = request.getParameter("proid");
  25.         System.out.println("strProid========="+strProid);
  27.         //判断proid有值时，调用dao查询数据
  28.         if( strProid != null && strProid.trim().length() > 0 ){
  29.             ProvinceDao dao  = new ProvinceDao();
  30.             Province p  = dao.queryProviceById(Integer.valueOf(strProid));
  31.             //需要使用jackson 把  Provice对象转为  json
  32.             ObjectMapper om  = new ObjectMapper();
  33.             json =  om.writeValueAsString(p);
  34.         }
  36.         //把获取的数据，通过网络传给ajax中的异步对象，响应结果数据
  37.         //指定服务器端（servlet）返回给浏览器的是json格式的数据,json数据使用utf-8编码的
  38.         //response.setContentType("text/json;charset=utf-8");
  39.         response.setContentType("application/json;charset=utf-8");
  40.         PrintWriter pw  = response.getWriter();
  41.         /**
  42.          *  <provines>
  43.          *      <province>
  44.          *          <name>河北</name>
  45.          *          <shenghui>石家庄</shenghui>
  46.          *      </province>
  47.          *       <province>
  48.          *          <name>山西</name>
  49.          *          <shenghui>太原</shenghui>
  50.          *       </province>
  51.          *  </provines>
  52.          */
  53.         pw.println(json); //输出数据---会付给ajax中 responseText属性
  54.         pw.flush();
  55.         pw.close();
  56.     }
  57. }
  1. package com.bjpowernode;
  3. import com.bjpowernode.entity.Province;
  4. import com.fasterxml.jackson.core.JsonProcessingException;
  5. import com.fasterxml.jackson.databind.ObjectMapper;
  7. public class TestJson {
  9.     public static void main(String[] args) throws JsonProcessingException {
  10.         // 使用jackson 把java对象转为json格式的字符串
  12.         Province p = new Province();
  13.         p.setId(1);
  14.         p.setName("河北");
  15.         p.setJiancheng("冀");
  16.         p.setShenghui("石家庄");
  18.         //使用jackson 把 p 转为 json
  19.         ObjectMapper om  = new ObjectMapper();
  20.         // writeValueAsString：把参数的java对象转为json格式的字符串
  21.         String json  = om.writeValueAsString(p);
  22.         System.out.println("转换的json=="+json);
  23.     }
  24. }