关于AJAX请求，发送和在不同场景的写法

AVIC_501

已于 2023-08-29 09:53:48 修改

阅读量186

点赞数

分类专栏： AJAX 文章标签： ajax 笔记 okhttp

于 2021-08-07 14:42:40 首次发布

本文链接：https://blog.csdn.net/Li5306/article/details/119479618

版权

AJAX 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.0 ajax封装

ajax请求数据的过程是固定的 => ajax应该封装. => 封装成插件.
每次请求ajax,什么东西不一样?
1:请求方式
2:url不一样
3:参数不一样
4:请求数据成功之后的做的事情不一样.(回调函数)

1.0.1 ajax 代码

<body>

  <ul></ul>
  
  <script src='js/ajax.js'></script>
  <script>

    const [oUl] = document.querySelectorAll('ul');
    
    ajax({
      method: 'GET',
      url: 'http://192.168.x.xx:8080/ajax01/php/getNewsList.php',
      // 请求数据成功之后做的事情.
      success(res) {
        // console.log(res);
        // 服务器返回的结果
        let data = JSON.parse(res);
        
        data.forEach(({title, date}, i) => {
          oUl.innerHTML += `
            <li>
              <a href='#'>${title}</a>
              <span>${date}</span>
            </li>
          `
        });
      }
    });

  </script>

1.0.2 getNews.php

<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
header("Access-Control-Allow-Origin:*");

$news = array(
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了"伏地魔"','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),

	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了"伏地魔"','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),

	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了"伏地魔"','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了"伏地魔"','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
);

echo json_encode($news);

1.1.0 ajax代码

<body>

  <ul></ul>
  
  <script src='js/ajax.js'></script>
  <script>

    const [oUl] = document.querySelectorAll('ul');
    
    ajax({
      // 请求的方式
      method: 'GET',
      // 服务器地址
      url: 'http://192.168.x.xx:8080/ajax01/php/getNews.php',
      // 请求参数。
      data: 'num=5',

      // 请求数据成功之后做的事情.
      success(res) {
        // console.log(res);
        // 服务器返回的结果
        let data = JSON.parse(res);
        
        data.forEach(({title, date}, i) => {
          oUl.innerHTML += `
            <li>
              <a href='#'>${title}</a>
              <span>${date}</span>
            </li>
          `
        });
      }
    });

  </script>

</body>

1.1.1 getNews.php

<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
header("Access-Control-Allow-Origin:*");

$num = $_GET['num'];

$news = array(
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了"伏地魔"','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了"伏地魔"','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了"伏地魔"','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了"伏地魔"','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了"伏地魔"','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了"伏地魔"','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
	array('title'=>'sadjlsdj拉萨看得见是老款的煎熬了','date'=>'2014-1-6'),
);

echo json_encode(array_slice($news, 0, $num));

1.2.0 ajax代码

<body>
  
  <script src="js/ajax.js"></script>
  <script>

    ajax({
      method: 'POST',
      url: 'http://192.168.x.xx:8080/ajax01/php/1.post.php',
      data: 'username=陈虹伊&age=34',
      success(res) {
        console.log(res);
      }
    });

  </script>

</body>

1.post.php

<?php
	header('content-text:text/html; charset="utf-8"');
	error_reporting(0);
	header("Access-Control-Allow-Origin:*");
	
	//echo  1;
	
	//$_REQUEST
	$username = $_POST['username'];
	$age	  = $_POST['age'];

	echo "名字:{$username} , 年龄: {$age}";

<body>
  
  <script src="js/ajax.js"></script>
  <script>

    ajax({
      method: 'POST',
      url: 'http://192.168.x.xx:8080/ajax01/php/1.post.php',
      data: {
        username: '陈虹伊',
        age: 32
      },
      success(res) {
        console.log(res);
      }
    });

  </script>

</body>

1.post.php

