论坛 › IOS › 【Web】0底子学Web—ajax、原生js实现ajax—get、原生js实现ajax—post、原

钜形不锈钢水箱 发表于 2025-1-20 20:58:17

【Web】0底子学Web—ajax、原生js实现ajax—get、原生js实现ajax—post、原

ajax

Ajax是一种用于创建异步web应用程序的技术，通过JavaScript和XML或JSON的组合实现数据的异步传输和页面的动态更新，提供了更流通和交互式的用户体验，已成为构建现代Web应用程序的常用技术。
焦点对象: XMLHttpRequest
mary 1234 哀求
用户点击注册---------------->服务端<------>数据库
<——————————————————
响应 结果
一次哀求和响应结束就是ajax的完整过程
哀求

哀求地点(服务器)：https://sp1.baidu.com/5bU/union.gif?q=ajax
哀求参数： {key1:val1,key2:val2} | key1=val1&key2=val2 | formData
哀求参数类型:
  application/x-www-form-urlencoded‌：key1=val1&key2=val2
  application/json‌：JSON.stringfity({key1:val1,key2:val2})
  multipart/form-data：文件上传 formData对象
哀求方式: get查|post交|put改|delete删
  get：参数在地点栏可以看到，参数长度有限定(2000字符左右)，get哀求可以缓存
  post：参数在地点栏不可以看到，更加安全，参数长度没有限定，post哀求一样平常不可以缓存
响应格式: text | json
响应结果: http状态码200
  成功
  失败
状态码

详见：https://blog.csdn.net/ttrr27/article/details/135612954
200：哀求成功
304: 从缓存获取
400: 错误哀求（哀求格式错误）
403: 拒绝哀求(没有权限)
404: 找不到访问的资源(一样平常都是url写错)
500: 内部服务器错误(后端代码语法错误)
1XX: 哀求正在处置惩罚
2XX：哀求响应成功
3XX: 重定向
4XX: 客户端错误
5XX: 服务端错误
http

HTTP (hypertext transport protocol)协议超文本传输协议，协议详细规定了欣赏器和万维网服务器之间互相通信的规则。
##哀求报文
哀求行: 协议版本 哀求类型get/post 哀求url
哀求头：键值对情势
空行
哀求体: get无哀求体，post有哀求体
##响应报文
响应行：协议版本 响应码 响应结果
响应头: 键值对情势
空行
响应体:html
实现方式

原生js

1.获取XMLHttpRequest对象
2.打开连接通道
3.设置请求参数类型:
   ‌application/x-www-form-urlencoded‌：key1=val1&key2=val2
   application/json‌：JSON.stringfity({key1:val1,key2:val2})
   multipart/form-data：文件上传formData对象
4.设置响应类型:json |text
5.发送
6.响应结果（reaystate==4&&status==200）
原生js的fetch

get：
   fetch('url?a=1&b=2')
   .then(res=>res.text())
   .then(data=>console.log(data))
   .catch(err=>console.log(err))
post：
   fetch('url','a=1&b=2')
   .then(res=>res.json())
   .then(data=>console.log(data))
   .catch(err=>console.log(err))
jquery实现

   $.ajax({
      url:'url'，
      method:get/post，
      data: 参数，
      contentType:请求类型
      datatype：响应类型
      processData: false   //是否将json转换为 key=val&key=val,默认是true
      success：function(res){},
      error：function(err){}
   })

   $.getJson('url?a=1&b=2')
      .then(data=>console.log(data))
      .catch(err=>console.log(err))

   $.post('url','a=1&b=2')
      .then(data=>console.log(data))
      .catch(err=>console.log(err))
axios实现（现在最流行）

   axios({
      url:'url'，
      method:get/post，
      data: 参数，
      contentType:请求类型,
      responseype：响应类型,
      timeout:1000,//超时进入catch
      headers:{
         Content-Type:
      }
   })
      .then(res=>console.log(res.data))
      .catch(err=>console.log(err))

   axios.get('url?a=1&b=2')
      .then(res=>console.log(res.data))
      .catch(err=>console.log(err))

   axios.post('url','a=1&b=2')
      .then(res=>console.log(res.data))
      .catch(err=>console.log(err))
原生js实现ajax—get

<script>
    // 1. 获取xhr核心对象
    let xhr = new XMLHttpRequest()
    // 2. 打开连接
    xhr.open('get', 'https://apis.tianapi.com/ancbooks/index?key=c8bb542de7bc231251b70d2159a52dcf&id=9872ed9fc22fc182')
    // 3. 设置请求参数类型(可选)
    xhr.setRequestHeader('Content-Type', ' application/x-www-form-urlencoded')
    // 4. 设置响应类型
    xhr.responseType = 'json'
    // 5. 发送
    xhr.send()
    // 6. 响应结果
    xhr.onreadystatechange = function () {
      // 请求完成
      if (xhr.readyState == 4 && xhr.status == 200) {
            // 获取结果
            let res = xhr.response
            console.log(res)
            console.log(res.result.content)
      }
    }
