Ajax我真的理解了...

皮皮怪鼠

已于 2022-05-21 17:19:05 修改

阅读量669

点赞数 3

分类专栏： js 文章标签： ajax javascript 服务器

于 2021-12-21 16:23:22 首次发布

本文链接：https://blog.csdn.net/qq_46509219/article/details/122066322

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Ajax…

1.全局刷新和局部刷新

全局刷新。整个浏览器被新数据覆盖，浏览器需加载，重新刷新渲染页面
局部刷新。在浏览器的内部交互发起请求，改变页面部分数据

异步对象实现ajax局部刷新。

ajax局部刷新的核心对象是异步对象——XMLHttpRequest

XMLHttpRequest对象存在浏览器内存中，使用js语法创建和使用XMLHttpRequest对象：

var xmlhttp = new XMLHttpRequest();

XMLHttpRequest对象能够：

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

2.ajax概念

2.1概念

全称Asynchoronous Javascript and XML，叫异步的Javascript和XML；

Asynchoronous 异步的意思

Javascript 脚本，在浏览器里面执行的

XML被用来传输和存储数据的，一种数据格式

异步相对于同步来说。同步是一件事一件事执行，只有前一个任务完成，才能执行后一个任务，异步可以setTimeout执行任务。

2.2是什么

ajax是一种局部刷新的新方法，不是一种语言，它是利用现有的技术完成局部刷新的技术。

ajax包含的技术有javascript，dom，css，xml，核心是javascript和xml

javascript 负责创建异步对象，发送请求，更新dom对象和数据。(ps:数据从服务器端获取)

xml 是网络传输的数据格式，现在使用json替代xml

2.3怎么用

问1：怎么使用ajax的XMLHttpRequest对象？/ ajax的异步实现步骤

步骤：1。2。3。4。

1。创建对象

var xmlHttp = new XMLHttpRequest();

2。给创建的对象绑定事件

onreadystatechange()事件，当异步对象被创建后，发起请求，获取数据时会触发这个事件，这个事件需指定一个函数，在函数里异步对象请求处理状态的变化；

xmlHttp.onreadystatechange = function(){
	//处理请求的状态变化
}

readyState属性存有XMLHttpRequest状态，从0-4发生变化

0：请求未初始化，var xmlHttp = new XMLHttpRequest();

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

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

3：异步对象接收应答数据，xmlHttpRequest内部处理

4：异步对象已将数据解析完毕，这时才能读取数据，更新页面的数据信息

status属性表示网络请求的状况，2xx，4xx，5xx

200：网络请求成功

400：错误请求

404：网页没有找到

500：服务器内部错误

3。初始异步请求对象

代码：xmlHttp.open('请求方式','服务器端访问地址','是否异步请求')

xmlHttp.open('post','loginServlet?name=zhangsan&pwd=123',true)

4。异步对象发送请求

xmlHttp.send()

问2：如何获取服务器端返回的数据？

使用异步对象的属性responseText，xmlHttp.responseText

xmlHttp.onreadystatechange = function(){
	//处理请求的状态变化
    var data = xmlHttp.responseText;
    document.getElementById("name").value = data;
}

问3：为啥处理数据在第二步骤？

理论上在第二步骤的给创建的对象绑定事件，该事件会有回调处理

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

当请求的状态为1，回调一次onreadystatechange事件；当请求的状态为2，再回调一次onreadystatechange事件。

3.ajax的练习

在idea创建web项目过程，保姆级别的教程

https://blog.csdn.net/llplllll/article/details/116903198

需求1：全局刷新，计算bmi
在这里插入图片描述

BmiServlet.java

package com.org.controller;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

//servlet
public class BmiServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response){

    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//        接收请求参数
        String strName = request.getParameter("name");
        String height = request.getParameter("h");
        String weight = request.getParameter("w");

//        计算BMI：bmi = 体重 / 身高的平方
        float h = Float.valueOf(height);
        float w = Float.valueOf(weight);