<?php
	header('content-text:text/html; charset="utf-8"');
	error_reporting(0);
	header("Access-Control-Allow-Origin:*");
	
	//echo  1;
	
	//$_REQUEST
	$username = $_POST['username'];
	$age	  = $_POST['age'];

	echo "名字:{$username} , 年龄: {$age}";

<body>
  
  <script src="js/ajax.js"></script>
  <script>

    ajax({
      method: 'POST',
      url: 'http://192.168.x.xx:8080/ajax01/php/getList.php',
      // 将服务器返回的结果默认转换为json格式.
      dataType: 'json',
      success(res) {
        console.log(res);
      }
    });

  </script>

</body>

getList.php

<?php
	header('content-text:text/html; charset="utf-8"');
	error_reporting(0);
	header("Access-Control-Allow-Origin:*");
	
	//$arr1 = array('lily', 'momo', 'zhangsan');
	
	$arr2 = array('username'=>'lily', 'age'=>32);
	
	//echo 'lily,momo,zhangsan';
	
	echo json_encode($arr2);

2.0 JQ的ajax写法

<body>
  
  <button>新闻列表</button>
  <ul></ul>

  <script src="js/jq.js"></script>

  <script>

    $('button').on('click', function() {
      // jq的ajax方法.它封装了ajax的所有过程.我们只需要使用它时传递不同的参数即可.
      $.ajax({
        // 请求方式
        type: 'GET',
        // 服务器url
        url: 'http://192.168.x.xx:8080/ajax01/php/getNewsList.php',
        // 返回的数据格式
        dataType: 'json',
        // 设置请求头。
        // headers:{
        //   contentType: 'application/x-www-form-urlencoded'
        // },

        // 请求发送的参数
        // data: {
        //   a: 10,
        //   b: 20,
        // },

        // 超时时间.请求时长超过3秒就直接终止请求.
        timeout: 3000,

        // 请求数据成功之后做的事情
        success(res) {
          // console.log(res);
          res.forEach(({title, date}, i) => {
            // 老内容
            let str = $('ul').html();
            // 新内容
            let newStr = `
              <li>
                <a href='#'>${title}</a>
                <span>${date}</span>
              </li>
            `;
            // 老内容 + 新内容
            $('ul').html(str + newStr);
          });
        },
        // 请求失败进行的回调
        error(code) {
          console.log(code);
        }
      });
    })

  </script>

</body>

2.0.1 JQ的AJAX简写方法

<body>
  
  <button>新闻列表</button>
  <ul></ul>

  <script src="js/jq.js"></script>

  <script>

    $('button').on('click', function() {

      // get请求方法的简写.第一个参数是url,第二个参数就是请求到数据之后的回调.
      // $.get('http://192.168.x.xx:8080/ajax01/php/getNewsList.php', function(res) {
      //   renderList(JSON.parse(res));
      // });
      
      // get请求传参num.
      // $.get('http://192.168.4.79:8080/ajax01/php/getNews.php', {num: 5} ,function(res) {
      //   renderList(JSON.parse(res));
      // });

      // 请求数据成功之后做的事情,还可以写在then中.(Promise)
      $.get('http://192.168.4.79:8080/ajax01/php/getNews.php', {num: 5})
      .then(function(res) {
        renderList(JSON.parse(res));
      });

    // jq的ajax方法.它封装了ajax的所有过程.我们只需要使用它时传递不同的参数即可.
    // $.ajax({
    //     // 请求方式
    //     type: 'GET',
    //     // 服务器url
    //     url: 'http://192.168.4.79:8080/ajax01/php/getNewsList.php',
    //     // 返回的数据格式
    //     dataType: 'json',
    //     // 请求数据成功之后做的事情
    //     success(res) {
    //       console.log(res);
    //       渲染ul.
    //       renderList(res);
    //     }
    //   });

    });

    // 渲染ul的方法.
    function renderList(res) {
      res.forEach(({title, date}, i) => {
        // 老内容
        let str = $('ul').html();
        // 新内容
        let newStr = `
          <li>
            <a href='#'>${title}</a>
            <span>${date}</span>
          </li>
        `;
        // 老内容 + 新内容
        $('ul').html(str + newStr);
      });
    }

  </script>

