AJAX

最新推荐文章于 2024-06-19 11:25:09 发布

QI_X

最新推荐文章于 2024-06-19 11:25:09 发布

阅读量540

点赞数 2

文章标签： ajax java js

本文链接：https://blog.csdn.net/qq_44155822/article/details/113694024

版权

AJAX

1. 全局刷新和局部刷新

全局刷新：整个浏览器被新的数据覆盖。在网络中传输大量的数据。浏览器需要加载，渲染页面。

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

发起请求 request 阶段：

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

在这里插入图片描述

服务器端应答结果阶段：

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

在这里插入图片描述

全局刷新原理:

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

局部刷新：在浏览器器的内部，发起请求，获取数据，改变页面中的部分内容。其余的页面无需加载和渲染。网络中数据传输量少，给用户的感受好。AJAX是实现局部刷新的一种技术。

在这里插入图片描述

局部刷新原理:

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

ajax是用来做局部刷新的。局部刷新使用的核心对象是 `异步对象（XMLHttpRequest）`这个异步对象是存在浏览器内存中的，使用javascript语法创建和使用XMLHttpRequest对象。

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

Asynchronous: 异步的意思

JavaScript：javascript脚本，在浏览器中执行，负责创建异步对象，发送请求，更新页面的dom对象。 ajax请求需要服务器端的数据。

and : 和

ml : 是一种网络中的传输的数据格式。 json替换了xml 。

ajax是一种做局部刷新的新方法，不是一种语言。 ajax包含的技术主要有javascript,dom,css, xml等等。核心是javascript 和 xml 。

AJAX 不单需要前端的技术，同时需要后端（服务器）的配合。服务器需要提供数据，数据是 AJAX 请求的响应结果。

  <数据>
      <数据1>宝马1</数据1>
	  <数据2>宝马2</数据2>
	  <数据3>宝马3</数据3>
	  <数据4>宝马4</数据4>
      </数据>

3.ajax中使用XMLHttpRequest对象

(1)创建异步对象

var xmlHttp = new XMLHttpRequest();

(2)给异步对象绑定事件

onreadystatechange事件：
当异步对象发起请求，获取了数据都会触发这个事件。这个事件需要指定一个函数，在函数中处理状态的变化。
当请求被发送到服务器时，我们需要执行一些基于响应的任务。**每当 readyState 改变时，就会触发 onreadystatechange 事件。**事件可以指定一个处理函数 function。通过判断 XMLHttpReqeust 对象的状态，获取服务端返回的数据。

  btn.onclick = fun1()
  function fun1(){
   alert("按钮单击");
  }

  //语法：
      xmlHttp.onreadystatechange= function(){
         //处理请求的状态变化。
      	 if(xmlHttp.readyState == 4 && xmlHttp.status== 200 ){
             //可以处理服务器端的数据，更新当前页面
      		  var data = xmlHttp.responseText;
      		  document.getElementById("name").value= data;
      	 }
      }

属性说明： onreadystatechange 属性：一个 js 函数名或直接定义函数，每当 readyState 属性改变时，就会调用该函数

异步对象的属性 readyState 表示异步对象请求的状态变化

0：创建异步对象时， new XMLHttpRequest();
1: 初始异步请求对象， xmlHttp.open()
2：发送请求， xmlHttp.send()
3: 从服务器端获取了数据，此时3，注意3是异步对象内部使用，获取了原始的数据。
4：异步对象把接收的数据处理完成后。此时开发人员在4的时候处理数据。在4的时候，开发人员做什么？更新当前页面。

异步对象的status属性，表示网络请求的状况的， 200， 404， 500，需要是当status==200时，表示网络请求是成功的。

(3)初始异步请求对象

