ajax前后端交互

时间：2019-09-10 13:04:25 阅读：105 评论：0 收藏：0 [点我收藏+]

标签：err header onload 数据类型 doc 事件 cat 方法 hello

目标

1. 理解ajax基本使用

2. 会使用XMLHttpRequest对象实现数据交互

3. 了解onreadystatechange服务器响应信息

4. 会使用FormData对象上传文件

5. 了解upload事件对象

知识要点

1.ajax使用

- ajax是： *Ajax* 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）

- 新建XMLHttpRequest对象；

```js

let xhr = new XMLHttpRequest();

```

- 配置请求参数

```js

xhr.open("get","/checkUser",true); //true是异步，false是同步

```

- 接收返还值

```js

xhr.onload = function(){

let res = JSON.parse(xhr.responseText);

}

```

- 发送服务器

```

xhr.send();

```

## 针对ajax的详细解释

- get注意点

- get通过parmas传参

- get和querystring的问题,通过url传参

- post注意点

- 发送数据时候需要设置http正文头格式；

```js

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //默认编码

xhr.setRequestHeader("Content-type","multipart/form-data"); //二进制编码

xhr.setRequestHeader("Content-type","application/json"); //json编码

```

- 获取头部信息；

- getAllResponseHeaders 或者是getResponseHeader ；

## onreadystatechange

onreadystatechange：存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执行。

readyState：存有服务器响应的状态信息。

- 0: 请求未初始化（代理被创建，但尚未调用 open() 方法）

- 1: 服务器连接已建立（`open`方法已经被调用）

- 2: 请求已接收（`send`方法已经被调用，并且头部和状态已经可获得）

- 3: 请求处理中（下载中，`responseText` 属性已经包含部分数据）

- 4: 请求已完成，且响应已就绪（下载操作已完成）

status常用状态

HTTP状态码	描述
100	继续。继续响应剩余部分，进行提交请求
200	成功
301	永久移动。请求资源永久移动到新位置
302	临时移动。请求资源零时移动到新位置
304	未修改。请求资源对比上次未被修改，响应中不包含资源内容
401	未授权，需要身份验证
403	禁止。请求被拒绝
404	未找到，服务器未找到需要资源
500	服务器内部错误。服务器遇到错误，无法完成请求
503	服务器不可用。临时服务过载，无法处理请求

- 返还数据类型

- 服务器返还json数据

```js

xhr.responseText //来获取

```

- 服务器返还xml数据

```js

xhr.responseXML //获取值

```

- 重写response里的content-type内容

- xhr.overrideMimeType(‘text/xml; charset = utf-8‘)

- 同步及异步ajax；

- 设置true和false区别；

ajax代码封装

  function ajax(options) {
        let opts = Object.assign({
            url: "",
            method: "get",
            data: "",
            headers:{
                "content-type":"application/x-www-form-urlencoded",
            },
            success(res) {}
        }, options)
        let xhr = new XMLHttpRequest();

        if(opts.method==="get"){
            console.log(o2u(opts.data))
            // data: {
            //     hello: "你好",
            //     height: "178cm"
            // }
            // hello=还好&height=178cm
            opts.url = opts.url+"?"+o2u(opts.data);
        }

        xhr.open(opts.method,opts.url,true);
        // 设置头部
        for(let key in opts.headers){
            xhr.setRequestHeader(key,opts.headers[key]);
        }
        let sendData;
        switch(opts.headers[‘content-type‘]){
            case ‘application/x-www-form-urlencoded‘:
                sendData = o2u(opts.data);
            break;
            case ‘application/json‘:
                sendData = JSON.stringify(opts.data);
            break;
        }

        xhr.onload = function(){
            opts.success(JSON.parse(xhr.responseText));
        }

        if(opts.method=="get"){
            xhr.send();
        }else{
            xhr.send(sendData);
        }
        function o2u(obj){
            let keys = Object.keys(obj);
            let values = Object.values(obj);
            // hello=你好;
            // height=178cm
            return keys.map((v,k)=>{
                return `${v}=${values[k]}`;
            }).join("&");
        }
    }

2.利用FormData来实现文件上传

- 创建FormData对象

- 监控上传进度

upload 事件

- onloadstart 上传开始

- onprogress 数据传输进行中

- evt.total ：需要传输的总大小；

- evt.loaded :当前上传的文件大小；

- onabort 上传操作终止

- onerror 上传失败

- onload 上传成功

- onloadend 上传完成（不论成功与否）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="file" class="myfile" />
    <button>点击我上传文件</button>
</body>
<script>
    document.querySelector("button").onclick = function(){
        let file = document.querySelector(".myfile").files[0];
        // console.log(files);
        let form = new FormData();
        form.append("img",file);
        form.append("name","张三");
        let xhr = new XMLHttpRequest();
        xhr.open("post","/upload",true);
        xhr.onload = function(){
            console.log(xhr.responseText);
        }
        xhr.send(form);
    }
</script>
</html>

ajax前后端交互

标签：err header onload 数据类型 doc 事件 cat 方法 hello

原文地址：https://www.cnblogs.com/supermanGuo/p/11496849.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行