</body>

2.0.2

<body>
  
  <button>新闻列表</button>
  <ul></ul>

  <script src="js/jq.js"></script>

  <script>

    $('button').on('click', function() {

      // get请求方法的简写.第一个参数是url,第二个参数就是请求到数据之后的回调.
      $.get('http://192.168.x.xx:8080/ajax01/php/getNewsList.php', function(res) {
        renderList(JSON.parse(res));
      });
      
      // get请求传参num.
      $.get('http://192.168.x.xx:8080/ajax01/php/getNews.php', {num: 5} ,function(res) {
        renderList(JSON.parse(res));
      });

      // 请求数据成功之后做的事情,还可以写在then中.(Promise)
      $.get('http://192.168.x.xx:8080/ajax01/php/getNews.php', {num: 5})
      .then(function(res) {
        renderList(JSON.parse(res));
      });

    // jq的ajax方法.它封装了ajax的所有过程.我们只需要使用它时传递不同的参数即可.
    $.ajax({
        // 请求方式
        type: 'GET',
        // 服务器url
        url: 'http://192.168.x.xx:8080/ajax01/php/getNewsList.php',
        // 返回的数据格式
        dataType: 'json',
        // 请求数据成功之后做的事情
        success(res) {
          console.log(res);
          渲染ul.
          renderList(res);
        }
      });

    });

    // 渲染ul的方法.
    function renderList(res) {
      res.forEach(({title, date}, i) => {
        // 老内容
        let str = $('ul').html();
        // 新内容
        let newStr = `
          <li>
            <a href='#'>${title}</a>
            <span>${date}</span>
          </li>
        `;
        // 老内容 + 新内容
        $('ul').html(str + newStr);
      });
    }

  </script>

2.0.3

$.ajax(); => 全写 => 可以做更多的配置项.=> 写起来麻烦一点
$.get(); => get简写 => 没有办法配置太多配置项 => 写起来简单一点
$.post(); => post简写 => 没有办法配置太多配置项 => 写起来简单一点
配置项是什么?(config)(setting)
如果参数是一个纯对象,则这个纯对象中的每一个属性都叫配置项.
$.ajax()方法可以设置多少配置项?都是那些配置项?

<body>
  
  <button>新闻列表</button>
  <ul></ul>

  <script src="js/jq.js"></script>

  <script>

    // post的简写。第二个参数是对象，请求成功的回调写在then中。
    $.post('http://192.168.x.xx:8080/ajax01/php/1.post.php', {
      username: '邓京京',
      age: 32
    }).then(res => {
      console.log(res);
    });

  </script>

</body>

2.0.4 Axios

<body>
  
  <script src="js/axios.js"></script>
  <script>

    // axios是一个第三方的基于Promise的http库 => ajax插件 => ajax只能进行http协议请求.

    // 通过axios方法进行ajax数据请求。
    axios({
      method: 'GET',
      // get传参可以通过url传参.
      // url: 'http://192.168.x.xx:8080/ajax01/php/1.get.php?username=mimi&age=32',
      url: 'http://192.168.x.xx:8080/ajax01/php/1.get.php',
      
      // get传参,还可以通过params来传递.
      params: {
        username: '小陈',
        age: 32,
      },

      // post,put等请求方法发送参数用data发送
      // data: 'a=10&b=20'

      // 配置请求头.(和jq一致)
      // headers: {'X-Requested-With': 'XMLHttpRequest'},

      // 设置超时
      // timeout: 3000,

    // then用于书写请求数据成功之后的回调.
    }).then(res => {
      // res是服务器返回的一个对象(这个响应对象是经过axios封装的)
      console.log('res', res);

      // data属性才是服务器返回的结果.
      console.log('res.data', res.data);
    });

  </script>

