ajax二get post与api

ajax原生案例 get请求

1. 先写一个服务器 一定要写跨域!!!

const express = require("express");

const app=express();
app.get('/server',(req,res)=>{
    // 设置响应头 设置允许跨域
  res.setHeader('Access-Control-Allow-Origin', '*');
    res.send('hello ajax')
});
app.listen('8080',()=>{
    console.log('running at http://127.0.0.1:8080');
})

2. 写一个html发送ajax文件
3. 创建 2. 初始化 3. 发送 4.绑定事件

 btn01=document.getElementsByTagName('button')[0];
    box=document.getElementById('box');
    btn01.onclick=()=>{
        //1.创建对象 xhr代表ajax请求
        const xhr=new XMLHttpRequest();
        //2. 初始化 设置请求的方式和地址 固定为xhr.open
        xhr.open('GET','http://127.0.0.1:8080/server')
        //3. 发送这个ajax请求
        xhr.send();
        //4.发送完请求 需要处理这个请求 绑定一个处理结果的事件
        xhr.onreadystatechange=()=>{
        // readyState 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
        //判断 (服务端返回了所有的结果)
            if(xhr.readyState===4){
                //判断响应状态码
                if (xhr.status>=200&&xhr.status<300) {
                    //输出响应报文!!! 包含行 头 空行 体
                    console.log('状态码',xhr.status);
                    console.log('状态字符串',xhr.statusText);
                    console.log('所有响应头',xhr.getAllResponseHeaders());
                    console.log('响应体',xhr.response);
                    //这里面没有传递参数 就是ajax请求自带的属性
                    box.innerHTML=xhr.response;
                }
            }
        }
    }

xhr.send()是发送参数 相当于地址中有/?id=参数信息 而服务器的res.send是响应体
发送出来的数据在palyload查看
若在地址中
xhr.open(‘GET’,‘http://127.0.0.1:8080/server?a=100&b=200&c=300’)
那么请求时 会在playload里显示参数的对象形式
a: 100
b: 200
c: 300

状态码 是200 成功
状态字符串 是ok
所有响应头 是响应头
响应体 是 服务器中res.send的内容

状态码 200
状态字符串 OK
所有响应头 content-length: 10
content-type: text/html; charset=utf-8
响应体 hello ajax

---

ajax post请求

btn02.addEventListener('mouseover',()=>{
        const xhr=new XMLHttpRequest();
        xhr.open('POST', 'http://127.0.0.1:8080/server');
        //设置请求头
        xhr.setRequestHeader('Content-Type','application/x-www-from-urlencoded');
        //自定义参数
        xhr.setRequestHeader('name','aaa');
        //发送参数
        xhr.send('a=100&b=200&c=300');
        xhr.onreadystatechange=()=>{
            if (xhr.readyState===4) {
                if (xhr.status>=200 && xhr.status < 300) {
                    box.innerHTML=xhr.response;
                }
            }
        }

    })

若想设置请求头 用setrequestheader()来设置
也可以自定义 但是自定义要在服务器中 设置all 并可以接受任意请求头
若设置了请求头 必须在服务器中设置all和 接受任意 不然报错!!!

//可以发送任意类型的请求
app.all('/server',(req,res)=>{
    // 设置响应头 设置允许跨域
  res.setHeader('Access-Control-Allow-Origin', '*');
  //可以接收任意请求头
  res.setHeader('Access-Control-Allow-Headers','*')
    res.send('hello ajax post')
});

若想在页面打印出对象格式

在服务器对对象转换为json格式

app.all('/server/json',(req,res)=>{
    // 设置响应头 设置允许跨域
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers','*')
  const data={
      nama:'aaa'
  };
  //进行字符串转换
  //因为res.send只能接受字符串 所以用stringfiy把对象转化为json字符串
  let str=JSON.stringify(data);
    res.send(str)
});

这时 ajax的请求体也是这个json的字符串
若想响应 原本对象的一个属性 需要将json再转化为对象

1. 手动转换

json.parse()

 //进行字符串转换
  //因为res.send只能接受字符串 所以用stringfiy把对象转化为json字符串
  let str=JSON.stringify(data);
    res.send(str)

2. 自动转换

xhr可以设置请求体属性
若设置了请求体类型为json 则 可以直接把它当对象来使用

        //设置响应体类型
        xhr.responseType='json';
        //-----------------------------------
         box.innerHTML = xhr.response.name;

API总结

XMLHttpRequest()：创建 XHR 对象的构造函数
status：响应状态码值，如 200、404
statusText：响应状态文本，如 ’ok‘、‘not found’
readyState：标识请求状态的只读属性 0-1-2-3-4
onreadystatechange：绑定 readyState 改变的监听
responseType：指定响应数据类型，如果是 ‘json’，得到响应后自动解析响应
response：响应体数据，类型取决于 responseType 的指定
timeout：指定请求超时时间，默认为 0 代表没有限制
ontimeout：绑定超时的监听
onerror：绑定请求网络错误的监听
open()：初始化一个请求，参数为：(method, url[, async])
send(data)：发送请求
abort()：中断请求 （发出到返回之间）
getResponseHeader(name)：获取指定名称的响应头值
getAllResponseHeaders()：获取所有响应头组成的字符串
setRequestHeader(name, value)：设置请求头