【Ajax的post请求和get请求】

3. 原生ajax

  1. 创建实列对象
     const xhr = new XMLHttpRequest
  2. 建立链接
      xhr.open("请求方式“，”请求地址“）
  3. 发送请求
       xhr.send
  4. 监听状态

4. form表单get和post请求

  1.form表单默认是get请求
  get请求特点：参数在 url 地址上
  数据大小有限制
  2. post请求特点：请求参数不在 url 地址上，属于密文传递数据
     数据大小理论上没有限制

5.Ajax get请求

1. 创建实列对象
   . let xhr = new XMLHttpRequest();
2. 建立连接
   xhr.open(‘post’,‘http://139.9.177.51:3333/api/testPost’)
3. 发送请求
   xhr.send()
4. 监听状态
   xhr.onreadystatechange=function(){
   if(xhr.readyState=4&&xhr.status=200){
   // xhr.responseText 请求到的数据
   console.log( xhr.responseText);

  <button id="btn">改变
    </button>
        <p id="text"></p>
        <p id="msg"></p>
    <script>
        let btn = document.querySelector("#btn");
        let text = document.querySelector("#text");
        let msg = document.querySelector("#msg");
        btn.addEventListener("click",function(){
            // 创建ajax实列对象
         let xhr = new XMLHttpRequest();
            // 建立打开链接  xhr.open(请求方式，地址，)
            xhr.open("get","http://139.9.177.51:3333/api/testGet?name=张三")
            // 发送请求 
            xhr.send()
            // 监听事件
            xhr.onreadystatechange=function(){
                if(xhr.readyState===4&&xhr.status===200){
            //     xhr.responseText   请求到的数据
            console.log( xhr.responseText);
            let textObj = JSON.parse(xhr.responseText)
            text.innerHTML = textObj.data
            msg.innerHTML = textObj.msg
            }
        }
        })

6. ajax post请求

1. 创建实列对象
   let xhr = new XMLHttpRequest();
2. 建立连接—》设置请求头
3. xhr.open(‘post’,‘http://139.9.177.51:3333/api/testPost’)
4. xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
5. 发送请求
   xhr.send(name=${seachText.value})
6. 监听状态
   xhr.onreadystatechange=function(){
   if(xhr.readyState=4&&xhr.status=200){
   // xhr.responseText 请求到的数据
   console.log( xhr.responseText);

<button id="btn">改变
    </button>
        <p id="text"></p>
        <p id="msg"></p>
        <input type="text" id="seachText">
    <script>
        let btn = document.querySelector("#btn");
        let text = document.querySelector("#text");
        let msg = document.querySelector("#msg");
        let seachText = document.querySelector("#seachText");
        btn.addEventListener("click",function(){
            // 创建ajax实列对象
         let xhr = new XMLHttpRequest();
            // 建立打开链接  xhr.open(请求方式，地址，)
           // 2. 建立连接
        xhr.open('post','http://139.9.177.51:3333/api/testPost')
        // 2.1 设置请求头
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

            // 发送请求 
            xhr.send(`name=${seachText.value}`)
            // 监听事件
            xhr.onreadystatechange=function(){
                if(xhr.readyState===4&&xhr.status===200){
            //     xhr.responseText   请求到的数据
            console.log( xhr.responseText);
            let textObj = JSON.parse(xhr.responseText)
            text.innerHTML = textObj.data
            msg.innerHTML = textObj.msg
            }
        }
        })
        seachText.addEventListener("keyup",function(event){
            if(event.keyCode===13){
                btn.click()
            }
        })

7.小总结

get和post请求的区别：

get 请求 不需要请求头, post 请求必须要请求头
get 请求 参数 拼接在 请求地址后面? 拼接参数与参数之间用 &
进行分割,post请求参数,传在 send 里面

8.请求状态码 和 http 状态码

// 1.请求状态 (了解)
xhr.readyState === 4
/*
0: 请求未初始化
1: 请求已发送
2: 请求已接收
3: 请求处理中
4: 请求已完成,响应已就绪
/
// 2. http 的状态码(重点)
/
2xx: 请求资源成功 200
3xx: 重定向 304 使用缓存
4xx: 请求资源失败 前端后端都可能有问题
5xx: 服务器错误 后端问题
*/