</body>

2.0.5 Axios 实现列表

<body>
  
  <input type="text">
  <button>新闻列表</button>
  <ul></ul>

  <script src="js/jq.js"></script>
  <script src="js/axios.js"></script>

  <script>

    $('button').on('click', function() {
      axios({
        method: 'GET',
        url: 'http://192.168.x.xx:8080/ajax01/php/getNews.php',
        params: {num: $('input').val()}
      }).then(({data}) => {
        $('ul').empty();
        data.forEach(({title, date} ,i) => {
          $('ul')[0].innerHTML += `
            <li>
              <a href='#'>${title}</a>
              <span>${date}</span>
            </li>
          `
        })
      })  
    });

  </script>

<body>
  
  <input type="text">
  <button>新闻列表</button>
  <ul></ul>

  <script src="js/jq.js"></script>
  <script src="js/axios.js"></script>

  <script>

   $('button').on('click', function() {
      axios({
        method: 'GET',
        url: 'http://192.168.x.xx:8080/ajax01/php/getNewsList.php',
      }).then(({data}) => {
        data.forEach(({title, date} ,i) => {
          $('ul')[0].innerHTML += `
            <li>
              <a href='#'>${title}</a>
              <span>${date}</span>
            </li>
          `
        })
      })  
    })

  </script>

2.0.6 Aaxios的get简写

<body>
  
  <input type="text">
  <button>新闻列表</button>
  <ul></ul>

  <script src="js/jq.js"></script>
  <script src="js/axios.js"></script>

  <script>

    $('button').on('click', function() {
      // axios的简写.url是第一个参数.请求要发送的参数写在第二个参数.
      axios.get('http://192.168.x.xx:8080/ajax01/php/getNews.php', {
        params: {num: $('input').val()}
      }).then(({data}) => {
        // 请求数据成功后渲染li
        renderList(data);
      });
    });

    function renderList(data) {
      // 清空ul内容
      $('ul').empty();
      // 循环插入li
      data.forEach(({title, date} ,i) => {
        $('ul')[0].innerHTML += `
          <li>
            <a href='#'>${title}</a>
            <span>${date}</span>
          </li>
        `
      });
    }

  </script>

2.0.7 Aaxios的post简写

<body>
  
  <input type="text">
  <button>新闻列表</button>
  <ul></ul>

  <script src="js/jq.js"></script>
  <script src="js/axios.js"></script>

  <script>

    $('button').on('click', function() {
      // axios的简写.url是第一个参数.请求要发送的参数写在第二个参数.
      // post发送参数是通过body发送的.参数通过body发送有很多格式.
      // 不同的格式发送参数时的写法是不一样的.
      // appliaction/x-www-form-urlencoded => 只能通过序列化字符串发送.
      // application/json => 只能发json字符串.
      axios.post('http://192.168.4.79:8080/ajax01/php/1.post.php', 'username=mimi&age=32')
      .then(({data}) => {
        renderList(data);
      });
    });

    function renderList(data) {
      console.log(data);
    }

  </script>

</body>

2.0.8 baseUrl

<body>
  
  <input type="text">
  <button>新闻列表</button>
  <ul></ul>

  <script src="js/jq.js"></script>
  <script src="js/axios.js"></script>

  <script>

    // 最终请求的url === baseURL + 配置项的url
    // 全局配置baseURL。所有的请求都基于这个URL。
    axios.defaults.baseURL = 'http://192.168.x.xx:8080/ajax01/php/';
    
    $('button').on('click', function() {
      axios({
        url:'getNews.php',
        method: 'GET',
        params: {num: 5},
        // baseURL: 'http://192.168.x.xx:8080/ajax01/php/'
      }).then(({data}) => {
        renderList(data)
      });

      axios({
        url:'getNewsList.php',
        method: 'GET',
        // baseURL: 'http://192.168.x.xx:8080/ajax01/php/'
      }).then(({data}) => {
        renderList(data)
      })
    });

    function renderList(data) {
      console.log(data);
    }

  </script>

