AJAX

form表单是如何请求（发起）数据的

form表单是用来提交前端数据给后台的 form表单提交数据会刷新页面的（这是form表单的特性）
action 表示 数据提交的地址
method 表示 数据提交的方式

因为form表单在每次提交数据到后台中会刷新页面这个弊端，ajax才会盛行

get方式提交数据

<form action="https://baidu.com/" method="get" >
    用户名字：<input type="text"  name="username"><br>
    密码：<input type="password" name="password"><br>
    <input type="submit">
</form>

form表单提交之前的地址栏

form表单提交之后的地址栏

通过form表单，get方式提交数据，提交数据之后的地址栏的huasheng和123是你在页面的input框中填写的内容。

username和password是你在表单标签里面的name属性所填的值，后台先检查你的name属性那么你在input框中name属性写的是什么那么你的地址栏就会出现。

get方式提交的特点域名后面有个/?，接下来就是 username=huasheng（这是一种键值对的形式）username是name属性的内容,huasheng是用户在在页面的input框中填写的
key1=value1&key2=value2每一次提交都会用连字符&隔开（这是提交了2回数据）这样就能给你的数据传到指定的地址了

这是淘宝的地址栏信息的长度

通过window.location.href.length的方式获取了length长度，这已经是很多的信息了，那么通过get方法发送的信息不可能是几G的，这样的化length长度都几万了，所以通过get方式发送的数据体量小

get方式
是把数据显示在地址栏中提交，所以这种提交数据的方式并不安全（信息都在地址栏中显示所有不安全）发送的数据体量小

post方式提交数据

<form action="https://baidu.com/" method="post" >
    用户名字：<input type="text"  name="username"><br>
    密码：<input type="password" name="password"><br>
    <input type="submit">
  </form>

通过post的方式提交数据，数据并不在地址栏中

post方式 ，发送的数据会显示在Network面板对应的网络请求中的Form Data


post方式
发送的数据会显示在Network面板对应的网络请求中的Form Data（发送的信息相对于get方式发送数据是安全的）可以发送的大量数据（因为数据发送不在地址栏是单独的一个地方）

AJAX

名称： AJAX 是Asynchronous javascript and XML(异步的js 和 xml)的简称

AJAX 向服务器发送数据的过程

第一步

var xhr = new XMLHttpRequest();//生成ajax对象 （第一步）

通过new启动了XMLHttpRequest函数(JS内置的构造函数)通过启动的构造函数会生成一个对象

第二步

//以get方式异步（true）的向https://jsonplaceholder.typicode.com/posts发送数据(类似于填写快递单)（第二步）
 xhr.open("get","https://jsonplaceholder.typicode.com/posts?username=huasheng&password=123456",true);

open是一个函数，第一个参数是发送数据提交的方式，第二个参数通过xhr这个对象向某个地址发送请求?后面表示发送的数据&表示连接多组数据，第三个参数true表示异步

第三步

//发送数据
 xhr.send(null);//（第三步）这种才是发送数据

第四步

//当ajax对象上的readyState改变的时候就会触发这个函数
      xhr.onreadystatechange = function(){
         console.log(xhr.readyState)
      };

当你的状态码发生变化的时候就会触发这个函数（事件）一般情况下这个事件都写在最后面

https://jsonplaceholder.typicode.com/posts这个网站作为专门为开发人员提供假数据浏览器不会进行拦截的（没有跨域问题）

xhr.readyState（AJAX对象的状态码）

• 状态码是0 ，AJAX对象已创建，但还没有调用open方法
• 状态码是1 ， open方法调用成功，但还没有调用send方法
• 状态码是2，send方法已经调用，尚未接收服务器发送过来的数据
• 状态码是3，正在接收服务器发送的数据，但还没有接收完成
• 状态码是4，已经接收完所有从服务器发送过来的数据

重要的是：状态码是4的时候，因为你状态码一旦是4可以接收网址给我们传过来的数据了

为什么用xhr.send(null)发送数据时会报错

