Day24-Ajax_jjizh-CSDN博客

本文链接：https://blog.csdn.net/jjizh/article/details/74779855

ajax的概述：（异步Javascript和XML）

Asynchronous Javascript And XML
可以使网页实现异步更新，就是不重新加载整个网页的情况下，对网页某部分进行更新（局部更新），而传统的网页如果需要更新内容，就需要重载整个网页页面
Ajax = 异步JavaScript和XML，是一种新的思想，整合之前的多种技术，用于快速创建交互式网页应用的网页开发技术。

流程：
这里写图片描述

异步的请求；（XMLHTTPRequest）
依赖于XMLHTTPRequest对象。在发送请求的时候，原始页面仍然可以使用，不会出现空挡和白板的情况。
这里写图片描述
学习Ajax的原因：
提升用户体验；
将部分的代码写到客户端浏览器
实现页面的局部刷新

js中的Ajax入门（了解）

步骤：
1）创建xmlHttpRequest对象
创建对象的代码可以在api（W3School）中找到
JavaScript - AJAX - XHR创建对象
2）打开连接
get方式可以在地址后面携带参数
3）发送请求
post方式写请求在里面
4）设置xmlHttpRequest对象状态改变触发的函数

XMLHttpRequest的对象的API
属性：
1）onreadystatechange：（事件）监听该对象的状态的改变。
2）readyState：该属性就记录这个对象的状态。一般情况下，浏览器能够监听到的状态就是状态2和状态4，有时可以监听到状态3（看浏览器而定）,但我们最常用的状态就是状态4；
3）status：状态码。（xmlHttpRequest对象返回后，一般要判定的有两步，首先是readState状态，然后就是状态码是否为200.）
4）responseText:获得字符串形式的响应数据(响应体)。
5）responseXML :获得 XML 形式的响应数据(响应体)
这里写图片描述
方法：
1）open() ：打开连接。传递三个参数。第一个是请求方式，第二个是请求路径，第三个是否是异步的。第三个默认就是true，可以不写
2）send([post请求的参数]): 发送请求。如果是get方式就可以不用写参数，参数是拼接在了open中的地址栏中。
3）setRequestHeader()：解决POST请求参数的问题。 key和值

一）get请求方式：

<script>
        function AjaxDemo() {
            //1.创建xmlHttpRequest对象
            var xmlHttp = null;
            if (window.XMLHttpRequest) {// all modern browsers
                xmlHttp = new XMLHttpRequest();
            } else if (window.ActiveXObject) {// for IE5, IE6
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            //2.打开连接
            xmlHttp.open("GET","${pageContext.request.contextPath}/demo02?username=zs&password=123456");
            //3.发送请求
            xmlHttp.send();

            //4.设置对象状态发生改变所触发的函数
            xmlHttp.onreadystatechange = function(){
                if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
                    var result = xmlHttp.responseText;
                    alert(result);
                }

            };

        }
    </script>

二）post请求方式

<script>
    function AjaxDemo() {
        //1.创建xmlHttpRequest对象
        var xmlHttp = null;
        if (window.XMLHttpRequest) {// all modern browsers
            xmlHttp = new XMLHttpRequest();
        } else if (window.ActiveXObject) {// for IE5, IE6
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        //2.打开连接
        xmlHttp.open("POST", "${pageContext.request.contextPath}/demo03");
        //设置请求参数的mime类型
        xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
        //3.发送请求
        xmlHttp.send("username=zs&password=123456");

          //4.设置状态发生改变触发的函数,处理结果
        xmlHttp.onreadystatechange = function() {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                var result = xmlHttp.responseText;
                alert(result);
            }
        };
    }

jQuery的Ajax（重点）

使用jQuery之前一定要先引入jQuery文件；

1.1 为什么要使用JQuery的AJAX
在实际的开发通常使用JQuery的Ajax；
因为传统(js里面)的AJAX的开发中，AJAX有两个主要的问题：
1）浏览器的兼容的问题
2）编写AJAX的代码太麻烦而且很多都是雷同的。

1.2JQuery的Ajax的API(重点掌握)

- $.get(路径,   [请求参数]  ,  [回调函数]  ,   数据类型) ; 数据类型：默认是字符串
- $.post(路径,  [请求参数],   回调函数,   数据类型);    数据类型：默认是字符串
- $.getJSON(url ,   请求参数,     回调函数)

      上述请求参数是一个json数据格式的；
      数据类型默认是字符串类型，可以省略不写。

      除了请求方式不同之外，$.get()和$.post()方法几乎完全一样，使用方式也一样

getJson的应用场景：
返回数据类型要求是json类型的时候，
跨域问题：这种方法可以解决跨域问题。

