Ajax笔记

最新推荐文章于 2021-12-11 16:35:56 发布
最新推荐文章于 2021-12-11 16:35:56 发布
阅读量289 收藏 1
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dj741/article/details/79578017
版权

Ajax

（asynchronous javascript and xml[异步请求 javascript xml])

传统请求

发起传统请求的方式

i.地址栏
ii.超级链接
iii.表单
iiii.javascript:location.href 函数

传统请求的问题

需要刷新页面才能等待结果进行后续操作。

异步请求

异步请求的特点

响应的内容不是新的页面,是一个页面的局部（字符串信息），所以用户在使用异步请求时，不需要等待响应，直接可以进行后续的操作

传统请求与异步请求的区别

响应内容

传统请求响应：新的页面 刷新页面
异步请求响应：页面的局部，字符串的信息

对于用户的操作

传统的请求：等待响应
异步的请求：不需要等待响应，用户可以直接进行后续操作

异步请求的开发

异步请求对象

javascript:XmlHttpRequest 对象 xhr
针对不同系列浏览器创建方式不同
Chrom|FF|safari

Var xhr = new XmlHttpRequest();

IE系

Var xhr = new ActionXObject(“Microsoft.XMLHTTP”);

xhr对象使用

i.创建xhr对象
ii.发送请求

xhr.open("get | post", url);

iii.如何传递数据

xhr.send(数据);

iiii.监听响应
xhr.readystate //检测是否完成

状态码状态
0xhr对象被创建，并没有调用send()方法
1xhr对象调用了send方法，但没有响应
2xhr对象调用了send方法，响应已经返回客户端
3响应解析
4响应解析完成可以使用

xhr.status //响应是否正确

状态码状态
404xhr对象被创建，并没有调用send()方法
500xhr对象调用了send方法，但没有响应
405xhr对象调用了send方法，响应已经返回客户端
200正确
xhr.onreadystatechange = function() {
    if (xhr.readystate == 4 && xhr.status == 200) {
        xhr.responseTest  //获得响应文本
        //Javascript中的DOM编程展示在页面中
    }
}

用户名校验开发实例：

<script type="text/javascript">
    function test1() {
        //获取用户名
        var input = document.getElementById("username");
        var username = input.value;
        //发送AJAX请求
        var xhr;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //发送请求
        xhr.open("GET", "${pageContext.request.contextPath}/check/checkusername1?username="    + username);
        xhr.send(null);
        //监听响应

        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                //获取校验结果
                var message = xhr.responseText;
                //DOM提示信息
                var m = document.getElementById("message");
                m.innerHTML = message;
            }
        }
    }
</script>
<form action="">
用户名<input type="text" id="username" name="username" onblur="test1()" value="username">
<span id="message"></span>
<br /> 
密码<input type="password" name="password">
<br /> 
年龄<input type="text" name="age">
<br />
</form>

JSON协议串

本质

字符串

作用

在异构的编程体系中，进行数据的传输和交互

核心

对象形式

User {
    id = 1;
    userName = "hibiscidai";
    age = 20;
}
{"id":1,"userName":"hibiscidai","age":18}

集合形式

数组：

String [] names = {"xiaoming", "xiaozhu", "xiaogou"}
["xiaoming","xiaozhu","xiaogou"]

含有对象的集合

List <User>
[{"id":1,"userName":"hibiscidai","age":18},{"id":2,"userName":"xiaoming","age":20}]

内嵌对象

User {
    id = 1;
    userName = "hibiscidai";
    Address address;
    List<String> phone;
}
Address {
    city = "zhengzhou";
    street = "wenhualu";
}
{"id":1,"userName":"hibiscidai",{"city":"zhengzhou","street":"wenhualu"},["11111","2222","3333"]}

Map类型与对象的转换形式是一致的

Map<String, String> m = new HashMap<String, String>();
m.put("name1", "hibiscidai1");
m.put("name2", "hibiscidai2");
{"name2":"hibiscidai2","name1":"hibiscidai1"}

JSON协议串解析

异构体系中对象和集合与JSON串之间的转换
针对于java有jsonlib/gson(Google)/fastjson(ali)/jakenson(springmvc)
需要提前引入对应jar包

实际测试
用于本测试的对象
User.java | 省略setter和getter与构造方法

public class User {
    public String name;
    String phone;
    public int age;
    public Address address;
}

Address.java | 同User.java