理论上我们在提交数据的时候系统会给我们返回还一些数据，但是他现在报错了，那是为什么

意思是现在的地址去百度的地址已经被阻止了被同源策略阻止了，http协议不允许从一个域名到另外一个域名的，就是现在的地址和需要提交的地址是不同源的，同源是指协议，域名，端口都相同

是浏览器阻止你发送的信息（浏览器是为了安全的问题他是不能让你这个非同源的地址向另一个发送请求的）是浏览器阻止你了

这个报错是因为浏览器不让你跨域才报报错，浏览器为了你的安全问题所考虑的

Chrome跨域问题（降低浏览器的安全）

第一步

找到你谷歌浏览器所在的文件位置

新建一个 chrome.exe 的快捷方式, 并且关闭所有的chrome浏览器

第二步

设置参数，关闭 同源策略

--disable-web-security  --user-data-dir//设置这段代码

第三步

打开chrome浏览器之后效果如下

出现上面这种效果就成功了

获取服务器发送过来的数据

通过get方式获取数据

      var xhr = new XMLHttpRequest();

      xhr.open("get",'https://jsonplaceholder.typicode.com/posts',true);
      //通过post方式向这个地址发送数据，这个地址是提供假数据的地址（不会报跨域问题）

      xhr.send(null);//发送数据

      xhr.onreadystatechange = function(){
         if (xhr.readyState===4) {//当你状态码是4的时候，接收服务器发送过来的数据
         //如果这个地址的服务器内部出错了那么也获取不到正常的数据
            if (xhr.status>=200&&xhr.status<300||xhr.status==304) {
               //必须是你的http状态码是200-300的时候才能得到数据，对服务器的状态码做一下筛选
               //xhr.status存储http的状态码
               console.log(xhr.responseText);
               //收服务器发送过来的数据是存储在responseText这个属性中的他是一个字符串
            }
         }
      }

那这么多的字符串是没有办法使用的，那该怎么办

var xhr = new XMLHttpRequest();

      xhr.open("get",'https://jsonplaceholder.typicode.com/posts',true);
      //通过post方式向这个地址发送数据，这个地址是提供假数据的地址（不会报跨域问题）

      xhr.send(null);//发送数据

      xhr.onreadystatechange = function(){
         if (xhr.readyState===4) {//当你状态码是4的时候，接收服务器发送过来的数据
            //如果这个地址的服务器内部出错了那么也获取不到正常的数据
            if (xhr.status>=200&&xhr.status<300||xhr.status==304) {
            //必须是你的http状态码是200-300的时候才能得到数据，对服务器的状态码做一下筛选
               //xhr.status存储http的状态码
               console.log(JSON.parse(xhr.responseText));
               //序列化数据，解析对应的字符串数据的，解析的是数组或者是对象
            }
         }
      }

通过post方式发送数据

     var xhr = new XMLHttpRequest();

      xhr.open("post",'https://jsonplaceholder.typicode.com/posts',true);
      //通过post方式向这个地址发送数据，这个地址是提供假数据的地址（不会报跨域问题）

      xhr.setRequestHeader('content-type','application/x-www-urlencoded');
      //设置请求头（必须要写这行代码）post发送数据的基本格式

      xhr.send('name=huasheng');

      xhr.onreadystatechange = function(){
         if (xhr.readyState===4) {
               console.log(xhr.responseText);
               //收服务器发送过来的数据是存储在responseText这个属性中的他是一个字符串
         }
      }

一般情况下你想让一个地址获取数据的话一可以用 get方式获取数据（既能获取也能发送）

一般情况下你想让一个地址发送数据的话可以用 post方式发送数据（既能获取也能发送）

总结

• xhr.readyState获取AJAX对象的状态码
• xhr.status获取http协议的状态码
• xhr.responseText接收服务器发送过来的数据
• xhr.setRequestHeader('content-type','application/x-www-urlencoded')设置请求头post发送数据的基本格式
• JSON.parse(类似于数组/对象的字符串) 序列化数据
• JSON.stringify(数组/对象) 反序列化数据 结果是字符串

