Ajax从入门到静态发展

╰+哭是因爲堅強的太久メ 2023-09-29 18:25 15阅读 0赞

## AJAX ##

## 第一章：AJAX基础 ##

> 概念：AJAX = Asynchronous JavaScript And XML（异步的 JavaScript 和 XML）。阿贾克斯
> 
> AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
> 
> AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。简言之：是局部刷新技术。异步刷新。

回顾历史：

*  Web 1.0 sina sohu 用户被动接受新闻
 *  Web 2.0 社区，web群 互动 环节增加，用户和服务器交互
 *  Web 3.0 自媒体，突出客户的实现，客户也可以成为中心，其他人订阅 参与 讨论等
 *  Web 4.0 物联网时代 自媒体 人 服务器 +机器交互，机器本身也是参与者。

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xeYL9jti-1672666051184)(E:\\政通路\\课堂笔记\\S2\\Ajax\\assets\\image-20200509143743804.png)\]

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nblLuXNt-1672666051192)(E:\\政通路\\课堂笔记\\S2\\Ajax\\assets\\image-20200509143807384.png)\]

### 1.Ajax核心 XMLHttpRequest ###

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

#### 1.1 对象的创建 ####

let xmlhttp;
    if (window.XMLHttpRequest)
      {
        // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {
        // code for IE6, IE5
      	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }

#### 1.2 对象的方法 ####

方法：open(*method*,*url*,*async*)

参数有3个：

method：http请求的方法有俩get/post,选择就是get/post。

url：就是View层的页面要提交到服务器的请求，一般是Servlet或Controller的地址

async:true：异步请求；false:同步请求;

页面同步：页面所有的元素加载完毕之后，数据提交到服务器；

异步：页面不用所有的元素加载完毕之后，部分提交；

异步请求：效率、性能更高；

同步请求：会导致网络卡顿|网页无响应的现象、页面冻结。

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>open(<em>method</em>,<em>url</em>,<em>async</em>)</td> 
   <td>创建一个请求</td> 
  </tr> 
  <tr> 
   <td>send(<em>string</em>)</td> 
   <td>将请求发送到服务器。 <em>string</em>：仅用于 POST 请求</td> 
  </tr> 
 </tbody> 
</table>

#### 1.3 onreadystatechange 事件 ####

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onreadystatechange</td> 
   <td>存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。</td> 
  </tr> 
  <tr> 
   <td>readyState</td> 
   <td>存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪。</td> 
  </tr> 
  <tr> 
   <td>status</td> 
   <td>200: “OK” 404: 未找到页面；4XX： 客户端的问题； 5XX：服务器问题</td> 
  </tr> 
 </tbody> 
</table>

#### 1.4 服务器的响应 ####

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>responseText</td> 
   <td>获得字符串形式的响应数据。</td> 
  </tr> 
  <tr> 
   <td>responseXML</td> 
   <td>获得 XML 形式的响应数据。</td> 
  </tr> 
 </tbody> 
</table>

### 2.使用步骤 ###

如何使用ajax，使用有两种：一种是前端的纯粹的使用，node+ajax；一种是后台的，我们关注的是后台。

我们之前增加用户的时候，假设用户名(账户)不能重复，我们之前是没有判断的。

**当数据库服务器存在某用户的时候，文本框离开，则报已经存在该用户了；否则，显示可以注册。**

*  创建XMLHttpRequest对象
 *  设置请求信息open(get|post,url,true|false)
 *  向服务器发送请求
 *  让XmlHttpRequest对象接受服务器的响应数据，通过创建的回调函数
 *  编写服务器端处理客户端请求

<table> 
 <thead> 
  <tr> 
   <th><strong>步 骤</strong></th> 
   <th><strong>请求方式</strong></th> 
   <th><strong>实 现 代 码</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>初始化组件</strong></td> 
   <td>GET</td> 
   <td>xmlHttpRequest.open( “GET”,url, true );</td> 
  </tr> 
  <tr> 
   <td><strong>POST</strong></td> 
   <td>xmlHttpRequest.open( “POST”,url, true ); xmlHttpRequest.setRequestHeader( “Content-Type”, “application/x-www-form-urlencoded” );</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><strong>发送请求</strong></td> 
   <td>GET</td> 
   <td><strong>xmlHttpRequest.send(</strong> <strong>null</strong> );</td> 
  </tr> 
  <tr> 
   <td><strong>POST</strong></td> 
   <td>xmlHttpRequest.send(“key=xxx&amp;type=12&amp;year=2016” <strong>);</strong></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

get代码实现：