public class Address {
    public String city;
    public String Street;
}

GSON(google)

java中的对象==》JSON串
@Test
    // java中的对象==》JSON串
    public void test1() {
        User user = new User("hibiscidai", "123456", 18, null);

        Gson gson = new Gson(); // 创建GSON对象
        String string = gson.toJson(user);
        System.out.println(string);
    }
{"name":"hibiscidai","phone":"123456","age":18}
java中的集合==》JSON串
@Test
    // java中的集合==》JSON串
    public void test2() {
        User user1 = new User("hibiscidai1", "1234561", 181, null);
        User user2 = new User("hibiscidai2", "1234562", 182, null);
        User user3 = new User("hibiscidai3", "1234563", 183, null);

        List<User> listUser = new ArrayList<User>(); // 创建List集合
        listUser.add(user1);
        listUser.add(user2);
        listUser.add(user3);

        Gson gson = new Gson(); // 创建GSON对象
        String string = gson.toJson(listUser);
        System.out.println(string);
    }
[{"name":"hibiscidai1","phone":"1234561","age":181},{"name":"hibiscidai2","phone":"1234562","age":182},{"name":"hibiscidai3","phone":"1234563","age":183}]
java中的内嵌对象==》JSON
@Test
    // java中的内嵌对象==》JSON
    public void test3() {
        Address addre = new Address("zhengzhou", "wenhualu");
        User user = new User("hibiscidai1", "1234561", 181, addre);

        Gson gson = new Gson(); // 创建GSON对象
        String string = gson.toJson(user);
        System.out.println(string);
    }
{"name":"hibiscidai1","phone":"1234561","age":181,"address":{"city":"zhengzhou","Street":"wenhualu"}}
java中的Map对象==》JSON
@Test
    // java中的Map对象==》JSON
    public void test4() {
        Map<String, String> maps = new HashMap<String, String>();
        maps.put("1", "hibiscidai");
        maps.put("2", "hibiscidai2");

        Gson gson = new Gson(); // 创建GSON对象
        String string = gson.toJson(maps);
        System.out.println(string);
    }
{"2":"hibiscidai2","1":"hibiscidai"}
JSON==》java中对象
@Test
    // JSON==》java中对象
    public void test5() {
        User user = new User("hibiscidai", "123456", 18, null);

        Gson gson = new Gson(); // 创建GSON对象
        String string = gson.toJson(user);

        User user2 = gson.fromJson(string, User.class); // json转对象
        System.out.println(user2);
    }
User [name=hibiscidai, phone=123456, age=18, address=null]

fastjson(ali)

对象>int>string

java中的对象==》JSON串
@Test
    // java中的内嵌对象==》JSON
    public void test3() {
        Address addre = new Address("zhengzhou", "wenhualu");
        User user = new User("hibiscidai1", "1234561", 181, addre);

        String string = JSON.toJSONString(user);
        System.out.println(string);
    }
{"age":18,"name":"hibiscidai","phone":"123456"}
java中的集合==》JSON串
@Test
    // java中的集合==》JSON串
    public void test2() {
        User user1 = new User("hibiscidai1", "1234561", 181, null);
        User user2 = new User("hibiscidai2", "1234562", 182, null);
        User user3 = new User("hibiscidai3", "1234563", 183, null);

        List<User> listUser = new ArrayList<User>(); // 创建List集合
        listUser.add(user1);
        listUser.add(user2);
        listUser.add(user3);

        String string = JSON.toJSONString(listUser);// 创建GSON对象
        System.out.println(string);
    }
[{"age":181,"name":"hibiscidai1","phone":"1234561"},{"age":182,"name":"hibiscidai2","phone":"1234562"},{"age":183,"name":"hibiscidai3","phone":"1234563"}]
java中的内嵌对象==》JSON
@Test
    // java中的内嵌对象==》JSON
    public void test3() {
        Address addre = new Address("zhengzhou", "wenhualu");
        User user = new User("hibiscidai1", "1234561", 181, addre);

        String string = JSON.toJSONString(user);
        System.out.println(string);
    }
{"address":{"Street":"wenhualu","city":"zhengzhou","street":"wenhualu"},"age":181,"name":"hibiscidai1","phone":"1234561"}
java中的Map对象==》JSON
@Test
    // java中的Map对象==》JSON
    public void test4() {
        Map<String, String> maps = new HashMap<String, String>();
        maps.put("1", "hibiscidai");
        maps.put("2", "hibiscidai2");

        String string = JSON.toJSONString(maps);
        System.out.println(string);
    }
{"2":"hibiscidai2","1":"hibiscidai"}
JSON==》java中对象
@Test
    // JSON==》java中对象
    public void test5() {
        User user = new User("hibiscidai", "123456", 18, null);

        Gson gson = new Gson(); // 创建GSON对象
        String string = gson.toJson(user);

        User user2 = JSON.parseObject(string, User.class); // json转对象
        System.out.println(user2);
    }
