JS原生AJAX

最新推荐文章于 2024-09-19 16:13:24 发布

深知她是一场梦

最新推荐文章于 2024-09-19 16:13:24 发布

阅读量5.6k

点赞数 1

分类专栏： AJAX 文章标签： AJAX 异步请求原生 JS

本文链接：https://blog.csdn.net/lgl782519197/article/details/107863026

版权

AJAX 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了JS原生AJAX的实现方式，包括如何编写异步请求，详细讲解了GET和POST两种请求方式。通过示例代码展示如何进行GET异步请求，以及POST请求中参数传递和请求头的设置，确保中文内容正确传输。

摘要由CSDN通过智能技术生成

AJAX各种实现方式

JS原生AJAX

原生JS的AJAX异步请求代码

如何输写

参考我们的W3school文档,我们可以知道怎么写https://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechange.asp

结合文档，那我就自己写一个异步请求

GET异步请求

例子：单击某个按钮，异步请求servlet,然后把响应内容返回给div

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>js原生异步</title>
    <style>
        input{
            width:300px;
            height: 50px;
            background-color:burlywood ;
        }
        div{
            width:300px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script>
        function myClick() {
            var xmlhttp;
            if (window.XMLHttpRequest) {
                xmlhttp=new XMLHttpRequest();
            } else {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.open("GET","demo1?name=林大帅",true);
            xmlhttp.send();
            xmlhttp.onreadystatechange=function() {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                    document.getElementById("div").innerHTML=xmlhttp.responseText;
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" value="单击我触发请求" onclick="myClick();" > <br><br><br>
    <div id="div">

    </div>
</body>
</html>

demo1代码

package com.lingaolu.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
import java.io.IOException;

/**
 * @author 林高禄
 * @create 2020-08-07-14:58
 */
@WebServlet("/demo1")
public class Demo1 extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String name = request.getParameter("name");
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().write("<h1>"+name+"</h1>");
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

运行访问，单击按钮前

单击按钮后，异步把内容付给了div

POST异步请求

POST请求和GET有些不一样，传参的方式变了，而且要设置请求头

服务器的请求获取参数也有设置编码，不然中文会乱码

例子：单击某个按钮，异步请求servlet,然后把响应内容返回给div

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>js原生异步</title>
    <style>
        input{
            width:300px;
            height: 50px;
            background-color:burlywood ;
        }
        div{
            width:300px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script>
        function myClick() {
            var xmlhttp;
            if (window.XMLHttpRequest) {
                xmlhttp=new XMLHttpRequest();
            } else {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.open("POST","demo1",true);
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlhttp.send("name=林大帅");
            xmlhttp.onreadystatechange=function() {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                    document.getElementById("div").innerHTML=xmlhttp.responseText;
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" value="单击我触发请求" onclick="myClick();" > <br><br><br>
    <div id="div">

    </div>
</body>
</html>

package com.lingaolu.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
import java.io.IOException;

/**
 * @author 林高禄
 * @create 2020-08-07-14:58
 */
@WebServlet("/demo1")
public class Demo1 extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        String name = request.getParameter("name");
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().write("<h1>"+name+"</h1>");
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}