Html第8集：AJAX Http请求、Get、Post、上传文件、表单

转载请标明出处：http://blog.csdn.net/zhaoyanjun6/article/details/126528847
本文出自【赵彦军的博客】

AJAX 官网地址：https://www.w3schools.com/Js/js_ajax_http.asp

GET 网络请求

<script>

    const httpRequest = new XMLHttpRequest()
    httpRequest.onload = function () {
        //请求成功，404 会回调
        const code = this.status
        const responseText = this.responseText
        console.log("yu-- " + code)
        console.log("yu-- " + responseText)
    }

    httpRequest.onerror = function () {
        //没有网，会回调
        const code = this.status
        const responseText = this.responseText
        console.log("yu-error- " + code)
        console.log("yu-error- " + responseText)
    }

    httpRequest.open("GET", "https://api.github.com/users/zyj1609wz/repos", true)
    httpRequest.send()

</script>

日志如下：

网络请求拦截：

关键参数讲解

open(method: string, url: string | URL): void;
open(method: string, url: string | URL, async: boolean, username?: string | null, password?: string | null): void;

• method : 请求方式，GET、POST
• url ：请求地址
• async ：异步请求

跨域问题

如果请求某个接口，出现跨域出错问题

可以在服务器测解决，下面用 srpingboot 举例

添加 @CrossOrigin 注解

@RestController
public class MyCro {

    @PostMapping("/getUser")
    @CrossOrigin(origins = "*")
    public void run(){

    }
}

post 请求

<script>

    const httpRequest = new XMLHttpRequest()

    httpRequest.onload = function () {
        //请求成功，404 会回调
        const code = this.status
        const responseText = this.responseText
        console.log("yu-- " + code)
        console.log("yu-- " + responseText)
    }

    httpRequest.onerror = function () {
        //没有网，会回调
        const code = this.status
        const responseText = this.responseText
        console.log("yu-error- " + code)
        console.log("yu-error- " + responseText)
    }

    httpRequest.open("POST", "http://localhost:8080/getUser", true)
    httpRequest.send()

</script>

效果如下：

添加header

添加 header 使用 setRequestHeader("key", "value")

但是需要注意的是，setRequestHeader("key", "value") 一定要在 open 方法之后执行，顺序不能错。

<script>

    const httpRequest = new XMLHttpRequest()

    httpRequest.onload = function () {
        //请求成功，404 会回调
        const code = this.status
        const responseText = this.responseText
        console.log("yu-- " + code)
        console.log("yu-- " + responseText)
    }

    httpRequest.onerror = function () {
        //没有网，会回调
        const code = this.status
        const responseText = this.responseText
        console.log("yu-error- " + code)
        console.log("yu-error- " + responseText)
    }

    httpRequest.open("POST", "http://localhost:8080/getUser", true)
    httpRequest.setRequestHeader("my_token", "666888")
    httpRequest.send()

</script>

效果如下：

POST 提交表单

<script>

    const httpRequest = new XMLHttpRequest()

    httpRequest.onload = function () {
        //请求成功，404 会回调
        const code = this.status
        const responseText = this.responseText
        console.log("yu-- " + code)
        console.log("yu-- " + responseText)
    }

    httpRequest.onerror = function () {
        //没有网，会回调
        const code = this.status
        const responseText = this.responseText
        console.log("yu-error- " + code)
        console.log("yu-error- " + responseText)
    }

    httpRequest.open("POST", "http://192.168.0.101:8080/getUser", true)
    httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    httpRequest.send("name=duduo&lname=120");

</script>

控制台看效果：

抓包看效果：

POST 发送 json

<script>

    const httpRequest = new XMLHttpRequest()

    httpRequest.onload = function () {
        //请求成功，404 会回调
        const code = this.status
        const responseText = this.responseText
        console.log("yu-- " + code)
        console.log("yu-- " + responseText)
    }

    httpRequest.onerror = function () {
        //没有网，会回调
        const code = this.status
        const responseText = this.responseText
        console.log("yu-error- " + code)
        console.log("yu-error- " + responseText)
    }

    httpRequest.open("POST", "http://192.168.0.101:8080/getUser", true)
    httpRequest.setRequestHeader("Content-type", "application/json");

    user = {"name": "zyj", "age": 102}
    httpRequest.send(JSON.stringify(user));

</script>

控制台如下：

post 发送字节数组

<script>

    const httpRequest = new XMLHttpRequest()

    httpRequest.onload = function () {
        //请求成功，404 会回调
        const code = this.status
        const responseText = this.responseText
        console.log("yu-- " + code)
        console.log("yu-- " + responseText)
    }

    httpRequest.onerror = function () {
        //没有网，会回调
        const code = this.status
        const responseText = this.responseText
        console.log("yu-error- " + code)
        console.log("yu-error- " + responseText)
    }

    httpRequest.open("POST", "http://192.168.0.101:8080/getUser", true)
    httpRequest.setRequestHeader("Content-type", "application/json");

    //把字符串 转换成 二进制
    const content = "今天星期六"
    const utf8Encode = new TextEncoder();
    const byteArray = utf8Encode.encode(content);

    //发送二进制
    httpRequest.send(byteArray);

</script>

效果如下：

form 表单 上传 MultipartFile

<body>

<input type="file" id="my_file" name="file"/>
<button onclick="uploadFile()">上传</button>

<script>

    function uploadFile() {

        //创建MultipartFile
        const formData = new FormData();
        const file = document.getElementById("my_file").files[0]
        formData.append("file", file);

        console.log("file_name: " + file.name)

        const httpRequest = new XMLHttpRequest()

        httpRequest.onload = function () {
            //请求成功，404 会回调
            const code = this.status
            const responseText = this.responseText
            console.log("yu-- " + code)
            console.log("yu-- " + responseText)
        }

        httpRequest.onerror = function () {
            //没有网，会回调
            const code = this.status
            const responseText = this.responseText
            console.log("yu-error- " + code)
            console.log("yu-error- " + responseText)
        }

        httpRequest.open("POST", "http://192.168.0.101:8080/upload", true)

        //发送二进制
        httpRequest.send(formData);
    }

</script>

</body>

效果如下：