User [name=hibiscidai, phone=123456, age=18, address=null]

DOM编程

<script type="text/javascript">
    function test1() {
        //创建异步请求对象
        var xhr;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //发送异步请求
        //Struts2请求
        xhr.open("GET", "${pageContext.request.contextPath}/user/selectAll");
        xhr.send(null);
        //监听响应
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                //把JSON串转化为JS数组
                var users = JSON.parse(xhr.responseText);
                //获取table标签对象
                var table = document.getElementById("table");
                for ( var i = 0; i < users.length; i++) {
                    //DOM编程
                    //创建行
                    var tr = document.createElement("tr");
                    //创建第一个单元格
                    var td = document.createElement("td");

                    //文本填充第一个单元格(列)
                    var id = document.createTextNode(users[i].id);
                    td.appendChild(id);//第一个单元格填充内容
                    tr.appendChild(td);//第一个单元行填充单元格

                    //第二个单元格(列)
                    var td1 = document.createElement("td");
                    var username = document.createTextNode(users[i].username);
                    td1.appendChild(username);
                    tr.appendChild(td1);

                    //第二个单元格(列)
                    var td2 = document.createElement("td");
                    var password = document.createTextNode(users[i].password);
                    td2.appendChild(password);
                    tr.appendChild(td2);

                    //将行列接入表格
                    table.appendChild(tr);
                }
            }
        }
    }
</script>

对于前台操作的表格

<body onload="test1()">
<table id="table" border="1px" cellspading="0px" cellpadding="0px"
        width="80%">
        <tr bgcolor="red">
            <td>用户ID</td>
            <td>用户名</td>
            <td>密码</td>
        </tr>
</table>
</body>

JSON转js对象或数组

（浏览器内置Jquery，Ext，vue，angluar js）浏览器内置对象，后续使用js框架

JSON.parse(jsonString)
–>js对象
–>ja数组

function test1() {
    /*
    //定义JSON串
    var u = '{"username":"hibiscidai","age":18}';
    //吧json串转化为js对象
    var user = JSON.parse(u);
    alert(user.username);
    alert(user.age);
    */
    //定义JSON串
    var s = '["hibiscidai","dai","mujin"]';
    var ss = JSON.parse(s);
    for (var i = 0; i < ss.length; i++) {
        alert(ss[i]);
    }
}

AJAX+Struts2+Mybatis整合

AJAX+Struts2+Mybatis整合

案例：显示所有用户的信息

显示所有用户的信息
selectAllAction

public String selectAll() {
    // 调用业务
    UserService us = new UserServiceImpl();
    List<User> users = us.selectAllUsers();
    // JSON串的转换
    String jsonString = JSON.toJSONString(users);
    HttpServletResponse response = ServletActionContext.getResponse();
    response.setCharacterEncoding("UTF-8");
    PrintWriter out = null;
    try {
        out = response.getWriter();
        out.print(jsonString);
    } catch (IOException e) {
        e.printStackTrace();
    }
    out.close();
    return null;
}

前台表单

<body onload="test1()">
    <table id="table" border="1px" cellspading="0px" cellpadding="0px" width="80%">
        <tr bgcolor="red">
            <td>用户ID</td>
            <td>用户名</td>
            <td>密码</td>
        </tr>
    </table>
</body>

Ajax函数

<script type="text/javascript">
    function test1() {
        //创建异步请求对象
        var xhr;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //发送异步请求
        xhr.open("GET", "${pageContext.request.contextPath}/user/selectAll");
        xhr.send(null);
        //监听响应
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                //把JSON串转化为JS数组
                var users = JSON.parse(xhr.responseText);
                //获取table标签对象
                var table = document.getElementById("table");
                for ( var i = 0; i < users.length; i++) {
                    //DOM编程
                    //创建行
                    var tr = document.createElement("tr");
                    //创建第一个单元格
                    var td = document.createElement("td");
                    //文本填充第一个单元格
                    var id = document.createTextNode(users[i].id);
                    td.appendChild(id);
                    tr.appendChild(td);

                    var td1 = document.createElement("td");

                    var username = document.createTextNode(users[i].username);
                    td1.appendChild(username);
                    tr.appendChild(td1);

                    var td2 = document.createElement("td");

                    var password = document.createTextNode(users[i].password);
                    td2.appendChild(password);
                    tr.appendChild(td2);

                    table.appendChild(tr);
                }
            }
        }
    }