异步的方法open((method,url,async)

xmlHttp.open(method：请求的类型；GET 或 POST , url：服务器的 servlet 地址 , async：true（异步）或 false（同步）)

//例如：
xmlHttp.open("get", "loginServlet?name=zs&pwd=123",true);

访问地址：使用get方式传递参数

http://localhost:8080/course_myajax/bmiPrint?name=李四&w=82&h=1.8

(4)使用异步对象发送请求

例如：xmlHttp.send()
(5)获取服务器端返回的数据，使用异步对象的属性

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

例如：xmlHttp.responseText

回调：当请求的状态变化时，异步对象会自动调用onreadystatechange事件对应的函数。

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

BMI 指数（即身体质量指数，英文为 BodyMassIndex，简称 BMI），是用体重公斤数除以身高米数平方得出的数字，是目前国际上常用的衡量人体胖瘦程度以及是否健康的一个标准成人的 BMI 数值：

1）过轻：低于 18.5

2）正常：18.5-23.9

3）过重：24-27

4）肥胖：28-32

5）非常肥胖,高于 32

复习之前的全局刷新:

在这里插入图片描述

方法1:

<!--web.xml-->
<servlet>
    <servlet-name>BmiServlet</servlet-name>
    <servlet-class>qi.controller.BmiServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>BmiServlet</servlet-name>
    <url-pattern>/bmiServlet</url-pattern>
</servlet-mapping>

//Bmiservlet
package qi.controller;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class BmiServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //接受请求参数
        String strName = request.getParameter("name");
        String strWeight = request.getParameter("weight");
        String strHeight = request.getParameter("height");

        //计算 bmi：bmi=体重/（身高*身高）
        float weight = Float.valueOf(strWeight);
        float height = Float.valueOf(strHeight);
        float bmi = weight / (height * height);

        //判断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 = "非常肥胖";
        }
        System.out.println("msg="+msg);
        msg = strName + "你的 bmi 是" + bmi + "," + msg;

        //把数据存入到request，并输出
        request.setAttribute("msg",msg);

        //转发到新的页面
        request.getRequestDispatcher("/result.jsp").forward(request, response);
    }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>结果页面</title>
</head>
<body>
    <p>
        显示bmi计算结果
    </p>
    <h3>${msg}</h3>
</body>
</html>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>结果页面</title>
</head>
<body>
    <p>
        显示bmi计算结果
    </p>
    <h3>${msg}</h3>
</body>
</html>

方法二：使用HttpServletResponse

    <!--使用HttpServletResponse输出数据-->
    <servlet>
        <servlet-name>Bmi2Servlet</servlet-name>
        <servlet-class>qi.controller.Bmi2Servlet</servlet-class>    
    </servlet>
    <servlet-mapping>
        <servlet-name>Bmi2Servlet</servlet-name>
        <url-pattern>/bmi2Servlet</url-pattern>
    </servlet-mapping>
</web-app>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>全局刷新</title>
</head>
<body>
<p>全局刷新计算bmi</p>
<form action="bmi2Servlet" method="get">
    姓名：<input type="text" name="name"><br>
    体重（公斤）：<input type="text " name="weight"><br>
    身高（米）：<input type="text" name="height"><br>
    <input type="submit" value="提交">
</form>
</body>
</html>

package qi.controller;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

public class Bmi2Servlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //接受请求参数
        String strName = request.getParameter("name");
        String strWeight = request.getParameter("weight");
        String strHeight = request.getParameter("height");

        //计算 bmi：bmi=体重/（身高*身高）
        float weight = Float.valueOf(strWeight);
        float height = Float.valueOf(strHeight);
        float bmi = weight / (height * height);

        //判断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 = "非常肥胖";
        }
        System.out.println("msg="+msg);
        msg = strName + "你的 bmi 是" + bmi + "," + msg;

        //使用HttpServletResponse输出数据(从这里开始)
        response.setContentType("text/html;charset=utf-8");
        //获取PrintWriter
        PrintWriter pw = response.getWriter();
        //输出数据
        pw.println();
        //清空缓存
        pw.flush();
        //关闭
        pw.close();
    }
}

使用AJAX方式：

在这里插入图片描述

<servlet>
    <servlet-name>BmiAjaxServlet</servlet-name>
    <servlet-class>qiqi.controller.BmiAjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>BmiAjaxServlet</servlet-name>
    <url-pattern>/bmiAjax</url-pattern>
