第11节 ajax

[TOC]

ajax介绍
如何使用ajax请求后台数据
http状态码
get和post的区别
axios: 封装ajax请求的js库
跨域

(1) ajax介绍(背诵)
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

(2) 如何使用ajax请求后台数据
概念解释:
前端、后台、数据库
接口，接口地址

获取后台数据步骤(背诵)：

创建一个ajax对象
设置ajax的请求类型和请求地址(接口地址)
发送请求
通过注册(绑定)onreadystatechange监听请求情况

注: 通过控制台network选项可以查看请求
具体代码:

// get请求
<script>
    // 1.创建ajax对象
    var xhr = new XMLHttpRequest();
    // 2.设置请求类型(get,post)和请求参数
    // 参数1-请求类型 参数2-请求地址(可以带请求参数)
    xhr.open('get','http://huruqing.cn:3000/api/film/getList?pageNum=2&pageSize=3');
    // 3.发送请求
    xhr.send();
    // 4.注册(绑定)onreadystatechange监听请求情况
    xhr.onreadystatechange = function() {
        // readyState的值为4表示跟后台已经成功连接
        // xhr.status=200表示返回正确的数据,status叫做http的状态码
        if (xhr.readyState === 4 && xhr.status === 200) {
            // responseText存放这后台给我吗返回的数据
            console.log(xhr.responseText)
        }
    } 
</script>


// post请求
<script>
    //创建异步对象
    var xhr = new XMLHttpRequest();
    //设置请求的类型及请求地址
    xhr.open("post", "http://huruqing.cn:3000/api/film/getList");
    //设置Content-Type,post请求必须设置请求头
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    //发送请求
    xhr.send("pageNum=2&pageSize=3");
    xhr.onreadystatechange = function () {
        // 这步为判断服务器是否正确响应
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.responseText);
        }
    };
</script>

(3) http状态码(背诵)

2XX（成功处理了请求状态）
  200 服务器已经成功处理请求，并提供了请求的网页
  201 用户新建或修改数据成功
  202 一个请求已经进入后台
  204 用户删除成功
3XX（每次请求使用的重定向不要超过5次）
    304 网页上次请求没有更新，节省带宽和开销
4XX（表示请求可能出错，妨碍了服务器的处理）
  400 服务器不理解请求的语法
  401 用户没有权限（用户名，密码输入错误）
  403 用户得到授权（401相反），但是访问被禁止
  404 服务器找不到请求的网页，
5XX（表示服务器在处理请求的时候发生内部错误）
  500 服务器遇到错误，无法完成请求
  503 服务器目前无法使用（超载或停机维护）

(4) GET和POST的区别(背诵)

get请求特点:

get 一般用于获取数据
get请求如果需要传递参数，那么会默认将参数拼接到url的后面；然后发送给服务器；
get请求传递参数大小是有限制的；是浏览器的地址栏有大小限制；
get安全性较低
get一般会走缓存，为了防止走缓存，给url后面每次拼的参数不同；放在?后面，一般用时间戳

post请求特点:

post 一般用于发送数据
post传递参数，需要把参数放进请求体中，发送给服务器；
post请求参数放进了请求体中，对大小没有要求；
post安全性比较高；

post请求不会走缓存；

(5) axios: 一个封装了ajax请求的js库

一个cdn网站: https://www.bootcdn.cn/

<!DOCTYPE html>
<html lang="en"> 
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body> 
  <script>
      // get请求 参数1-url地址,参数2-请求参数{params:{xxx:xxx}}
      // then函数处理成功的情况
      // catch函数处理失败的情况
      var url = 'http://huruqing.cn:3000/api/film/getList';
      axios.get(url,{
          params: {
              pageNum: 2,
              pageSize: 3
          }
      }).then(function(result){
         console.log('成功的数据',result);
      }).catch(function(error){
         console.log('失败的信息:',error);
      }) 

      // post请求
      axios.post(url,{ pageNum: 2, pageSize: 3 }).then(function(result){
         console.log('成功的数据',result);
      }).catch(function(error){
         console.log('失败的信息:',error);
      }) 
  </script>    
</body>
</html>

(6) 跨域

1. 什么叫跨域(背诵)

// 接口地址: http://huruqing.cn:3009/getList 浏览器有同源策略，只有当“协议”、“域名”、“端口号”都相同时，才能称之为是同源，其中有一个不同，即是跨域。

注解(不用背):
那么同源策略的作用是什么呢？同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
为什么需要跨域呢？一是前端和服务器分开部署，接口请求需要跨域，二是我们可能会加载其它网站的页面作为iframe内嵌。

2. 跨域的解决方案(背诵)

jsonp跨域
使用代理跨域
1. vue在devServer配置代理进行跨域
2. Nginx配置反向代理进行跨域
后台头部设置Access-Control-Allow-Origin进行配置跨域若设置Access-Control-Allow-Origin:”*”意思是所有人都可以访问
其他方式：
1. web socket (html5新特性)
2. document.domain + iframe
3. location.hash + iframe
4. window.name + iframe
5. postMessage
  (7) jsonp跨域
  一个jsonp接口地址: http://huruqing.cn:3009/getData
jsonp跨域原理(背诵)

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。因为script不受同源策略限制。Jsonp 就是利用

目录

(1) ajax介绍(背诵)

(2) 如何使用ajax请求后台数据