JS原生AJAX

原创

wx5b4881866d732 2022-02-11 15:11:03 博主文章分类：AJAX ©著作权

文章标签 AJAX 异步请求原生 JS xml 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者wx5b4881866d732的原创作品，请联系作者获取转载授权，否则将追究法律责任

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);
    }
}