//1.创建XmlHttpRequest对象,封装一下，封装到一个函数;
            function createXhr() {
        
                if(window.XMLHttpRequest)
                    return new XMLHttpRequest();//如果有，则创建其对象;
                else
                    return new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2.开始实现我们的目标；离开的事件是blur
            $(function () {
        
                //离开的时候，先判断一下；用户名不能为空，实际上应该是正则验证;
                $("#name").blur(function () {
        
                    let name=$("#name").val();
                    if(name==null||name==''){
        //后续使用正则实现
                        $("#nameinfo").html("用户不能为空!").addClass("nameinfo");
                        /*刚才的错误是style里面加了一个html的注释，亏!!!*/
                    }else{
        
                        //否则，就是输入的不是空了，有值，那这个值就要看看是否存在于数据库了。
                        //2.1 这时候要得到XmlHttpRequest对象;
                        xhr=createXhr();
                        //2.2设置请求行open,请求后台的Servlet,客户端向服务器发送了一个参数name，值name
                        xhr.open("get","userServletByName?name="+name,true);
                        //2.3.发送请求,get的时候不加东西；
                        xhr.send(null);
                        //2.4当事件改变Ok的时候，响应的函数；
                        xhr.onreadystatechange=function () {
        
                            //readyState==4;并且状态为200的时候，才OK。
                            if(xhr.readyState==4 && xhr.status==200){
        
                                //定义变量data，接受异步对象xhr的服务器的响应数据;由Servlet来返回
                                let data=xhr.responseText;
                                console.log(data);
                                //暂停一下;
                                //下面就是根据data响应的数据值做出判断;
                                //服务器端响应给我们，true|false了.data-->文本;我们把它当成了boolean
                                if(data=='true'){
        
                                    $("#nameinfo").html("用户名已经注册").addClass("nameinfo");
                                }else{
        
                                    $("#nameinfo").html("用户名可以注册");
                                    $("#nameinfo").css("color","green");
                                }
                            }
    
                        }
                    }
                });
            })

Servlet的代码：

package com.aaa.servlet;
    
    import com.aaa.dao.UserDao;
    import com.aaa.dao.UserDaoImpl;
    import com.aaa.pojo.User;
    
    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;
    import java.io.PrintWriter;
    
    /**
     * Created by 张晨光 on 2020/8/19 9:49
     */
    @WebServlet("/front/findUserByName")
    public class FindUserByNameServlet extends HttpServlet {
        
        //控制层调用dao层对象;
        UserDao userDao=new UserDaoImpl();
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
            response.setContentType("text/html;charset=UTF-8");
            response.setCharacterEncoding("UTF-8");
            String name = request.getParameter("name");
            System.out.println("---"+name);
            User userByName = userDao.findUserByName(name);
            //向客户端返回一个result
            boolean result=false;
            //下面是针对userByName进行的判断,不为空则表示存在
            if(userByName!=null)
                result=true;
            //下面还是向客户端发送信息
            PrintWriter writer = response.getWriter();
            writer.print(result);
            //false:表示用户不存在；true:表示存在;
    
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
            this.doPost(request, response);
        }
    }

post代码实现：

修改get的2. 3.步骤即可;

//2.2设置请求行open,请求后台的Servlet,客户端向服务器发送了一个参数name，值name
                        //xhr.open("get","userServletByName?name="+name,true);
                        xhr.open("post","userServletByName",true);
                        xhr.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" ); //必须有;
                        //2.3.发送请求,get的时候不加东西；
                        //xhr.send(null);get 没东西;
                        xhr.send("name="+name);

问题总结：

1.jquery、css无法加载；

web.xml

<servlet-mapping>
            <servlet-name>default</servlet-name>
            <url-pattern>*.css</url-pattern>
            <url-pattern>*.js</url-pattern>
            <url-pattern>*.jpg</url-pattern>
        </servlet-mapping>

js调用

2.\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rv2ndkJV-1672666051196)(E:\\政通路\\课堂笔记\\S2\\Ajax\\assets\\image-20200509155731042.png)\]

//向客户端发响应，编码要一致;
            response.setContentType("text/html;charset=UTF-8");
            response.setCharacterEncoding("UTF-8");

3.出来2行的问题是需要加判断,并且&&符号；

if(xhr.readyState==4 && xhr.status==200){
        
         代码
     }

总结一下：

1.了解异步对象XmlHttpRequest

2.了解其四大步骤；

3.通过javaweb代码来实践一下。这个是重点，看视频，一步一步走；

作业：

用户注册的实现

## 第二章 jQuery实现Ajax ##

传统方式实现Ajax的不足

*  步骤繁琐
 *  方法、属性、常用值不好记忆
 *  处理复杂数据（如XML）比较麻烦
 *  浏览器兼容问题

jQuery Ajax将Ajax相关操作进行了封装。$.ajax() 方法通过 HTTP 请求加载远程数据。

该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get(),  . p o s t ( ) 等。 .post() 等。 .post()等。.ajax() 返回其创建的 XMLHttpRequest 对象。

