Ajax 学习笔记

huangshaohui00

已于 2022-07-19 21:11:27 修改

阅读量290

点赞数 1

文章标签： ajax javascript 学习

于 2022-07-19 21:06:09 首次发布

本文链接：https://blog.csdn.net/qq_51307593/article/details/125881003

版权

Ajax

1.什么是ajax

Asynchronous Javascript And XML 异步的JavaScript 和 xml。
AJAX 是一种从网页访问 Web 服务器的异步无刷新技术。
为了解决传统的 web 应用当中 "请求" - "等待" - "响应" 的整个过程的弊端
而出现的一种创新的技术。
异步：同步是必须等待请求返回结果之后，才能继续其他操作。异步是可以在等待的时间里去继续其他操作，当响应就绪后对响应进行处理。
无刷新：按需加载。（当点击查看更多的时候，就会结合DOM向服务器请求将数据追加进去，并没有刷新页面）
无刷新场景：如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。
它的本质其实就是使用浏览器的内置对象向服务器发送一个请求，服务器返回不同类型的数据给前端。

使用这些数据对页面部分内容进行更新，整个过程页面没有任何刷新。

ajax通过后台服务器进行少量的数据交换，可以对网页进行异步处理。

传统的网页【不使用ajax】需要更新页面的时候，必须重新加载整个网页。
而ajax不需要，因为它可以异步请求。

2.ajax内置对象

XmlHttpRequest
该对象提供了对 HTTP 协议的完全访问，可以使用它
向后台服务器发送基于http协议的请求，接收服务器的响应
做数据交换使用。

3.AJAX原理与实现

步骤：
	1.创建 XmlHttpRequest 对象。
	2.设置请求参数以及访问的方式。
	3.设置请求消息头，用于在发送post请求时传递参数。
	4.绑定回调函数。服务器在响应时会触发该函数。
	5.判断浏览器与服务器通讯是否已经结束，并且是否响应成功

1.创建 XmlHttpRequest 对象。

这个对象用于和服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。如果要将请求发送给服务器，需要利用对象的open()和send()方法。

var request;
if(window.XMLHttpRequest){
    // 现代的（IE7+、Firefox、Chrome、Safari 以及 Opera）浏览器 -- 新建XMLHttpRequest对象
    request = new XMLHttpRequest();
}else{
    // 新旧版本混写：通过检测window对象是否有XMLHttpRequest属性来确定浏览器是否支持标准的XMLHttpRequest
    request = new ActiveXObject('Microsoft.XMLHTTP');
}

2.设置请求参数以及访问的方式

1、 request. open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求:

第一个参数指定是GET还是POST，第二个参数是文件在服务器上的位置，第三个参数指定是否使用异步，默认是true异步，所以不用写。

2、url – 服务器上文件的地址，该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。

request.open('get', 'single'); //single是我写的servlet

3.设置请求消息头，用于在发送post请求时传递参数。

// post 方式发送数据 需要设置请求头
xhr.open(“post”, “test.php”, true)
xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”)

4.绑定回调函数。服务器在响应时会触发该函数。

5.判断浏览器与服务器通讯是否已经结束，并且是否响应成功

例子：

jsonServlet。java

package com.powernode.servlet;

import com.powernode.entity.User;
import com.fasterxml.jackson.databind.ObjectMapper;
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(urlPatterns = {"/single"})
public class JsonServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html; charset=UTF-8");//响应防止乱码

        User user =new User("少辉","男",18); //给实体类输入姓名，性别，年龄
        ObjectMapper mapper = new ObjectMapper();//创建解析Java对象的工具对象
        String json = mapper.writeValueAsString(user);//解析Java对象，将Java对象解析成JSON字符串
         System.out.println(json);//可以写这个查看一下解析后的json字符串
        response.getWriter().print(json);//将被解析成JSON字符串的对象响应到前端

    }
}

html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>
    JSON01
</h1>
<script>
    window.onclick = function (){
        var request;
        if(window.XMLHttpRequest){
            request = new XMLHttpRequest();
        }else {
            request = new ActiveXObject('Microsoft.XMLHTTP')
        }

        request.open('get','single',true);
        request.onreadystatechange = function (){
            if(request.status == 200 && request.readyState == 4)
            {
                let obj = JSON.parse((request.responseText));
                console.log((obj.name));
            }
        }
        
    }

在这里插入图片描述

4.ajax返回的状态

redayState属性

返回浏览器与服务器通讯状态。
返回值是一个 number 类型的值，不同的值有以下区别：
0：未初始化，但是对象已经建立。
1：初始化，对象已经建立，但是尚未调用send方法
2：发送数据，send方法已经被调用，请求已经发送。
3：数据传输中，浏览器已经接收了部分数据。
4：响应结束，浏览器接收服务器返回的所有数据。

