ajax

返还数据类型

• 服务器返还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正文头格式；