</body>

2.0.9 实例化Axios

<body>
  
  <input type="text">
  <button>新闻列表</button>
  <ul></ul>

  <script src="js/jq.js"></script>
  <script src="js/axios.js"></script>

  <script>

    // 最终请求的url === baseURL + 配置项的url
    // 全局配置baseURL。所有的请求都基于这个URL。
    // axios.defaults.baseURL = 'http://192.168.x.xx:8080/ajax01/php/';

    // 实例化一个requestAAA，则所有同requestAAA进行的ajax请求的baseURL都是http://aaa:8080/
    // create能够填写的配置项和axios的配置项完全相同.
    let requestAAA = axios.create({
      baseURL: 'http://aaa:8080/',
      timeout: 3000
    });

    // 实例化一个requstBBB, 所有通过requestBBB进行的ajax请求的baseURL都是'http://bbb:8080/'
    let requestBBB = axios.create({
      baseURL: 'http://bbb:8080/',
      timeout: 4000
    })
    
    $('button').on('click', function() {
      axios({
        url:'http://aaa:8080/getNews.php'
      });

      requestAAA({
        url: 'getNews.php'
      });

      // --------------------------------------------

      axios({
        url:'http://aaa:8080/getList.php'
      });

      requestAAA({
        url: 'getList.php'
      });

      // --------------------------------------------

      axios({
        url:'http://bbb:8080/getNews.php'
      });

      requestBBB({
        url: 'getNews.php'
      })

      // --------------------------------------------

      axios({
        url:'http://bbb:8080/getList.php'
      });

      requestBBB({
        url: 'getList.php'
      })
    });

    function renderList(data) {
      console.log(data);
    }

  </script>

</body>

2.1.0.跨域的问题

跨域报错.从originA请求originB报错.
Access to XMLHttpRequest at 'http://192.168.x.xx:8080/ajax02/php/getNewsList.php'
from origin 'http://127.0.0.1:5500'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
跨域报错 => 不让进行某种请求. => 为了安全有这个限制.
同源策略 => 只有相同origin的两个文件才能进行数据通信.
跨域 => 违反同源策略. => 两个进行数据通信的url的origin只要是不一样的,就一定会形成跨域.
如何算跨域 => origin由3个部分组成,分别是协议,域名(ip),端口.只要这3个部分有其中一个不一样,都算跨域.
http://127.0.0.1:5500/01作业.html => 前面html的url.
http://192.168.x.xx:8080/ajax02/php/getNewsList.php => 后端的url.
以上两个url的origin不一样,因此,通过前端url去请求后端url,一定会形成跨域.(请求会失败).
本地存储和cookie有一个共同点 => 只有同源页面间才能共享本地存储和cookie存储的数据.(受同源策略影响).

2.1.1 解决跨域问题

ajax跨域解决

1:代理 => A请求C是跨域,B请求C不是跨域,则通过A去请求B来完成间接请求C.B就是A的代理.
2:cors => 通过设置一个header来完成.header("Access-Control-Allow-Origin:*") => *表示可以运行所有的origin来请求本文件
3:jsonp => 前端后端需要同时配合.(已经过时).(不要说jsonp了)
请描述下如何解决跨域.
请描述一下jsonp的原理.

AVIC_501

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于AJAX请求，发送和在不同场景的写法

1.0 ajax封装ajax请求数据的过程是固定的=>ajax应该封装.=>封装成插件. 每次请求ajax,什么东西不一样? 1:请求方式 2:url不一样 3:参数不一样 4:请求数据成功之后的做的事情不一样.(回调函数)1.0.1 ajax 代码<body> <ul></ul> <script src='js/ajax.js'></script>...
复制链接

扫一扫