Ajax和JSON-学习笔记01【原生JS方式实现Ajax】

雨点打透心脏的1/2处 2022-10-30 12:21 36阅读 0赞

>  *  **[Java后端 学习路线 笔记汇总表【黑马程序员】][Java_ _]**
> 
> 1.  [Ajax和JSON-学习笔记01【原生JS方式实现Ajax】][Ajax_JSON-_01_JS_Ajax]
> 2.  [Ajax和JSON-学习笔记02【JQuery方式实现Ajax】][Ajax_JSON-_02_JQuery_Ajax]
> 3.  [Ajax和JSON-学习笔记03【JSON\_基础语法】][Ajax_JSON-_03_JSON]
> 4.  [Ajax和JSON-学习笔记04【JSON\_解析器】][Ajax_JSON-_04_JSON]

**目录**

第1节 原生JS方式实现Ajax

今日内容

AJAX\_概念

AJAX\_实现\_原生JS方式1

w3school - Ajax 教程 - XHR 创建对象

w3school - Ajax 教程 - XHR 请求

案例演示效果

AJAX\_实现\_原生JS方式2

w3school - Ajax 教程 - Ajax 实例

w3school - Ajax 教程 - XHR readyState

案例演示效果

01-原生js实现ajax.html

AjaxServlet.java

--------------------

# 第1节 原生JS方式实现Ajax #

## 今日内容 ##

> 1.  AJAX
> 2.  JSON

## AJAX\_概念 ##

> **AJAX**  
> 1. 概念： ASynchronous JavaScript And XML，异步的JavaScript和XML  
>     1. 异步和同步：客户端和服务器端相互通信的基础上  
>         \* 客户端必须等待服务器端的响应。在等待的期间，客户端不能做其他操作。  
>         \* 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。
> 
>         Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。  
>         通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。  
>         传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。  
>         提升用户的体验。  
> 2. 实现方式

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70][] 同步和异步

> ![2021021915395413.png][]

## AJAX\_实现\_原生JS方式1 ##

> **AJAX**  
> 1. 概念  
> 2. 实现方式：  
>     1. 原生的JS实现方式（了解）  
>     2. JQeury实现方式  
>         1. $.ajax()
> 
>         2. $.get()
> 
>         3. $.post()

### w3school - Ajax 教程 - XHR 创建对象 ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3][]

### w3school - Ajax 教程 - XHR 请求 ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4][]

### 案例演示效果 ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5][]

## AJAX\_实现\_原生JS方式2 ##

### w3school - Ajax 教程 - Ajax 实例 ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6][]

### w3school - Ajax 教程 - XHR readyState ###

> ![20210219160140751.png][]
> 
> ![20210219160213393.png][]

### 案例演示效果 ###

> ![20210219160729102.png][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8][]

### 01-原生js实现ajax.html ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            //定义方法
            function fun() {
                //发送异步请求
                //1.创建核心对象
                var xmlhttp;
                if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                }
                else {// code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                //2. 建立连接
                /*
                    参数：
                        1. 请求方式：GET、POST
                            * get 方式：请求参数在URL后边拼接。send方法为空参
                            * post方式：请求参数在send方法中定义
                        2. 请求的URL路
                        3. 同步或异步请求：true（异步）或 false（同步）
                 */
                xmlhttp.open("GET", "ajaxServlet?username=tom", true);
                //3.发送请求
                xmlhttp.send();
                //4.接受并处理来自服务器的响应结果
                //获取方式 ：xmlhttp.responseText
                //什么时候获取？当服务器响应成功后再获取
                //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
                xmlhttp.onreadystatechange = function () {
                    //判断readyState就绪状态是否为4，判断status响应状态码是否为200
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        //获取服务器的响应结果
                        var responseText = xmlhttp.responseText;
                        alert(responseText);
                    }
                }
            }
        </script>
    </head>
    <body>
        <input type="button" value="发送异步请求" onclick="fun();">
        <input>
    </body>
    </html>

### AjaxServlet.java ###

package cn.itcast.web.servlet;
    
    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;
    
    @WebServlet("/ajaxServlet")
    public class AjaxServlet extends HttpServlet {
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //1.获取请求参数
            String username = request.getParameter("username");
    
            //处理业务逻辑。耗时
            try {
                Thread.sleep(5000); // 线程睡5秒
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
    
            //2.打印username
            System.out.println(username);
    
            //3.响应
            response.getWriter().write("hello : " + username);
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            this.doPost(request, response);
        }
    }

> 加油~

[Java_ _]: https://blog.csdn.net/weixin_44949135/article/details/113773297
[Ajax_JSON-_01_JS_Ajax]: https://blog.csdn.net/weixin_44949135/article/details/113863644
[Ajax_JSON-_02_JQuery_Ajax]: https://blog.csdn.net/weixin_44949135/article/details/113869026
[Ajax_JSON-_03_JSON]: https://blog.csdn.net/weixin_44949135/article/details/113870353
[Ajax_JSON-_04_JSON]: https://blog.csdn.net/weixin_44949135/article/details/113870817
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70]: /images/20221024/1ae4bb4cf307404db1d4d41340158df9.png
[2021021915395413.png]: /images/20221024/7c3592b9441b4aa1a0b49fe1abecf43f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/e4cf854996c2414c899c531dde81a0c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2]: /images/20221024/94dd4c0fc40f4d07a2486c70fe7cbf59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3]: /images/20221024/3bef1ca508bc4c1d9b212c832458ee60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4]: /images/20221024/92572bee2c6543f98b3a1e199b374342.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5]: /images/20221024/fd2595158c0a428ba6db0114efe8543d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6]: /images/20221024/2ca1e227212b4eae95b323697d2d92e9.png
[20210219160140751.png]: /images/20221024/3a66eb704705462ab92d0e51e667de47.png
[20210219160213393.png]: /images/20221024/2499408c7fe245ad9c3c05d38a193b78.png
[20210219160729102.png]: /images/20221024/aa5e58d44e73434aad27f4b2c86d65c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7]: /images/20221024/11d1431f06e045388003d7f3787d78f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8]: /images/20221024/eb84701cd73844f1aa2f0de88d50b89a.png