</servlet-mapping>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>局部刷新-ajax</title>
    <script type="text/javascript">
      //使用内存中的异步对象，代替浏览器发送请求
       /* 
       使用ajax的局部刷新
			1.新建jsp，使用XMLHttpRequest异步对象。
                使用异步对象有四个步骤:
                    1.创建
                    2.绑定事件
                    3.初始请求
                    4.发送请求。

			2.创建服务器的servlet，接收并处理数据，把数据输出给异步对象。
		*/

     function doAjax() {
       //1.创建异步对象
       var xmlHttp = new XMLHttpRequest();
       //2.绑定事件
       xmlHttp.onreadystatechange = function () {
         //处理服务器端返回的数据
         //alert("readyState属性值:"+xmlHttp.readyState+"|status:"+xmlHttp.status);
         if (xmlHttp.readyState==4 && xmlHttp.status ==200){
           //alert(xmlHttp.response);
           var data =xmlHttp.responseText;
           //更新dom对象，更新页面数据
           document.getElementById("mydata").innerText = data;
         }
       }

       //3.初始化请求数据
       var name = document.getElementById("name").value;
       var weight = document.getElementById("weight").value;
       var height = document.getElementById("height").value;

       //bmi2Servlet?name=张三&weight=66&height=175
       var param ="name="+name+"&weight="+weight+"&height="+height;
       alert("param="+param);
       xmlHttp.open("get","bmiAjax?"+param,true);


       //4.发起请求
       xmlHttp.send();

     }
    </script>
  </head>
  <body>
  <p>局部刷新ajax-计算bmi</p>
  <div>
    <!--没有使用form，用不用form都行，把name换成了id，还有单击事件-->
    姓名：<input type="text" id="name"><br>
    体重（公斤）：<input type="text " id="weight"><br>
    身高（米）：<input type="text" id="height"><br>
    <input type="button" value="计算bmi" οnclick="doAjax()">

    <br/><br/><br/>
    <div id="mydata">等待加载数据....</div>
  </div>
  </body>
</html>

package qiqi.controller;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

public class BmiAjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        System.out.println("接受了ajax的请求");
        //接受请求参数
        String strName = request.getParameter("name");
        String strWeight = request.getParameter("weight");
        String strHeight = request.getParameter("height");

        //计算 bmi：bmi=体重/（身高*身高）
        float weight = Float.valueOf(strWeight);
        float height = Float.valueOf(strHeight);
        float bmi = weight / (height * height);

        //判断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 = "非常肥胖";
        }
        System.out.println("msg="+msg);
        msg = strName + "你的 bmi 是" + bmi + "," + msg;

        //响应ajax需要的数据，使用HttpServletResponse输出数据
        response.setContentType("text/html;charset=utf-8");
        PrintWriter pw = response.getWriter();
        pw.println(msg);
        pw.flush();
        pw.close();
    }
}

4.json使用

ajax发起请求------- `servlet（返回的一个json格式的字符串 { name:"河北",jiancheng:"冀","shenghui":"石家庄"}）`

json分类：

json对象，JSONObject ,这种对象的格式名称:值，也可以看做是key:value 格式。
json数组， JSONArray, 基本格式 [{ name:"河北",jiancheng:"冀","shenghui":"石家庄"} , { name:"山西",jiancheng:"晋","shenghui":"太原"} ]

为什么要使用json ：

json格式好理解
json格式数据在多种语言中，比较容易处理。使用java， javascript读写json格式的数据比较容易。
json格式数据他占用的空间下，在网络中传输快，用户的体验好。

处理json的工具库：

gson（google）； fastjson（阿里），jackson， json-lib

在js中的，可以把json格式的字符串，转为json对象， json中的key，就是json对象的属姓名。

QI_X

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
AJAX

AJAX1. 全局刷新和局部刷新全局刷新：整个浏览器被新的数据覆盖。在网络中传输大量的数据。浏览器需要加载，渲染页面。登录请求处理： index.jsp 发起登录请求--------LoginServlet--------result.jsp 发起请求 request 阶段：浏览器现在内存中是 index 页面的内容和数据：服务器端应答结果阶段： sevlet 返回后把数据全部覆盖掉原来 index 页面内容， result.jsp 覆盖了全部的浏览器内存
复制链接

扫一扫