AJAX基本概念学习

深藏阁楼爱情的钟 2022-11-29 13:07 132阅读 0赞

**目录**

全局刷新

局部刷新

AJAX概念

AJAX 异步实现分析

原生JS方式实现Ajax

--------------------

### 全局刷新  ###

简单说就是**数据全部覆盖掉原来 index 页面内容**， 整个**浏览器数据全部被刷新**。重新在浏览器窗口显示数据，样式，标签等

就比如简单的登录   **index.jsp 发起登录请**求--------**LoginServlet**\--------**result.jsp **

### 局部刷新  ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70][]

###  AJAX概念 ###

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

**AJAX是一种在无需重新加载整个网页的情况下，能够更新部分页面内容的新方法 **

AJAX 不是新的编程语言，而是使用现有技术混合使用的一种新方法

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

**同步和异步的区别图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70 1][]

**XMLHttpRequest 对象能够：**

1、在不重新加载页面的情况下更新网页

2、在页面已加载后向服务器请求数据

3、在页面已加载后从服务器接收数据

### AJAX异步实现分析 ###

**1、创建对象方式** ：

var xmlHttp = new XMLHttpRequest();

**2、建立连接    open(method,url,async) **

**         **xmlhttp.open("get","bmiAjax?name=ycy&weight=58&height=1.75",true);

**参数解析：**

**            ** 1、method： 请求方式，get | post

get方式：请求参数在url中拼接，send（）为空参

post方式：请求参数在send()方法中定义

2、url： 请求的url

3、同步或者异步请求，**true（异步）false（同步）**

**3、发起请求 xmlHttp.send(String) :将请求发送到服务器 String ：仅限于Post方式**

**4、接收并处理来自服务器的响应的结果**

**       **  获取的方式：xmlHttp.responseText

什么时候获取？**当服务器响应成功在获取的**

**onreadstatechange 事件 ：**

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

XMLHttpRequest 的状态 从 0 到 4 发生变化。

0：请求未初始化，创建异步请求对象  var xmlHttp = new XMLHttpRequest()

1: 初始化异步请求对象， xmlHttp.open(请求方式，请求地址，true)

2: 异步对象发送请求， xmlHttp.send()

3: 异步对象接收应答数据 从服务端返回数据。XMLHttpRequest 内部处理。

4: 异步请求对象已经将数据解析完毕。  此时才可以读取数据。

status 属性：

200: "OK"

404: 未找到页面

### 原生JS方式实现Ajax ###

**html页面**

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
      <head>
        <title>Title</title>
          <script>
              function doAjax(){
                  //1、创建异步核心对象
                  var xmlhttp;
                  // code for IE7+, Firefox, Chrome, Opera, Safari
                  if(window.XMLHttpRequest){
                      xmlhttp=new XMLHttpRequest();
                  }
                  // code for IE6, IE5
                  else {
                      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                  }
                  //2、建立连接
                  xmlhttp.open("get","bmiAjax?name=ycy&weight=58&height=1.75",true);
                  //3、发起请求
                  xmlhttp.send();
                  //4、接收并处理来自服务器的响应的结果
                  //获取的方式：xmlHttp.responseText
                  //什么时候获取？当服务器响应成功在获取的
                  //当xmlHttp对象的就绪状态发生改变时，这个事件onreadystatechange就会触发
                  xmlhttp.onreadystatechange = function () {
                      //判断就绪状态readyState是否为4，判断Status响应状态码为200
                      if(xmlhttp.readyState==4 && xmlhttp.status==200){
                          //获取服务器响应的结果
                          var responseText = xmlhttp.responseText;
                          alert(responseText);
                      }
                  }
              }
          </script>
      </head>
      <body>
        姓名: <input type="text"id="name" name="name"/><br/>
        体重（kg）<input type="text" id="weight" name="weight"/><br/>
        身高(米)<input type="text" id="height" name="height"/><br/>
        <input type="button" value="计算BMI"onclick="doAjax()">
      </body>
    </html>

**servlet**

package cn.com.Ycy.Ajav;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    @WebServlet("/bmiAjax")
    public class AjaxServlet extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            resp.setCharacterEncoding("utf-8");
            String name = req.getParameter("name");
            String weight = req.getParameter("weight");
            String height = req.getParameter("height");
            float w = Float.parseFloat(weight);
            float h = Float.parseFloat(height);
            float bmi = w / (h * h);
            String msg = "";
            if (bmi < 18.5) {
                msg = "您比较廋";
            } else if (bmi > 18.5 && bmi <= 23.9) {
                msg = "您的bmi是正常的";
            } else if (bmi <= 27 && bmi > 23.9) {
                msg = "您比较胖";
            }
            System.out.println(msg);
            System.out.println("sbsb");
            resp.getWriter().write(msg);
        }
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
           super.doPost(req,resp);
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70]: /images/20221124/1ab8f30b28d248d88474e5cc60d28ceb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70 1]: /images/20221124/fe013fbce6ed40e5a8c9cc4dbe6dbeab.png