• AJAX and Javaweb

    AJAX and Javaweb

    https协议

    —— 保证数据安全

    概念

    http协议（超文本传输协议）：是客户端浏览器或其他程序与web服务器之间的应用层通信协议。

    https协议：可以理解为HTTP+SSL/TLS，即HTTP下加入SSL层，hppts的安全基础是SSL，因此加密的详细内容就需要SSL，用于安全的HTTP数据传输。

    img

    扩展：SSL/TLS

    SSL——安全套接层，主要任务就是提供私密性，信息完整性和身份认证

    不依赖于平台和运用程序的协议，位于TCP/IP协议与各种应用层协议之间，为数据通信提高安全支持

    TLS——安全传输层协议，用于在两个通信应用程序之间提供保密性和数据完整性。

    在这里插入图片描述
    在这里插入图片描述

    AJAX

    在这里插入图片描述

    属性介绍

    1、创建异步对象，使用js语法

    	var xhr = new XMLHttpRequest();

    • 1

    2、XMLHttpRequest方法

    ① open（请求方法，服务器的访问地址，异步还是同步）

    例如：

    	xhr.open("get","loginServlet",true);

    • 1

    ② send()：使用异步对象发送请求

    3 、XMLHttpRequest属性

    onreadystatechange

    ​ 属性：存储函数，每当readyState属性改变时，就会调用该函数

    ​ 在onreadystatechange中，我们规定当服务器响应已做好被处理的准备时所执行的任务

    XMLHttpRequest.onreadystatechange = callback;  //当 readyState的值变化时，callback函数就会被调用

    • 1

    readyState

    ​ 属性：请求状态，

    • 0：表示创建异步对象时，new XMLHttpRequest();

    • 1：表示初始异步对象的请求参数。执行open（）方法

    • 2：使用send（）方法发送请求

    • 3：使用异步对象从服务器接收了数据

    • 4：异步对象接收了数据，并在异步对象内处理完成后

    status

    ​ 属性：网络的状态，和http的状态码对应

    • 200：请求成功
    • 404：服务器资源没有找到
    • 500：服务器内部代码有错误

    responseText

    ​ 属性：表示服务器端返回的数据

    	var data = xhr.responseText;

    • 1
    创建步骤

    1）使用js创建异步对象

    	var xhr = new XMLRequest();

    • 1

    2）给异步对象绑定事件，事件名称onreadystatechange

    例如button增加单击事件 onclick

    xhr绑定事件

    	xhr.onreadystatechange = function(){}

    • 1
    	<input type="button" onclick="btnClick()"/>
	<script type="text/javascript">
		function btnClick(){
		
		}
	script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    在绑定事件中做什么，根据readyState值做请求的处理

    	xhr.readystatechange = function(){
		if(xhr.readyState==4 && xhr.status==200){
			从服务器获取了数据，更新当前页面的dom对象，完成请求的处理
			var data = xhr.responseText;
			更新dom对象
			document.getElementById("#mydiv").innertHTML = data;
		}
	}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    1. 初始请求的参数，执行open()函数
    	xhr.open("get","loginServlet",true)

    • 1

    open()方法中的url参数可以是一个JSP页面的URL地址，也可以是Servlet的映射地址。也就是，请求处理页可以是一个JSP页面，也可以是一个Servlet。

    1. 发送请求，执行send()

    请求是get()时，参数可以设置为null

    	xhr.send()

    • 1

    请求是post()时，可以提过该参数指定要发送的请求参数

    	var param = "user=" + forml.user.value + "&pwd="+forml.question.value + "&email=" + formal.email.value; 
	http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	http_request.send(param);

    • 1
    • 2
    • 3
    处理服务器响应

    向服务器发送请求时，已经通过XMLHttpRequest对象的onreadystatechange属性指定一个回调函数，用于处理服务器响应。

    在回调函数中：
{
	if(readState)//判断服务器的请求状态，保证请求已经完成
	{
		if(Status)//根据服务器的HTTP状态码，判断服务器请求的响应是否成功
		{
			alert("winning!");
            
            //成功，获取服务器的响应反馈给客户
			responseText/*返回字符串响应*/
            responseXML/*返回XML响应*/
		}
	}
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    1. 处理字符串响应

      //1，字符串响应结构显示在提示对话框中
function getResult(){
	if(http_request.readyState == 4){
		if(http_request.status == 200){
			alert(http_request.responseText);
		}else{
			alert("请求页面有错误！");
		}
	}
}

//2,显示到页面上指定的地方，先在页面上合适位置添加一个
      或标记，设置该标记的ID
<div id="div_result"> </div>
function getResult(){
	if(http_request.readyState == 4){
		if(http_request.status == 200){
			document.getElementById("div_result").innerHTML = http_request.responseText;
		}else{
			alert("请求页面有错误！");
		}
	}
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22

    2. 处理XML响应

      处理需要生成比较复杂的响应，生成XML文档，在回调函数中遍历保存留言信息的XML文档，并显示在页面上。

      DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Ajax获取XML信息title>
    <link href="t1.xml" />
    <script>
        // C:\Users\vincn\AppData\Local\Google\Chrome\Application>chrome.exe --disable-web-security --user-data-dir=C:\MyChromeUserFata
        function f1() {
            // 创建Ajax对象
            var obj = new XMLHttpRequest();
            // 感知Ajax状态

            obj.onreadystatechange = function() {
                if (obj.readyState == 4 && obj.status == 200) {
                    // 获取XMLDocument对象
                    var xmlobj = obj.responseXML;
                    // 获取xml对象的第一个元素结点students
                    var students = xmlobj.childNodes[0];
                    // 获取元素结点students下所有的student的结点
                    var student = students.getElementsByTagName('student');
                    // 遍历student结点,并获得具体信息
                    var info = "";
                    for (var i = 0; i < student.length; i++) {
                        var name = student[i].getElementsByTagName('name')[0].firstChild.nodeValue;
                        var addr = student[i].getElementsByTagName('addr')[0].firstChild.nodeValue;
                        var age = student[i].getElementsByTagName('age')[0].firstChild.nodeValue;
                        // 拼接输出信息字符串
                        info += "姓名：" + name + "，地址：" + addr + "，年龄：" + age + "
      "      ;
                    }
                    // 将字符串写入到id名称为result的div字符串中
                    document.getElementById('result').innerHTML = info;
                }
            }

            // 创建一个http请求，并设置“请求地址”
            obj.open("get", "t1.xml");
            //发送请求
            obj.send();
        }
          script>
head>

<body>
    <h2>Ajax获取XML信息h2>
    <div id="result">div>
    <input type="button" onclick="f1();" value="触发" />
body>

html>


      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
      • 48
      • 49
      • 50
      • 51
      • 52

      XML文档如下：

      
<students>
    <student>
        <name>wendyname>
        <age>35age>
        <addr>Santa Feaddr>
    student>
    <student>
        <name>Yaphetname>
        <age>32age>
        <addr>Balchikaddr>
    student>
    <student>
        <name>Isaiahname>
        <age>35age>
        <addr>Calderaaddr>
    student>
students>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18

      结果：

    在这里插入图片描述

  • 相关阅读:
    版本特性 | Cloudpods v3.9重点功能介绍
    HTML学习（标签）
    关于安卓jsbridge的使用
    获取ArcGISPro中conda信息详情
    Producer
    解锁数据资产的无限潜能：深入探索创新的数据分析技术，挖掘其在实际应用场景中的广阔价值，助力企业发掘数据背后的深层信息，实现业务的持续增长与创新
    2024年HarmonyOS鸿蒙最全恶补这份“阿里面试宝典”，秀出天际！_阿里巴巴面试宝典(1)，2024年最新金三银四HarmonyOS鸿蒙面试的一些感受
    python 如何自动读取含“xx”关键字的excel文件，并返回一个DataFrame
    分布式事务解决方案-Seate描述
    Java-数组和方法(day6-7)
  • 原文地址：https://blog.csdn.net/VinciB/article/details/126732666