        float bmi = w / (h*h);

//        判断bmi的范围
        String msg = "";
        if(bmi <= 18.5){
            msg = "您偏瘦";
        }else if(bmi > 18.5 && bmi <= 23.9){
            msg = "您的bmi正常";
        }else if(bmi > 24 && bmi <= 27){
            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);
    }
}

index.jps

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

result.jsp

<%--
  Created by IntelliJ IDEA.
  User: PPPoA
  Date: 2021/12/20
  Time: 19:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>结果页面</title>
</head>
<body>
    <p>显示bmi计算结果</p>
    <h3>${msg}</h3>
</body>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <servlet-name>BmiServlet</servlet-name>
        <servlet-class>com.org.controller.BmiServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>BmiServlet</servlet-name>
        <url-pattern>/bmiServlet</url-pattern>
    </servlet-mapping>
</web-app>

运行成功！

需求2：局部刷新，ajax
在这里插入图片描述

BmiAjaxServlet.java

package com.org.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;

//servlet
public class BmiAjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response){
        
    }
    
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("=================ajax发起请求==================");
        PrintWriter writer = response.getWriter();
        writer.println("hello Ajax");
        writer.flush();
        writer.close();
    }
}

index.jsp

<%--
  Created by IntelliJ IDEA.
  User: PPPoA
  Date: 2021/12/20
  Time: 20:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>局部刷新-ajax</title>
    <script type="text/javascript">
      // 使用内存中的异步对象，代替浏览器发起请求。异步对象使用js创建和管理
      function doAjax(){
        var xmlHttpRequest = new XMLHttpRequest();
        xmlHttpRequest.onreadystatechange = function (){
          // alert("readyState属性值==========="+xmlHttpRequest.readyState + "|status:" + xmlHttpRequest.status)
          if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
            alert(xmlHttpRequest.responseText)
          }

        }
        xmlHttpRequest.open("get","bmiAjax",true);

        xmlHttpRequest.send();
      }
    </script>
  </head>
  <body>
    <p>局部刷新-ajax-计算bmi</p>
    <div>
      姓名：<input type="text" id="name"><br/>
      体重（公斤）：<input type="text" id="w"><br/>
      身高（米）：<input type="text" id="h"><br/>
      <input type="button" value="计算bmi" onclick="doAjax()">
    </div>
  </body>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <servlet-name>BmiAjaxServlet</servlet-name>
        <servlet-class>com.org.controller.BmiAjaxServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>BmiAjaxServlet</servlet-name>
        <url-pattern>/bmiAjax</url-pattern>
    </servlet-mapping>
</web-app>

运行成功！

测试readyState属性和Status属性

<script type="text/javascript">
      // 使用内存中的异步对象，代替浏览器发起请求。异步对象使用js创建和管理
      function doAjax(){
        var xmlHttpRequest = new XMLHttpRequest();
        xmlHttpRequest.onreadystatechange = function (){
          alert("readyState属性值==========="+xmlHttpRequest.readyState + "|status:" + xmlHttpRequest.status)
          if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
            alert(xmlHttpRequest.responseText)
          }

        }
        xmlHttpRequest.open("get","bmiAjax",true);

        xmlHttpRequest.send();
      }
</script>

皮皮怪鼠

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
1
评论
Ajax我真的理解了...

Ajax…1.全局刷新和局部刷新全局刷新。整个浏览器被新数据覆盖，浏览器需加载，重新刷新渲染页面局部刷新。在浏览器的内部交互发起请求，改变页面部分数据异步对象实现ajax局部刷新。ajax局部刷新的核心对象是异步对象——XMLHttpRequestXMLHttpRequest对象存在浏览器内存中，使用js语法创建和使用XMLHttpRequest对象：var xmlhttp = new XMLHttpRequest();XMLHttpRequest对象能够：在不重新加载页面情况下更
复制链接

扫一扫