</script>
最佳陌生人
关注
专栏目录
笔记整理(1):AJAX
菜鸟的自我修养
08-07 170
Ajax 1.传统请求和异步请求 传统请求: 基于超级链接 地址栏 form表单 地址栏 location.href 发起的请求全部是传统请求 特点: 请求之后,刷新整张页面 缺点: 由于刷新了整张页面,用户操作被中断,造成大量网络流量的极大浪费。 异步请求: 基于ajax发起的请求都是异步请求 特点: 多个请求并行发生,请求之间互不影响,请求之后页面不动,刷新页面的局部 2.什...
ajax笔记
qq_37980686的博客
11-19 125
ajax异步处理很多 例如网页播放视频，提交的评论，显示弹幕。 什么是ajax？ ajax是一种改善用户体验的技术，其实质是，使用xmlhttprequest对象异步地向服务器发送请求 服务器返回部分数据，而不是一个完整的页面，以页面无刷新的效果更改页面中的内容 同步交互与异步交互 同步交互：客户端向服务器端发送请求，到服务器端进行相应，这个过程中，用户是不能做其他任何事情（等） 异步交互：客户端...
同步请求和异步请求的区别（个人理解）
liangweihao的博客
12-11 8980
同步请求和异步请求的区别（个人理解）
Ajax(异步请求)和传统(同步请求)区别
weixin_30807677的博客
04-06 442
在服务器端判断request来自Ajax请求(异步)还是传统请求(同步)： 　　两种请求在请求的Header不同，Ajax 异步请求比传统的同步请求多了一个头参数 　　1、传统同步请求参数 　　　 accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8　　　 accept-charset g...
同步请求和异步请求的区别
qq_52022468的博客
09-08 1690
Ajax特点 局部刷新-异步访问 同步: 当用户发起请求时,如果这时服务器正忙,那么用户处于等待的状态,同时不可以做其他的操作. 异步: 当用户发起请求时,如果遇到服务器正忙,这时用户可以继续执行后续的操作.同时通过回调函数与服务器沟通. Ajax异步原理 1).常规同步的调用方式 2).Ajax异步调用 说明: Ajax通过Ajax引擎实现异步的调用.当后台的服务器响应数据之后,通过预先设置好的回调函数进行数据的展现. ...
Ajax 笔记
weixin_42378852的博客
08-09 296
Ajax概述 它是浏览器提供的一套方法，可以实现页面无刷新更新数据，增强用户体验感，比如上拉显示更多内容，搜索框提示文字下拉列表，用户登录离开焦点验证表单等场景均用到了ajax技术 ajax的运行环境：需要运行在网站环境中 ajax的运行原理： ajax相当于浏览器向服务器发送请求和接收响应的代理人，在不影响用户浏览页面的情况下，局部更新页面数据，提高用户体验。 Ajax基本实现步骤 <script> // 实例化ajax对象 var xhr = new XML
AJAX笔记
03-22
**AJAX笔记** 在网页开发中，AJAX（Asynchronous JavaScript and XML）是一种不刷新整个页面的情况下，与服务器交换数据并更新部分网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新，...
ajax笔记ajax笔记ajax笔记
04-03
ajax笔记
黑马程序员Ajax笔记
05-26
在黑马程序员的Ajax笔记中，我们将深入探讨这一技术的各个方面。 ### 1. Ajax基本原理 Ajax的核心是JavaScript对象XMLHttpRequest，它允许浏览器在后台与服务器通信。通过创建XMLHttpRequest对象、打开连接、发送...
Ajax笔记.pdf
01-25
Ajax笔记 Ajax是Asynchronous JavaScript and XML的缩写，是一种基于JavaScript和XML的异步通信技术。它的出现是为了解决传统Web开发中存在的问题，如需要刷新整个页面来获取后台信息，给用户带来不好的体验。Ajax...
AJAX同步请求和异步请求的区别是什么？使用场景
寻找人生的价值
04-23 2260
理解1： AJAX中根据async的值不同分为同步（async = false）和异步（async = true）两种执行方式；在W3C的教程中推荐使用异步执行； 下面来区别一下同步和异步有什么不同： 异步：在异步模式下，当我们使用AJAX发送完请求后，可能还有代码需要执行。这个时候可能由于种种原因导致服务器还没有响应我们的请求，但是因为我们采用了异步执行方式，所有包含AJAX请求代码的函数...
考研复习-英语二真题考试题集-带答案
09-14
英语二考研真题复习资料，带答案版
2024中美独角兽公司发展分析报告.pdf
09-14
全球各大洲独角兽企业分布、中美独角兽企业对比（数量、估值、新增及退榜情况、行业分布、所在城市）、
C++ 中的异步编程模型是什么
09-14
在C++中，异步编程模型是处理并发任务、提高程序性能和响应性的关键技术。以下是C++中实现异步编程的几种主要方式： 每种异步编程模型都有其适用场景和优缺点。选择合适的模型可以提高代码的可读性、可维护性和性能。随着C++标准的不断发展，异步编程模型也在不断进化，为开发者提供了更多的工具和选择。 在实际开发中，应根据具体需求选择合适的异步编程模型。例如，对于简单的异步任务，回调函数可能是最直接的选择；而对于需要结构化错误处理和结果获取的复杂异步任务，std::async和std::future可能更合适；在需要高效资源管理的场景下，线程池是一个不错的选择；而对于需要编写大量异步代码的现代应用程序，协程提供了一种更简洁、更直观的解决方案。 总之，C++中的异步编程模型是多核和高并发环境下提高程序性能的重要工具。通过合理使用这些模型，开发者可以构建出更高效、更可靠的软件系统。
正则表达式Regex是一种文本模式.docx
09-14
正则表达式（Regular Expression，简称Regex或Regexp）是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为"元字符"）。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。正则表达式是强大的文本处理工具，广泛用于搜索、编辑或操作文本和数据。 基本组成 普通字符：大多数字符，包括所有大写和小写字母、所有数字、所有标点符号和一些其他符号，都是普通字符。正则表达式中的普通字符表示它们自身。例如，正则表达式test会匹配字符串"test"。 特殊字符（元字符）：一些字符在正则表达式中具有特殊的意义，如^、$、.、*、+、?、{、}、[、]、|、\等。这些特殊字符用于表示在搜索文本时要匹配的一个或多个字符。例如，.匹配除换行符之外的任何单个字符。 字符类：字符类允许你指定一组字符中的任何一个字符。例如，[abc]匹配"a"、"b"或"c"中的任意一个字符。你也可以使用范围，如[a-z]匹配任何小写字母。 预定义字符类：正则表达式提供了一些预定义字符类，用于匹配常见的字符集合。例如，\d匹配任何数字（等价于[0-9]），\s匹配任
基于struts+sqlserver网络购物系统毕业课程源码设计+论文资料
09-14
编号：150 系统功能： 展示网站最新的商品信息。 展示网站特价的商品信息。 为用户提供修改个人资料和查看在网站操作情况的平台。 提供用户在网站上购物的平台。 展示网站发布的公告信息。 展示商品的销量排行。 展示网站的友情链接信息。 对商品详细信息以及分类信息进行管理。 对用户基本资料、交易制度、消费情况及留言信息进行管理。 对用户提交的订单进行管理。 对管理员信息、网站公告信息、商业资讯信息及友情链接信息进行管理。 系统运行稳定，具有强大的数据处理能力。 操作注意事项 （1）本系统的用户名为：admin，密码为：admin （2）admin管理员的信息不能删除。 （3）用户注册登录后，可进行商品购买、商品信息查看以及订单查询操作。 （4）后台登陆地址：http://localhost:8080/WebShopping/bg-land.jsp。
基于ssm的高校毕业生就业管理系统设计与实现.docx
最新发布
09-14
基于ssm的高校毕业生就业管理系统设计与实现.docx
Ajax笔记：Ajax基础知识和Ajax开发技巧
Ajax笔记 Ajax是一种异步的JavaScript和XML的结合体，可以在不重新加载整个网页的情况下，实现局部更新网页内容。下面是关于Ajax的详细知识点： 一、 Ajax基本概念 Ajax是Asynchronous JavaScript and XML的缩写...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值