. a j a x ( ) 它包括： .ajax()它包括： .ajax()它包括：.get(),$.post()

### 2.1 语法格式 ###

();小括号里面包括了\{\}。

在\{\}里面，写了type,url,data,success,dataType这样几个key关键字的，给这几个关键字赋值的时候，使用的是:"值"的方式。

$.ajax(\{

type: ‘POST’, //请求方式，默认为get

url: *url* ,

data: *data* ,

success: *success* ,

dataType: *dataType*

\});

参数

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><em>url</em></td> 
   <td>必需。规定把请求发送到哪个 URL,Servlet|Controller</td> 
  </tr> 
  <tr> 
   <td><em>data</em></td> 
   <td>可选。映射或字符串值。规定连同请求发送到服务器的数据，客户端向服务器的数据</td> 
  </tr> 
  <tr> 
   <td><em>success(result, textStatus, jqXHR)</em></td> 
   <td>可选。请求成功时执行的回调函数。</td> 
  </tr> 
  <tr> 
   <td><em>dataType</em></td> 
   <td>可选。规定预期的服务器响应的数据类型。 默认执行智能判断（xml、json、script 或 html）。</td> 
  </tr> 
 </tbody> 
</table>

昨天else之后的代码替换：

$.ajax({
        
                            type:"get",
                            url:"userServletByName",
                            //data:"name="+name, //是客户端向服务器的请求数据
         					//按照json格式传递;
         					data:{
        "name":name},  //""里面的是key,不带"的是value。
                            datatype:"text",
                            success:function(result) {
           //成功的时候，执行的匿名函数;对比昨天的onreadyStatechange
                                console.log(result);
                                if(result=='true'){
        
                                    $("#nameinfo").html("用户名已经注册").addClass("nameinfo");
                                }else{
        
                                    $("#nameinfo").html("用户名可以注册").addClass("gre");
                                }
                            }
                        });

代码量非常简练。

## 第三章 JSON ##

> 概念：是一种轻量级的数据交换格式，采用完全独立于编程语言的文本格式来存储和表示数据。英文：[JavaScript][] Object Notation

### 3.1语法格式 ###

\{key1：value1, key2：value2, …\} 的键值对结构，当值为字符串的时候，需要使用"",引起来。

let str=\{“name”:“张三”,“age”:18,“address”:“河南郑州”\}

json数组,数组的格式：

\[\],这个\[\]里面放多个\{\}对象或字符串

\{\}, 这些都是json格式

\{\},

\{\}

json对象读取：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>ajax</title>
    		<script src="js/jquery-1.12.4.min.js"></script>
    		<script>
    			//1.定义一个简单的json对象
    			//这个json对象，前面的key，id name  age,这些是不是数据库里面的字段呢？？？
    			//将来，我们的数据库的数据，可以转换为json数据,python,go,java都可以使用
    			let user={
          "id":1,"name":"张三","age":22};
    			//let user='{"id":1,"name":"张三","age":22}';
    			//json字符串，字符串以""或'',包括起来;
    			//console.log(user);
    			//下面将这个json的数据拿到html元素里面;
    			$(function(){
          
    				//加载的时候，追加到span里面
    				//访问json对象的时候，格式：对象名.key,对象是user
    				$("#cont").append("编号:"+user.id+"<br/>"+
    								 "姓名:"+user.name+"<br/>"+
    								 "年龄:"+user.age+"<br/>");
    			})
    		</script>
    	</head>
    	<body>
    		<span id="cont" style="display:block;border: 1px solid #2A65BA;"></span>
    	</body>
    </html>

json数组读取：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>json数组的格式</title>
    		<script src="js/jquery-1.12.4.min.js"></script>
    		<script>
    			//1.定义json数组格式;强调，不加''或""的都是对象格式;
    			let users=[
    				{
          "id":1,"name":"张三","age":22},
    				{
          "id":2,"name":"李四","age":12},
    				{
          "id":3,"name":"卢本伟","age":33}
    			];
    			console.log(users);//json对象数组;
    			//目标：将name放到下拉框里面？？？
    			$(function(){
          
    				//针对users左一个遍历;
    				for(let i=0;i<users.length;i++){
          
    					//将name放到select元素里面;value的好处，可以将来给后台传递id，name做显示。
    					$("#sel").append("<option value="+users[i].id+">"+users[i].name+"</option>");
    				}
    			})
    		</script>
    	</head>
    	<body>
    		
    		<select id="sel">
    			
    		</select>
    		
    	</body>
    </html>

## 第四章 Ajax和Json ##

案例 Ajax实现搜索框自动补全

因为Ajax技术异步请求和无刷新特性，使得在客户端用户体验越来越丰富。 最典型的一个案例是各大搜索引擎都应用的搜索关键字自动联想功能，当打开Google或者百度， 在搜索栏中输入关键字时， 会自动弹出很多和关键字相关的信息。

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m9UfUKbx-1672666051198)(E:\\政通路\\课堂笔记\\S2\\Ajax\\assets\\image-20200512094045330.png)\]

