Html第8集：AJAX Http请求

文章目录

• ​​GET 网络请求​​
• ​​关键参数讲解​​
• ​​跨域问题​​
• ​​post 请求​​
• ​​添加header​​
• ​​POST 提交表单​​
• ​​POST 发送 json​​
• ​​表单上传文件​​

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>

控制台如下：

表单上传文件