ajax

最新推荐文章于 2025-03-16 10:00:00 发布

原创最新推荐文章于 2025-03-16 10:00:00 发布 · 75 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨了前端与服务器间的数据交互，重点讲解了XML和JSON两种数据格式的处理方式，包括如何设置响应类型、解析响应数据以及利用XMLHttpRequest进行GET和POST请求的具体实现。

返还数据类型

服务器返还json数据
```
xhr.responseText  //来获取
```
服务器返还xml数据
```
xhr.responseXML //获取值
```
- 重写response里的content-type内容
- xhr.overrideMimeType(‘text/xml; charset = utf-8’)

xml接口

- 前端页面

xhr.open(“get”,"/xml",true);
客户端设置响应报头的 content-type
xhr.overrideMimeType(“text/xml”);

  < script>
        document.querySelector("button").onclick = function(){
            let xhr = new XMLHttpRequest();
            xhr.open("get","/xml",true);
            
            //客户端设置 响应报头的 content-type
            xhr.overrideMimeType("text/xml");
            xhr.onload = function(){
                // console.log(xhr.responseText);
                
                console.log(xhr.responseXML);

               let name = xhr.responseXML.getElementsByTagName("name")[0].innerHTML;
               console.log(name);
            }
            xhr.send();
        }
    < /script >

- 后端服务器

router.get("/xml",ctx=>{
    //接口文档： 接口：  /xml
    ctx.set("content-type","text/xml");
    ctx.body = `<?xml version ='1.0' encoding='utf-8'?>
                    < books>
                        < nodejs>
                            < name>node实战< /name>
                            < price>56元< /price>
                        < /nodejs>
                        <vue>
                            <name>vue实战</name>
                            <price>59元</price>
                        </vue>
                     </books>
              `
})

onreadystatechange

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

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

0: 请求未初始化（代理被创建，但尚未调用 open() 方法）
1: 服务器连接已建立（open方法已经被调用）
2: 请求已接收（send方法已经被调用，并且头部和状态已经可获得）
3: 请求处理中（下载中，responseText 属性已经包含部分数据）
4: 请求已完成，且响应已就绪（下载操作已完成）

status常用状态码

针对ajax的详细解释

get注意点
- get通过parmas传参必须给参数，否则地址错误，
- query方式传参，则不会影响地址。
- post也可以使用query方式，不是get独有的
- get和querystring的问题,通过url传参
post注意点
- post传参是没有数据量限制的，通常会是服务器限制。
- post传参是正文区域传参所以需要设置编码格式，而get是在头部Url中，所以不需要
- 发送数据时候需要设置http正文头格式；