AJAX学习笔记

最新推荐文章于 2023-03-29 10:58:05 发布

芙如东海

最新推荐文章于 2023-03-29 10:58:05 发布

阅读量72

点赞数

分类专栏：前端学习文章标签： ajax 学习 javascript

本文链接：https://blog.csdn.net/qq_52166656/article/details/125720608

版权

前端学习专栏收录该内容

19 篇文章 0 订阅

订阅专栏

AJAX学习笔记

文章目录

AJAX学习笔记

B/S 结构项目中，浏览器（Browse）负责把用户的请求和参数通过网络发送给服务器（Server）,服务端使用 Servlet（多种服务端技术的一种）接收请求，并将处理结果返回给浏览器。

AJAX 实现局部刷新的一种技术。

1.0全局刷新和局部刷新

1.0.1全局刷新

登录请求处理：
index.jsp 发起登录请求--------LoginServlet--------result.jsp

1.0.1.0发起请求 request 阶段：

浏览器现在内存中是 index 页面的内容和数据：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cuSZsFat-1657520350285)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220711080702018.png)]$

1.0.1.0服务器端应答结果阶段：

sevlet 返回后把数据全部覆盖掉原来 index 页面内容， result.jsp 覆盖了全部的浏览器内存数据。整个浏览器数据全部被刷新。重新在浏览器窗口显示数据，样式，标签等。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aleZjFMS-1657520350288)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220711080802154.png)]$

1.0.1.1全局刷新原理:

1) 必须由浏览器亲自向服务端发送请求协议包。
2) 这个行为导致服务端直接将【响应包】发送到浏览器内存中
3) 这个行为导致浏览器内存中原有内容被覆盖掉
4) 这个行为导致浏览器在展示数据时候，只有响应数据可以展示

1.0.2局部刷新

浏览器在展示数据时，此时在窗口既可以看到本次的响应数据，同时又可以看到浏览器内存中原有数据.

1.0.3局部刷新原理:

1) 不能由浏览器发送请求给服务端
2) 浏览器委托浏览器内存中一个脚本对象代替浏览器发送请求.
3) 这个行为导致导致服务端直接将【响应包】发送脚本对象内存中
4) 这个行为导致脚本对象内容被覆盖掉，但是此时浏览器内存中绝大部分内容没有收
到任何影响.
5) 这个行为导致浏览器在展示数据时候,同时展示原有数据和响应数据

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M4PqI7PM-1657520350289)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220711081124753.png)]$

1.1异步对象

在局部刷新，需要创建一个对象，代替浏览器发起请求的行为，这个对象存在内存中。代替浏览器发起请求并接收响应数据。这个对象叫做异步请求对象。

XMLHttpRequest 对象能够：

在不重新加载页面的情况下更新网页
在页面已加载后向服务器请求数据
在页面已加载后从服务器接收数据

AJAX 中的核心对象就是 XMLHttpRequest

1.2什么是 AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是使用现有技术混合使用的一种新方法。ajax 中使用的技术有
JavaScript, html , dom , xml ,css 等。主要是 JavaScript , XML.

JavaScript: 使用脚本对象 XMLHttpRequest 发送请求，接收响应数据
XML: 发送和接收的数据格式，现在使用 json
AJAX 不单需要前端的技术，同时需要后端（服务器）的配合。服务器需要提供数据，数据
是 AJAX 请求的响应结果。

1.3AJAX 异步实现步骤

1.3.1创建创建对象方式

var xmlHttp = new XMLHttpRequest();

1.3.2onreadstatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。此事件可以指定一个处理函数 function。

通过判断 XMLHttpReqeust 对象的状态，获取服务端返回的数据。

xmlHttp.onreadystatechange= function() {
if( xmlHttp.readyState == 4 && xmlHttp.status == 200){
处理服务器返回数据
}
}