status

服务器响应的状态码
200：服务器响应成功。
404：未找到页面

5.JSON

1.什么是JSON

JSON JavaScirpt Obejct Notation	 脚本对象标记

JS标记对象，是一种轻量级的数据交换格式。目前也别广泛使用。
因为它的本质是一个符合格式的字符串。
JSON被用于前端与后端之间交互的工具。

2.JSON的语法

单个对象语法：
	var obj = `{"name":"zs","age":10}`;
	
集合对象语法：
	var objs = `[
		{"name":"董大炮1","sex":"男","age":26},
		{"name":"董大炮2","sex":"男","age":26},
		{"name":"董大炮3","sex":"男","age":26}
	]`;

3.jackson

Jackson 是当前全球使用率最高的，用来序列化和反序列化json的Java开源框架。 
它可以将Java对象转为JSON字符串.

目前国内使用的比较多的是FastJson，该框架由阿里巴巴开源。
但是Spring官网默认支持的JSON解析工具是jackson

4.将Java对象转换成JSON字符串

Servlet页面

package com.powernode.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.powernode.entity.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.util.ArrayList;
import java.util.List;
@WebServlet("/list")
public class ListToJsonServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        User u1 = new User("董大炮1", "男", 18);
        User u2 = new User("董大炮2", "男", 19);
        User u3 = new User("董大炮3", "男", 20);
        User u4 = new User("董大炮4", "男", 21);
        User u5 = new User("董大炮5", "男", 22);
        User u6 = new User("董大炮6", "男", 23);
        User u7 = new User("董大炮7", "男", 24);
        User u8 = new User("董大炮8", "男", 25);
        List<User> users = new ArrayList<>();
        users.add(u1);
        users.add(u2);
        users.add(u3);
        users.add(u4);
        users.add(u5);
        users.add(u6);
        users.add(u7);
        users.add(u8);
        /*
            创建解析Java对象的工具对象
         */
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(users);
        System.out.println(json);
        /*
            将被解析成JSON字符串的对象响应到前端
         */
        response.getWriter().print(json);
    }
}

html 页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            //1.创建 XmlHttpRequest 对象。
            var xhr = new XMLHttpRequest();
            //2.设置请求参数以及访问的方式。
            xhr.open('get', 'list');
            //3.绑定回调函数。服务器在响应时会触发该函数。
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var objs = JSON.parse(xhr.responseText);
                    var docs = ``;
                    objs.forEach((user, index) => {
                        docs +=
                            `
                             <tr>
                                <td>${user.name}</td>
                                <td>${user.sex}</td>
                                <td>${user.age}</td>
                                <td>
                                     <!--btn-type 和 data-uls-tag 是自定义属性 -->
                                     <button type="button" btn-type="update" data-uls-tag="${user.name}">更新</button>
                                     &nbsp;|&nbsp;
                                     <button type="button" btn-type="delete">删除</button>
                                </td>
                            </tr>
                            `;
                    });
                    <!-- 找到tbody  id="t1节点   -->
                    document.getElementById('t1').innerHTML = docs;
                }
            }
            xhr.send();
            /*
                 给未来元素添加点击事件
                event:它是一个当前事件对象。
                给ID = t1 节点添加 监听事件
            */
            document.getElementById('t1').addEventListener('click', function (event) {
                /*
                    获取用户具体点击的哪个按键
                    获取当前点击按钮节点对象。
                 */
                var target = event.target;
                var type = target.getAttribute("btn-type");
                if(type == "delete"){
                    console.log("用户点击了删除按钮....")
                }else{
                    console.log("用户点击了更新按钮....")
                    /*
                    根据自定义属性，获取指定节点的数据
                 */
                    var data = target.getAttribute("data-uls-tag");
                    console.log(data);
                }
            })
        }


    </script>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="60%" border="1">
    <thead>
    <th>姓名</th>
    <th>性別</th>
    <th>年齡</th>
    <th>操作</th>
    </thead>

    <tbody align="center" id="t1">

    </tbody>

</table>
</body>
</html>

鼠标点击更新和删除，操作台输出相应Username 的值。

在这里插入图片描述

huangshaohui00

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax 学习笔记

AsynchronousJavascriptAndXML异步的JavaScript和xml。AJAX是一种从网页访问Web服务器的异步无刷新技术。为了解决传统的web应用当中"请求"-"等待"-"响应"的整个过程的弊端而出现的一种创新的技术。异步同步是必须等待请求返回结果之后，才能继续其他操作。异步是可以在等待的时间里去继续其他操作，当响应就绪后对响应进行处理。无刷新按需加载。（当点击查看更多的时候，就会结合DOM向服务器请求将数据追加进去，并没有刷新页面）......
复制链接

扫一扫