</script>
原生js实现ajax—post

<script>
    // 获取xhr核心对象
    let xhr = new XMLHttpRequest()
    // 打开连接
    xhr.open('post', 'https://apis.tianapi.com/zhanan/index')
    // 设置请求参数类型
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    // 设置响应类型
    xhr.setRequestHeader = 'json'
    // 发送
    xhr.send('key=c8bb542de7bc231251b70d2159a52dcf')
    // 响应结果
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
            // console.log(JSON.parse(xhr.response).result.content)
            console.log(JSON.parse(xhr.response))
      }
    }
</script>
原生js实现fetch

    <script>
      let str = prompt('请输入一个多音字:')
      // get
      fetch(`https://apis.tianapi.com/duoyinzi/index?key=c8bb542de7bc231251b70d2159a52dcf&word=${str}`)
            .then(response => response.json())// 设置响应格式
            .then(data => {
                console.log(data)
                console.log(data.result.hanzi);
                for (let i of data.result.list) {
                  console.log(i)
                }
            })// 成功响应结果
            .catch(err => console.log(err))// 失败响应结果

      //post
      let data = { key: 'c8bb542de7bc231251b70d2159a52dcf', word: '豫R' }
      fetch('https://apis.tianapi.com/chepai/index', { method: 'post', body: 'key=c8bb542de7bc231251b70d2159a52dcf&word=豫R', headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
            .then(response => response.json()) //设置响应格式
            .then(data => console.log(data))   //成功响应结果
            .catch(err => console.log(err))    //失败响应结果
    </script>
jquery实现ajax

    <script>
      $.ajax({
            url: 'https://apis.tianapi.com/tiangou/index',   //请求地址
            method: 'post',//请求方式
            data: { key: '639e9d8b3e37974a3de3f2442bab91dc' },   //请求参数
            contentType: 'application/x-www-form-urlencoded',   //请求类型
            dataType: 'json',      //响应类型
            // processData:true,   //是否序列化处理，默认true key=639e9d8b3e37974a3de3f2442bab91dc
            success: function (res) {   //成功的结果
                console.log(res)
            },
            error: function (err) {   //失败的结果
                console.log(error)
            }
      })

      $.getJSON('https://apis.tianapi.com/tiangou/index?key=639e9d8b3e37974a3de3f2442bab91dc')
            .then(data => console.log(data))   //成功响应结果
            .catch(err => console.log(err))    //失败响应结果

      $.post('https://apis.tianapi.com/tiangou/index', 'key=639e9d8b3e37974a3de3f2442bab91dc')
            .then(data => console.log(data))   //成功响应结果
            .catch(err => console.log(err))    //失败响应结果
    </script>
axios实现ajax

<body>
    <input type="text"><button>查询</button>
    <ul>

    </ul>
    <script>
      $(function () {
            $('button').click(function () {
                $('ul').html() //先清空
                let name = $('input').val()
                axios.get('/starinfo/index?key=639e9d8b3e37974a3de3f2442bab91dc&name=' + name)
                  .then(res => {
                        let dd = res.data
                        console.log(dd)
                        dd.list.forEach(item => {
                            let _li = $(`<li>${item}</li>`)
                            $('ul').append(_li)
                        })


                  })   //成功响应结果
                  .catch(err => console.log(err))    //失败响应结果

            })
      })

      //全局设置
      axios.defaults.baseURL = 'https://apis.tianapi.com';
      axios.defaults.timeout = 1000;

      //配置写法
      axios({
            url: '/starinfo/index',   //请求地址
            method: 'post',//请求方式
            data: 'key=639e9d8b3e37974a3de3f2442bab91dc&name=刘德华',   //请求参数
            responseType: 'json',      //响应类型
            timeout: 1000,//超过1000毫秒自动走到catch
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',   //请求类型
            }
      })
            .then(data => console.log(data.data))   //成功响应结果
            .catch(err => console.log(err))    //失败响应结果


      axios.get('/starinfo/index?key=639e9d8b3e37974a3de3f2442bab91dc&name=刘德华')
            .then(data => console.log(data.data))   //成功响应结果
            .catch(err => console.log(err))    //失败响应结果

      axios.post('/starinfo/index', 'key=639e9d8b3e37974a3de3f2442bab91dc&name=刘德华')
            .then(data => console.log(data.data))   //成功响应结果
            .catch(err => console.log(err))    //失败响应结果
    </script>
</body>

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

查看完整版本: 【Web】0底子学Web—ajax、原生js实现ajax—get、原生js实现ajax—post、原