http协议状态码（常用方法）

封装ajax函数

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<body>
   <div id="btn">点击获取数据</div>
   <div id="content"></div>
   <script src="ajax.js"></script>
   <script>
   // 设置点击事件
    var oBtn = document.getElementById('btn');
    var oContent = document.getElementById("content");
    oBtn.addEventListener("click",handleClick,false);

    function handleClick(){
         ajax({//放置在对象里，避免两个形参搞混
              method:'get',//以get方式获取数据
              url:'https://jsonplaceholder.typicode.com/photos'
              ,//去这个地址获取数据（只要是这个网站给咱们的数据变了那么这张页面就变了）
              date:{//通过get方式要发送的数据
                    username:"huasheng",
                    age:28,
         },
         success:function(res){//当你获取到数据之后（成功），执行回调函数
              var str = "";//储存变量完成的文章
              //遍历对象（获取到的一个大对象）
              for(var i=3999;i<res.length;i++){
                 var title = res[i].title;//获取每一项的title属性
                 var img = res[i].thumbnailUrl;//获取每一项的thumbnailUrl属性
                 var span = res[i].id;//储存片数
                 str +=  '<h3>'+title+'</h3><img src="'+img+'"><span>第'+span+'张</span>';
              }
              oContent.innerHTML = str;//映射到页面中
         },//当你获取数据失败时
              error:function(status){
              alert(status);
         }
      });
   };
   </script>
</body>
</html>

ajax封装函数

  function ajax(json){
      var xhr = new XMLHttpRequest();//生成ajax对象

      var method = json.method;//存储获取数据的方式
      var url = json.url;//存储去哪个地址获取数据
      var date = json.date||{};//通过get方式要发送的数据，如果没有传数据就是{}对象
      var success = json.success;//存储回调函数
      var error = json.error;//当你获取数据失败时（服务器出错）

      switch (method) {//区分是get方式还是post方式发送数据
         case 'get'://如果是get方式发送数据
               xhr.open(method,url+'?'+fn(),true);
               //定义向哪个服务器地址发送数据，以及发送数据的方法
               xhr.send(null);//发送请求
         break;
         case 'post'://如果是post方式发送数据
               xhr.open(method,url,true);//定义向哪个服务器地址发送数据，以及发送数据的方法
               xhr.setRequestHeader('content-type','application/x-www-urlencoded');
               //设置请求头post发送数据的基本格式
               xhr.send(fn());//发送请求
         break;
      };

      xhr.onreadystatechange = function(){//获取服务器发送的响应数据
          if (xhr.readyState===4) {//当你的状态码是4的时候走一下代码块
             if (xhr.status>=200&&xhr.status<300||xhr.status===304) {
             //获取http协议的状态码（成功）
                 success(JSON.parse(xhr.responseText));
                 //接收服务器发送过来的数据并且 序列化数据
             }else{//（失败）
                 error(xhr.status);
             }
          }
      }

      fn(date);//把date这个要发送的数据给传进去
     //fn这个函数的作用是把 {username:"huasheng,age:28"} -->
     // 'username=huasheng&age=28'这样的字符串
      function fn(obj){
         var arr = [];//存储遍历完成的数据
         //遍历对象
        for(var key in obj){
            arr.push(key + '=' + obj[key]);//把这个字符串添加到这个数组里面
        }
        return arr.join('&');//用join方法连接起来
     }
 }

补充debugger断点

断点是指，整个JS程序从前到后的连续的（没有异步的情况下从上到下依次执行）如果在某一个点debugger是指不会往前执行我给你打断debugger是给程序打个断点让他停下

Chrome跨域问题

console.log(1)
 debugger
 console.log(2)

JS程序从前往后加载打印1是没有被断点的

被断点之后的程序会显示这个标准，点击红色圈就会消除断点，点击红色圈后面的就会差找从哪里开始断点的

最终打印出来的结果