ajax学习笔记

Posted 2022-03-19 做个机灵鬼

什么是AJAX

AJAX 全称为Asynchronous javascript And XML，就是异步的 JS 和 XML。
通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：页面无刷新获取数据。 AJAX
不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

AJAX的优点

1.可以无需刷新页面而与服务器端进行通信。
2.允许你根据用户事件来更新部分页面内容。

AJAX的缺点

1.没有浏览历史，不能回退；
2.存在跨域问题；
3.SEO不友好；

ajax发送get请求(重点)

 <script>
      let btn = document.querySelector("button");
      let box = document.querySelector(".container");
      btn.onclick = () => 
        // 1.创建xhr实例对象
        const xhr = new XMLHttpRequest();
       //2.绑定监听
        xhr.onreadystatechange = () => 
          // 判断是否处于 第四状态，readayState有5个状态
          if (xhr.readyState === 4) 
            // 请求状态码 200到300之间表示请求成功
            //xhr.status请求状态响应码 200~300表示请求发送成
            if(xhr.status>=200 && xhr.status<300)
            console.log(xhr.response);
            box.innerhtml = `<h3>$xhr.response</h3>`;
            
          
        ;
        // 指定发生的:mothod url 参数
        // key=value&key=value  query参数的urlencoded编码形式
        // /小刘/age18 params参数
        //也可以不带任何参数
        xhr.open('GET','http://127.0.0.1:80/login_get?name=小刘&age=18');
        // xhr.open("GET", "http://127.0.0.1:80/login2/小刘/18");
        // 发生请求
        xhr.send();
      ;
    </script>

ajax发送post请求(重点)

post请求也可以携带 query和params参数 最重要的是可以携带请求体参数

<script>
      let btn = document.querySelector("button");
      let box = document.querySelector(".container");
      btn.onclick = () => 
        // 1.创建xhr实例对象
        const xhr = new XMLHttpRequest();

        xhr.onreadystatechange = () => 
          // 判断是否处于 第一个状态
          if (xhr.readyState === 4) 
            // 请求状态码 200到300之间表示请求成功
            // console.log(xhr.response);
            box.innerHTML = `<h3>$xhr.response</h3>`;
          
        ;
        //  post 可以携带 query参数和params参数
        // **携带请求体参数
        xhr.open("POST", "http://127.0.0.1:80/login_post");
        // 请求体的参数写在send里面
        //需要追加响应头用于识别请求体参数的编码的编码形式--urlencoded
        //  xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
         // xhr.send();
        //发生请求

        // 需要追加响应头用于识别请求体参数的编码的编码形式--json
        xhr.setRequestHeader('Content-type','application/json');
        let person = name:'tom',age:18;
        xhr.send(JSON.stringify(person));
      
      ;
    </script>

ajax解析json数据

 <script>
             let btn = document.querySelector('button');
             let box = document.querySelector('.container');
             btn.onclick = ()=>
               //函数体
            //    引入xhr
               const xhr= new XMLHttpRequest();
            //    绑定监听
                xhr.onreadystatechange = ()=>
                  
                  if(xhr.readyState === 4)
                      if(xhr.status>=200&&xhr.status<300)
                          //采用解构赋值的方式接受数据
                          let name,age,sex = xhr.response;
                          console.log(xhr.response);
                          box.innerHTML = `<ul>
                               <li>姓名:$name</li>
                               <li>年龄:$age</li>
                               <li>性别:$sex</li>
                               
                               
                            </ul>`
                      
                  
                
                //设置请求的mothod url
                xhr.open('GET','http://127.0.0.1:80/login_person');
                // 用于指定的返回数据格式
                xhr.responseType = 'json';
                xhr.send();
             
         </script>

ajax请求的jquery封装

 //jquery封装ajax请求(完整版)
         $.ajax(
            url:'http://127.0.0.1:80/login_jquery_get',
            method:'GET',
            data:school:'atguigu',//携带的数据
            dataType:'json',//配置响应数据的格式，告诉浏览器服务器返回的是json格式，浏览器自动解析成对象
            //success里面有三个参数
            success:(result,a,xhr)=>
                console.log(result);
                console.log(a);//请求的状态，success false
                console.log(xhr);//xhr
                console.log(school:'atguiug');
                content.append(`品牌：$result.name，价格:$result.price`)
            ,//请求成功的回调
            error:(xhr)=>console.log('请求出错',xhr);,
        ) 
        // 精简版

    /*     $.get('http://127.0.0.1:80/login_jquery_get__/小刘',school:'atguigu',(data)=>
            console.log(data);
        ,'json')
     */

同源策略

同源策略（Same-Origin Policy）由 Netscape 公司提出，是浏览器的一种安全策略。
同源的规则： 协议、域名、端口号 必须完全相同。
违背同源策略又称：跨域

非同源受到哪些限制？

1. Cookie不能读取；
2. DOM无法获得；
3. Ajax请求不能获取数据//可以发送不能获取

跨域的解决重点

1.JSONP是什么
JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持get请求。
2.JSONP怎么工作的？
在网页有一些标签天生具有跨域能力，比如：img link iframe script等。
JSONP就是利用了script标签发送请求不受同源策略的限制的特点。

 <!-- jsonp解决跨域的问题实质就是 通过动态创建script标签发请求，绕开了xhr
        同源策略，有种前端定义函数，后端调用函数的感觉
        -->
    <script type="text/javascript">
      let btn = document.querySelector("button");
      /*  function demo(a)
           console.log(a);
        */
      btn.onclick = () => 
      //jsonp解决跨域的步骤
        let btn = document.querySelector("button");
        let scriptNode = document.createElement("script");
        scriptNode.src = "http://localhost:80/login_jsonp_get?callback=demo";
        //   往页面添加script标签
        document.body.appendChild(scriptNode);
        window.demo = (a) => 
          console.log(a);
        ;
      ;
    </script>

cros解决跨域

CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持所有常见的请求。
2.CORS怎么工作的？
CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。
3.服务器端常用设置
response.set("Access-Control-Allow-Origin", "*");
response.set(“Access-Control-Expose-Headers”, “");
response.set(“Access-Control-Allow-Methods”, "”);
等等
备注：后端一般借助：cors库批量编写响应头
get 和post为简单请求 设置一个响应头即可，但put delete等等为复杂请求 会存在预请求(一次请求会发生两次)，所有需要设置一组响应头才可以解决跨域 http有八大请求