【前端工程师之ajax基础】原生XML请求 jquery发请求 axios发起请求

ajax请求大杂烩

• 1.报文格式
• • 1.1请求报文：
  • 1.2响应报文：
• 2.express的使用
• 3.原生ajax的基本操作
• • 3.1分步走
  • 3.2其他情况
• 4.使用jqury发起请求
• • 4.1get请求方式
  • 4.2post请求方式
  • 4.3ajax请求方式
• 5.使用axios发起请求

1.报文格式

请求报文和响应报文

1.1请求报文：

• 请求行【POST URL,HTTP/2.1协议版本】
• 请求头：一组组键值对
• -请求体:一般POST请求才有，在浏览器调试工具的form data或者request payload 中看

1.2响应报文：

• 响应行【HTTP/2.1协议版本，200状态码，ok响应报文】
• 响应头：一组组键值对 响应体:服务器返回到JSON数据对象，在浏览器调试工具的response中看

2.express的使用

• 初始化node项目 【npm init】
• 安装express框架【npm i express】
• 导入express【require(‘express’)】
• 写代码…创建服务器
• 启动服务器[node xxx.js]

3.原生ajax的基本操作

3.1分步走

 // 发起ajax请求
        // 1.创建XHR对象
        const xhr=new XMLHttpRequest();
        // console.log(xhr)
        // 2.初始化，请求方式和请求地址和请求参数
        xhr.open('GET','http://127.0.0.1:8000/server?studentName=mulan&age=18')
        // 3.发送
        xhr.send()
        // 4.事件绑定  ，处理服务端返回的结果
        // on       当什么时候
        // redayState       xhr对象的一个属性  值是0-4，4代表全部数据响应完毕
        // change           发生改变
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4){
                // 2xx状态码表示响应成功
                if(xhr.status>=200 &xhr.status<300){
                    // 状态码,状态字符串
                     console.log(xhr.status,xhr.statusText)
                    // 所有响应头
                    // console.log(xhr.getAllResponseHeaders())
                    // 响应体
                    result.innerHTML=xhr.response
                }
               
            }else{

            }

        }

3.2其他情况

        // 设置请求头信息
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
         // 设置响应体数据类型
        xhr.responseType="json"
        // 自定义请求头信息
        xhr.setRequestHeader('user','mulan')
        // 设置请求延迟时间  2s
        xhr.timeout=2000
        // 绑定请求延时时间
        xhr.ontimeout=function(){
            alert('请求超时')
        }
        // 绑定请求异常时间
        xhr.onerror=function(){
            alert('网络似乎出了点小问题')
        }
        // 取消请求
        xhr.abort()

4.使用jqury发起请求

4.1get请求方式

// url,params,callback
  $.get('http://127.0.0.1:8000/jquery-server',{a:1,b:2},function(data){
     console.log(data)
  },'json')

4.2post请求方式

// url,data,callback
   $.post('http://127.0.0.1:8000/jquery-server',{user:'mulan',password:'123456'},function(data){
     console.log(data)
   })

4.3ajax请求方式

           $.ajax({
                    // 请求方式
                    method:'POST',
                    // url
                    url:'http://127.0.0.1:8000/jquery-server',
                    // 请求体
                    data:{
                        user:'mulan',
                        password:'123456'
                    },
                    
                    // 自定义设置请求头信息
                    headers:{
                        a:1,
                        b:2
                    },
                    // 响应体类型
                    dataType:'json',
                    // 设置响应最长时间
                    timeout:2000,
                    success:function(data){
                        console.log(data)
                    },
                    // 失败的回调
                    error(){
                        alert('请求失败')
                    }
                })

5.使用axios发起请求

//通用方法
       axios({             
                method:'POST',
                // url 路径
                url:'http://127.0.0.1:8000/axios-server',
                //  请求体
                data:{
                    username:'admin',
                    password:'admin'
                },
                // 请求头
                headers:{
                    weight:100,
                    height:180
                }

            }).then(value=>{
                console.log(value)
            })

            

        axios({             
                method:GET',
                // url 路径
                url:'http://127.0.0.1:8000/axios-server',
                // 查询字符串参数
                params:{
                    id:400,
                    vip:60
                },      
                // 请求头
                headers:{
                    weight:100,
                    height:180
                }

            }).then(value=>{
                console.log(value)
            })