javaweb

ele597

已于 2023-08-14 09:40:14 修改

阅读量93

点赞数

文章标签： okhttp

于 2023-08-10 13:47:10 首次发布

本文链接：https://blog.youkuaiyun.com/qq_72004660/article/details/132203524

版权

1.写一个index.html

2.在src.org下写一个MyText.java extends HttpServlet{重写serviice}

3.在web/WEB-INF/web.xml下插入servlet

<web-app>
    <servlet>
    <servlet-name>mytest</servlet-name>
    <servlet-class>org.MyText</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>mytest</servlet-name>
        <url-pattern>/myxxx</url-pattern>
    </servlet-mapping>
</web-app>

4.<script></script>AJAX 中 XMLHttpRequest() 实例'xhr'方法详细分解!!https://blog.youkuaiyun.com/weixin_43618932/article/details/88067689

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //AJAX (Async JavaScript And XML)
        var xhr=new XMLHttpRequest();
        // function mysubmit() {
        //     var mytext=document.getElementById("mytext");
        //     //.open('请求方式GET/POST' ,'请求的服务器/接口地址', (请求行 ajax加参数防止缓存 请求行) ，是否异步
        //     xhr.open("GET","/myxxx?arg1=" + mytext.value + "&d=" + new Date(),true);
        //     //.setRequestHeader(header,value):设置http请求头部的方法，此方法鼻血在.open()和.send()方法之间调用
        //     // xhr.setRequestHeader();
        //     xhr.onreadystatechange=myres;//监听ajax请求
        //     xhr.send(null);//body
        // }

        function mypost() {
            var mytext=document.getElementById("mytext");
            //ajax法 路径 请求行 ajax加参数防止缓存 请求行 ，是否异步
            xhr.open("POST","/myxxx?d="+new Date(),true);
            //如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。
            // 然后在 send() 方法中规定您希望发送的数据：
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            // xhr.setRequestHeader("arg2","xxxxx1111传第二个参数");//在MyText.java中通过GETHeader（）得到
            xhr.onreadystatechange=myres;

            xhr.send("arg1="+mytext.value);//body
        }
        function myres() {
            var mydiv=document.getElementById("mydiv");
            if (xhr.readyState==4){//Ajax：readyState状态值和status状态码
                if (xhr.status==200){
                    // mydiv.innerHTML+="hello&nbsp;&nbsp;"+xhr.responseText+"<br>"
                    //定义一个JSON对象res，用eval（）方法：按照JavaScript跑一遍内容
                    var res=xhr.responseText;//responseTest从服务器返回的数据
                    var obj=eval("("+res+")");//(res)表示将JSON转换为string
                    mydiv.innerHTML +="hello&nbsp;&nbsp;"+obj.res+"<br>"
                }
            }

        }

        //简化版：AJAX 中 XMLHttpRequest() 实例'xhr'方法
        /*var xhr = new XMLHttpRequest();
        xhr.open('GET','请求的服务器地址',true);
        xhr.setRequestHeader(header,value);
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.stastus === 200){
                console.log(xhr.responseText);
            }
        }
        xhr.send(data);*/

    </script>
</head>
<body>
<input type="text" id="mytext"><input type="button" value="submit" onclick="mypost()">
<div id="mydiv"></div>
</body>
</html>

5.Mytext.java

package org;

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;

public class MyText extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String res=req.getParameter("arg1");
        PrintWriter out=resp.getWriter();
        out.println("{\"res\":  \" "+res+"  \"}");//写json：{"res":""}粘贴进println("")里
        out.flush();
    }
}

6.xhr.setRequestHeader()

ContentType常用对照表https://www.ngui.cc/el/1060347.html?action=onClick

Content-Type类型https://baike.baidu.com/item/ContentType/1938445

也可以在网页检查-方法中找，直接复制