下面是 XMLHttpRequest 对象的三个重要的属性：
属性说明：
onreadystatechange 属性：一个 js 函数名或直接定义函数，每当 readyState 属性
改变时，就会调用该函数
readyState 属性：
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
• 0: 请求未初始化，创建异步请求对象 var xmlHttp = new XMLHttpRequest()
• 1: 初始化异步请求对象， xmlHttp.open(请求方式，请求地址，true)
• 2: 异步对象发送请求， xmlHttp.send()
• 3: 异步对象接收应答数据从服务端返回数据。XMLHttpRequest 内部处理。
• 4: 异步请求对象已经将数据解析完毕。此时才可以读取数据。
status 属性：
200: “OK”
404: 未找到页面

1.3.3初始化请求参数

方法：
open(method,url,async) ：初始化异步请求对象
参数说明：
• method：请求的类型；GET 或 POST
• url：服务器的 servlet 地址
• async：true（异步）或 false（同步）
例如:

xmlHttp.open(“get”,”http:192.168.1.20:8080/myweb/query”,true)

1.3.4发送请求

xmlHttp.send()

1.3.5接收服务器响应的数据

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或
responseXML 属性。

responseText：获得字符串形式的响应数据
responseXML：获得 XML 形式的响应数据

1.4AJAX 实例

需求：计算某个用户的 BMI。用户在 jsp 输入自己的身高，体重；servlet 中计算 BMI，并显
示 BMI 的计算结果和建议。

servlet端

public class BMIServletAjax extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String strName = req.getParameter("name");
        String strWeight = req.getParameter("weight");
        String strHeight = req.getParameter("height");
// 计算 bmi
        float weight = Float.parseFloat(strWeight);
        float height = Float.parseFloat(strHeight);
        float bmi = weight / (height * height);
        System.out.println(String.format("%s 的bmi%s",strName,bmi));
        String msg = "";
        if( bmi < 18.5 ){
            msg = " 过瘦";
        } else if( bmi >= 18.5 && bmi < 23.9 ){
            msg = " 正常";
        } else if( bmi >=23.9 && bmi <= 27){
            msg = " 过重";
        } else if(bmi > 27 && bmi < 32 ){

            msg = " 肥胖";
        } else {
            msg=" 非常肥胖";
        }
        String res = strName + " 你的 bmi 是"+bmi+","+msg;
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter pw = resp.getWriter();
        pw.println(res);
        pw.flush();
        pw.close();
    }
}

index.jsp

<html>
<head>
    <title>我的第一个ajax程序</title>

</head>

<body>

<div style="margin-left: 500PX"></div>
姓名：<input type="text" name="name"><br>
身高：<input type="text" name="height"><br>
体重：<input type="text" name="weight"><br>
<br>
<input type="button" value="计算 bmi" onclick="doAjax()"><br>
<div id="dataDiv" >等待数据更新......</div>

<script type="text/javascript">
    window.onload=function () {
        function doAjax() {

            //创建异步对象
            var xmlHttp = new XMLHttpRequest();
            //绑定事件
            xmlHttp.onreadystatechange = function () {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 400) {
                    var data = xmlHttp.responseText;
                    document.getElementById("dataDiv").innerText = data;
                }
            }
            var name = document.getElementById("name").value;
            var height = document.getElementById("height").value;
            var weight = document.getElementById("weight").value;
            var param = "name=" + name + "&height=" + height + "&weight=" + weight;
            xmlHttp.open("get", "bmiAjax?" + param, true);
            // 发送 ajax 异步请求
            xmlHttp.send();
        }
    }

</script>
</body>
</html>

xml

    <servlet>
        <servlet-name>bmiServletAjax</servlet-name>
        <servlet-class>com.bbgu.edu.BMIServletAjax</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>bmiServletAjax</servlet-name>
        <url-pattern>/bmiAjax</url-pattern>
    </servlet-mapping>

    <servlet-class>com.bbgu.edu.BMIServletAjax</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>bmiServletAjax</servlet-name>
    <url-pattern>/bmiAjax</url-pattern>
</servlet-mapping>