案例：校验注册用户输入的用户名是不是已经被注册

大致思路：
1）创建页面
2）给用户名输入框设置失去焦点事件。
创建一个事件，onblue，
创建一个checkUserName()函数响应这个事件
获得用户输入的用户名，
发送Ajax请求（CheckUserNameServlet），
把用户名带过去，）
3）创建CheckUserNameServlet，
在doGet方法中获取Ajax带过来的用户名，
调用UserService层，根据用户名获得User对象，判断User对象是不是为空。
给用户响应

页面代码：

<script type="text/javascript">
    var $username = $("#username");
    $username.blur(function(){
    $.get("${pageContext.request.contextPath}/checkUserName",{"username":this.value},function(result){
           $("#usernamespan").html("<font color='red'>"+result+"</font>");
                  });
            })
     //result表示函数返回的响应体
</script>

servlet中代码：
      protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
           try {
                 request.setCharacterEncoding("utf-8");
                 response.setContentType("text/html;charset=utf-8");
                 //获取请求参数
                 String username = request.getParameter("username");
                 //调用service层进行查询
                 CheckUserNameService  cs = new CheckUserNameService();
                 User user = cs.findUserByName(username);
                 //返回结果
                 if(user != null){
                      response.getWriter().print("用户名已存在！");
                      //这就是页面中result中显示的内容
                 }else{
                      response.getWriter().print("");
                 }
           } catch (SQLException e) {
                 System.out.println("查询用户名失败");
                 e.printStackTrace();
           }
      }

JSON数据格式：

概述:
这里写图片描述

格式：
json对象：
{ }
- 里面的值以key:value的形式存在,key是字符串
- 如果有多个中间通过,隔开
- value可以是任何合法的数据类型
JSON数组
格式[]
和普通数组格式类似，只不过里面的每个元素是一个json格式的对象
这里写图片描述
案例：

json生成工具：json-lib
需要导入的jar包比较多，是一个重量级的框架，功能比较全面；
（其他框架：其实Gson和FastJson用的比较多）
共需要导入6个包；

重要api：
JSONObject.fromObject(map或者javabean); 把map或者javabean转成JSON对象{}
JSONArray.fromObject(数组或者list);把数组/或者list转成JSON数组

      @Test
      public void test01(){
           JSONObject jsonObject = JSONObject.fromObject(new User());
           System.out.println(jsonObject.toString());
      }

json-lib:
1）把map或者javabean转成JSON对象，返回时json格式
JSONObject.fromObject
2）List和Array转换成为JSON对象，返回时数组格式，数组中是json
JSONArray.fromObject

案例二：使用JQ和AJAX完成模仿百度提示的效果，返回json数据

思路分析：
- 1）创建数据库和页面
- 给输入框设置键盘抬起事件(keyup),创建一个匿名函数响应这个事件
- 2）在匿名函数里面:
获得用户输入的关键词
发送Ajax请求,把关键词发送到WordServlet
拿到结果,展示页面
- 3）创建WordServlet, 在doGet方法里面:
获得Ajax带过来的请求参数(关键词)
调用业务,根据关键词获得List list
- 4）把list转成Json数组,响应给前端
- 5）编写WordService
- 6）编写WordDao select *from words where word like “%aa%” limit 0,5;

注意要点：
* A.append(B):将B插入到A标签的内部的后面（A标签必须是jQuery对象，而B标签可以是String，Element，jQuery）

页面代码：

      <script>
            $("#inputId").keyup(function() {
                  var keyword = this.value;
                  var $show = $("#divId");

                  if(keyword == null || keyword == "") {
                        $show.hide();
                        return;
                  }

                  //首先清除原来的数据
                  $show.html("");


                  $.getJSON("${pageContext.request.contextPath}/keyword", {"keyword": keyword}, function(result) {
                        $show.show();

                        $(result).each(function(index,element){
                              $show.append("<tr><td>"+element.word+"</td></tr>");
                        });

                  });

            });
      </script>

servlet代码：

     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
           try {
                 request.setCharacterEncoding("utf-8");
                 response.setContentType("text/html;charset=utf-8");

                 String keyword = request.getParameter("keyword");
                 //调用service层
                 KeywordService ks = new KeywordService();
                 List<Keyword> list = ks.findKeyword(keyword);

                 JSONArray jsonArray = JSONArray.fromObject(list);
                 //System.out.println(jsonArray.toString());
                 //返回结果
                 response.getWriter().print(jsonArray);
           } catch (SQLException e) {
                 System.out.println("数据库查询关键字失败");
                 e.printStackTrace();
           }
      }