### 思路 ###

1.当用户松开键盘（输入内容）时向服务器发送请求，处理事件是onkeyup;

2.服务器得到客户端的请求数据之后，去数据库查询结果，返回查询结果到客户端；

3.客户端得到响应数据之后，自动填充到自动提示区域；

4.在选中内容上，光标悬停会有背景突出显示；

5.当我们单击某个内容的时候，内容显示到搜索框，整个提示区域关闭；

### 步骤 ###

#### 1.构建页面，onkeyup事件 ####

搜索框的onkeyup事件;

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>ajax自动补全</title>
        <style>
            @import url("css/news.css");
        </style>
        <script src="js/jquery-1.12.4.min.js"></script>
        <script>
            //1.2 搜索框onkeyup事件
            $(function () {
          
                $("#key").keyup(function () {
          
                    //首选还是先判断文本框内容是否为空;
                    let key=$(this).val();
                    if(key==null||key==''){
          
                        $("#tips").css("display","none");
                        return;
                    }else{
          
                        //其他，就是搜索框有内容，ajax操作；
    
                    }
                });
            });
        </script>
    </head>
    <body>
        
        <form action="" method="get">
            <input type="text" name="key" id="key" placeholder="请输入新闻标题">
            <button id="search" type="button">搜索</button><br/>
            <div id="tips"></div>
        </form>
    </body>
    </html>

#### 2.客户端请求服务器的数据 ####

$.ajax(\{\})–>Servlet–>业务层对象–>dao层对象–sql数据；

NewsDaoImpl容易出错的代码，sql语句的模糊查询，再次强调！！！

可以先填坑！！！

//        String sql="select * from news where title like ?";
    //        //预编译语句对象赋值，？% key %
    //        Object[]params={"%"+key+"%"};
    
            String sql="select * from news where title like concat('%',?,'%')";
            Object[]params={key};
            return BaseDao.findList(sql,News.class,params);

补充：fastjons jar

Servlet代码

坑1：xml问题，需要设置编码；

坑2：json,修改text/json,务必有json

//1.服务器端的Servlet,接受客户端的数据；
            String key=request.getParameter("key");
            //2.调用业务层的对象；业务层的对象，又需要去调用dao层对象;
            NewsService newsService=new NewsServiceImpl();
            //业务层对象，根据关键字来查找新闻;
            List<News> newsList = newsService.selNewsByKey(key);
            //System.out.println(newsList);
            response.setContentType("text/html;charset=utf-8");
            response.setCharacterEncoding("utf-8");
            //向客户端发送数据;
            PrintWriter writer = response.getWriter();
            //注意：此处有变化，使用到了新的jar：fastjson
            //之前输出的是List<News>对象;
            writer.print(JSON.toJSON(newsList)); //fastJson直接将我们的对象集合转换为json数据;
            writer.flush();
            writer.close();

#### 3.填充数据到显示区域 ####

这时候已经得到数据了：

\[\{\}\] 是json数组;

//测试json数组的长度
                                //console.log(result.length);
                                //如何显示2条json数组的数据；思路：循环；
                                let content="";  //定义变量，接受title的内容;
                                for(let i=0;i<result.length;i++){
        
                                    content+="<div>"+result[i].title+"</div>";
                                }
                                //填充到提示区域;
                                $("#tips").html(content).show();

#### 4.5 剩下功能 ####

//4.背景突出显示;利用hover(a,b):相当于mouseover,mouseout
                                $(".list_link").hover(
                                    function(){
        
                                        $(this).addClass("hover");
                                    },
                                    function () {
        
                                        $(this).removeClass("hover");
                                    }
                                );
                                //5.单击选中内容的时候，提示区域没有了，选中内容到了搜索框 ；
                                $(".list_link").click(function () {
        
                                    $("#key").val($(this).html());
                                    $("#tips").html("").hide();//清空，并隐藏;
                                });

作业：如何显示新闻标题 新闻作者,模仿天猫的自动补全；

$(this).addClass("hover");
                                },
                                function () {
                                    $(this).removeClass("hover");
                                }
                            );
                            //5.单击选中内容的时候，提示区域没有了，选中内容到了搜索框 ；
                            $(".list_link").click(function () {
                                $("#key").val($(this).html());
                                $("#tips").html("").hide();//清空，并隐藏;
                            });

作业：如何显示新闻标题    新闻作者,模仿天猫的自动补全；
    
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gNJ5z8LA-1672666051200)(E:\政通路\课堂笔记\S2\Ajax\assets\image-20200519182905566.png)]

[JavaScript]: https://baike.baidu.com/item/JavaScript