使用原生Ajax技术实现异步交互

抬头丨丨微笑^_^

已于 2022-02-19 15:57:50 修改

阅读量713

点赞数

文章标签： ajax 交互

于 2022-02-16 16:34:43 首次发布

本文链接：https://blog.csdn.net/DSL95/article/details/122966333

版权

实现原理

使用原生原生Ajax技术实现异步交互，就是使用Ajax的原生异步对象XMLHttpRequest，来进行创建对象、绑定事件、初始化数据、发送数据的操作过程。

实现步骤

第一步,利用XMLHttpRequest创建异步对象。

//1.创建异步对象
var xmlHttp = new XMLHttpRequest();

第二部,利用异步对象绑定触发事件函数.

xmlHttp.onreadystatechange = function () {}

第三步,初始请求参数

xmlHttp.open(“请求方式”, “请求路径” , 是否异步(默认为异步));

第四步,发送请求

xmlHttp.send();

其中在第二步中,需要对请求的的状态进行判断,从而实现后续操作,进行状态判断利用readyState方法实时读取请求的各种状态:

异步对象的属性readyState，表示异步对象请求的状态变化
0：表示创建异步对象时，对应new XMLHttpRequest()
1：初始异步请求对象 xmlHttp.open()
2：发送请求 xmlHtttp.send()
3：从服务器端接收到数据（原始数据，没有被开发人员处理的数据），此过程为异步请求对象内部使用，开发人员无法干预
4：异步对象将接收完的数据，在内部处理完成后，此时需要开发人员对数据进一步处理。

如果为post请求，open方法中的请求路径不能携带参数，参数需要放在send方法中进行传输，但是必须要设置setRequestHeader方法设置请求头属性，将send中的参数设置为键值对形式，便于后台使用数据，如果不设置请求头属性，则会将send方法中的参数整体返回，不能以键值对的形式进行拆分，如题代码设置如下：

//open中不能携带参数
xmlHttp.open(“post”, “bmiServlet”, true);
//设置请求头属性，将send中参数设置为键值对形式
xmlHttp.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”)；
//设置请求参数
xmlHttp.send("“name=zs&height=1.7&wigth=78”);

代码展示

index.jsp展示:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>BMI测定中心</title>
    <script type="text/javascript">

        function doAjax() {
            //1.创建异步对象
            var xmlHttp = new XMLHttpRequest();
            //2.绑定事件
            xmlHttp.onreadystatechange = function () {
                //alert("异步对象状态变化：---"+xmlHttp.readyState);
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    //alert(xmlHttp.responseText);
                    var data = xmlHttp.responseText;
                    //更新dom对象，更新页面数据
                    document.getElementById("showInfo").innerText = data;
                }
            }
            var name = document.getElementById("name").value;
            var h = document.getElementById("height").value;
            var w = document.getElementById("wigth").value;
            var param = "name=" + name + "&height=" + h + "&wigth=" + w;
            //3.初始请求参数
            xmlHttp.open("get", "bmiServlet?" + param, true);
            //4.发送请求
            xmlHttp.send();
        }
    </script>
</head>
<body>
<h3>BMI测定中心</h3>
<span>姓名：</span><input type="text" id="name"><br>
<span>身高：</span><input type="text" id="height"><br>
<span>体重：</span><input type="text" id="wigth"><br>
<input type="submit" value="提交" onclick="doAjax()">
<br>
<br>
<%-- 展示结果div层 --%>
<div id="showInfo">
</div>
</body>
</html>

Servlet代码展示:

package indi.dsl.servlet;

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;
import java.io.PrintWriter;

@WebServlet(name = "BmiServlet")
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 name = request.getParameter("name");
        String height = request.getParameter("height");
        String wigth = request.getParameter("wigth");
        float h = Float.valueOf(height);
        float w = Float.valueOf(wigth);
        float bmi = w/(h*h);
        String msg = "";
        if (bmi>=26){
            msg = "尊敬的："+name+"先生，您的结果超重。";
        }
        response.setContentType("text/html;charset=utf-8");
        PrintWriter writer = response.getWriter();
        writer.println(msg);
        writer.flush();
        writer.close();

    }
}

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>indi.dsl.servlet.BmiServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>bmiServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
</web-app>

抬头丨丨微笑^_^

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
使用原生Ajax技术实现异步交互

实现原理使用原生原生Ajax技术实现异步交互，就是使用Ajax的原生异步对象XMLHttpRequest，来进行创建对象、绑定事件、初始化数据、发送数据的操作过程。实现步骤第一步,利用XMLHttpRequest创建异步对象。//1.创建异步对象var xmlHttp = new XMLHttpRequest();第二部,利用异步对象绑定触发事件函数.xmlHttp.onreadystatechange = function () {}第三步,初始请求参数xmlH
复制链接

扫一扫