JAVA WEB开发技术随堂笔记 Ajax技术

张时贰

已于 2022-05-21 00:15:59 修改

阅读量1.7k

点赞数 1

分类专栏： JAVA WEB开发技术文章标签： web 前端 html javascript

于 2022-04-02 17:56:06 首次发布

本文链接：https://blog.csdn.net/qq_49488584/article/details/123926004

版权

JAVA WEB开发技术专栏收录该内容

19 篇文章 3 订阅

订阅专栏

🌴 2022.3.29 早八

文章目录

前言

🎬本文章是 【JAVA WEB开发技术】 专栏的文章，主要是上课的随堂笔记与练习
🔗JAVA WEB开发技术专栏传送门
💻提示：目录顺序以当堂内容(教材)为准，所以并非“1、2、3”
📽本节主要内容：Ajax技术

3.7 Ajax技术

3.7.1 什么是Ajax

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX 不是新的编程语言，而是一种使用现有标准的新方法
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行
XMLHttpRequest 是 AJAX 的基础。XMLHttpRequest 用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下，对网页的某部分进行更新(例如B站实时弹幕)

3.7.2 Ajax的开发模式

🚀 Web应用的传统模式

JAVA WEB开发技术15

🚀 Web应用的Ajax模式

JAVA WEB开发技术16

图太死板了，简而言之，就比如实时的弹幕，虽然整个网页没有刷新，但可以一直保持弹幕的更新

3.7.3 Ajax的优点

减轻服务器的负担。Ajax的原则是“按需求获取数据”，这可以最大程度地减少冗余请求和响应对服务器造成的负担
可以把一部分以前由服务器负担的工作转移到客户端，利用客户端闲置的资源进行处理，减轻服务器和带宽的负担，节约空间和成本
无刷新更新页面，从而使用户不用再像以前一样在服务器处理数据时，只能在死板的白屏前焦急地等待
可以调用XML等外部数据，进一步促进页面显示和数据的分离
基于标准化的并被广泛支持的技术，不需要下载插件或者小程序

3.8 传统Ajax工作流程

3.8.1 发送请求

通常情况下，Ajax发送请求有两种，一种是GET请求，一种是POST请求

发送请求的4个步骤：

初始化XMLHttpRequest对象
指定回调函数，用于对返回结果的处理
创建一个与服务器的链接
向服务器发送请求

🚀 初始化XMLHttpRequest对象

语法：variable=new XMLHttpRequest();，老版本IE5，IE7用variable=new ActiveXObject("Microsoft.XMLHTTP");

示例：为了兼容浏览器，创建对象前，先判断浏览器执行哪个代码

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

🚁 XMLHttpRequest对象

可在不重新加载整个页面的情况下更新网页中的某部分

方法

方法	描述
abort()	取消当前的请求
getAllResponseHeaders()	返回头信息
getResponseHeader()	返回指定的头信息
open(method,url,async)	规定请求的类型，URL(JSON地址)，请求是否应该进行异步处理，以及请求的其他可选属性
send(string)	发送请求到服务器。string：仅用于 POST 请求
setRequestHeader()	把标签/值对添加到要发送的头文件

属性

属性	描述
onreadystatechange	存储函数（或函数的名称）在每次 readyState 属性变化时被自动调用
readyState	存放了 XMLHttpRequest 的状态。从 0 到 4 变化： 0：请求未初始化 1：服务器建立连接 2：收到的请求 3：处理请求 4：请求完成和响应准备就绪
responseText	返回作为一个字符串的响应数据
responseXML	返回作为 XML 数据响应数据
status	返回状态数（例如 “404” 为 “Not Found” 或 “200” 为 “OK”）
statusText	返回状态文本（如 “Not Found” 或 “OK”）

🚀 指定回调函数，用于对返回结果的处理

通过对 onreadystatechange 事件指定执行的函数来实现

示例：

xmlhttp.onreadystatechange=function(){
    //数据接收完毕且已成功处理了请求
    if(xmlhttp.readystate==4 && xmlhttp.status==200){
        var std=xmlhttp.responseText;
        std = JSON.parse(std);//转为JSON对象
        console.log(std);
        document.getElementBtId("myDIv").innerHTML+="姓名:"+std.name+"					<br>"+"性别:"+std.sex+"<br>"+"出生日期:"+std.birthday+"<br>"
    }
}

🚀 创建一个与服务器的链接

创建到服务器的连接，使用 XMLHttpRequest 对象的 open() 方法

示例：

xmlhttp.open("GET","ajax_info.json",true);

为了避免可能得到的是缓存的结果，可向 URL 添加一个唯一的 ID：

xmlhttp.open("GET","demo_get.php?t=" + Math.random(),true);

🚀 创建一个与服务器的链接

通过使用 XMLHttpRequest 对象的 send() 方法。若为POST方式，可以在send方法中增加参数

示例：

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
xmlhttp.send("fname=Henry&lname=Ford");

Q：POST与GET有什么区别？
A：与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
并且POST 请求：可以向服务器发送大量数据（POST 没有数据量限制），发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

点击按钮，通过Ajax加载数据

JAVA WEB开发技术18

new_file.json

{
	"name": "张时贰",
	"sex": "男",
	"birthday": "2001.01.01"
}

std.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function loadMsg() {
                var xmlhttp;
                if (window.XMLHttpRequest) {
                    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                    xmlhttp = new XMLHttpRequest();
                } else {
                    // IE6, IE5 浏览器执行代码
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function() {
                    //数据接收完毕且已成功处理了请求
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 						{
                        var std = xmlhttp.responseText;
                        std = JSON.parse(std); //转为JSON对象
                        console.log(std);
                        document.getElementById("myDiv").innerHTML += "姓名:" + std.name + "<br>" + "性别:" + std.sex + "<br>" +
                            "出生日期:" + std.birthday + "<br>";
                    }
                }
                xmlhttp.open("GET", "new_file.json", true);
                xmlhttp.send();
            }
        </script>
    </head>
    <body>
        <button type="button" onclick="loadMsg()">点击加载信息</button>
        <div id="myDiv">
            <h2>学生信息</h2>
        </div>
    </body>
</html>

3.8.2 处理服务器响应

当向服务器发送请求以后，服务器会返回响应结果，获得服务器的响应可以通过responseText属性和responseXML属性

🚀 处理字符串响应

responseText属性返回一个字符串的响应数据

🚀 处理XML响应

responseXML属性返回一个XML的响应数据

张时贰

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JAVA WEB开发技术随堂笔记 Ajax技术

🌴 2022.3.29 早八文章目录3.7 Ajax技术3.7.1 什么是Ajax3.7.2 Ajax的开发模式3.7.3 Ajax的优点3.8 传统Ajax工作流程3.8.1 发送请求3.8.2 处理服务器响应3.7 Ajax技术3.7.1 什么是AjaxAJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）AJAX 不是新的编程语言，而是一种使用现有标准的新方法AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务
复制链接

扫一扫