AJAX及其应用

AJAX工作原理

​ Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求

XML简介

• XML是可扩展标记语言
• 被设计用来传输和存储数据（可用于保存一些订单数据，商品数据，音乐等等）
• XML和html类似，不同的是html是预定义标签（提前定义好的 ），XML没有预定义标签，全部都是自定义标签，用于表示一些数据。

//事先自定义好xml标签
name='小明';
age='18';
sex='男';
//定义好后可以使用
<student>
<name>孙语空</name>
<age>18</age>
<sex>男</sex>
</student>

后被JSON替代

XMLHttpRequest

​ XMLHttpRequest对象，顾名思义：是基于XML的HTTP请求,是一个浏览器接口,XMLHttpRequest 用于在后台与服务器交换数据。

我们通过XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL获取数据。

属性

• onreadystatechange:该属性用于指定XMLHttpRequest对象状态改变时的事件处理函数。
• readyState：该属性用于获取XMLHttpRequest对象处理状态(0（初始化，最开始的值iu是0） 1（表示open方法已经调用完毕） 2（表示send方法调用完毕） 3（表示服务端返回的部分结果）4(服务端返回的所有结果))
• responseText:该属性用于获取服务器响应的XML文档对象
• status：该属性是服务器返回的状态码，只有当服务器的响应已经完成时，才会有该状态码。如200 300 404.
• statusText:该属性是服务器返回的状态文本信息，只有当服务器的响应已经完成时，才会有该状态文本信息。

方法

XMLHttpRequest基本方法有：

• abort（）：停止发送当前请求
• getAllResponseHeader():获取服务器的全部响应头
• getResponseHeader("headerLabel”):根据响应头的名字，获取对应的响应头
• open(“method”,”URL”,”[,asycFlag[,”userName”[,password]]]”):建立与服务器URL的连接，并设置请求的方法，以及是否使用异步请求。如果远程服务需要用户名、密 码，则 提供对应的信息
• send(content):发送请求。其中content是请求参数
• setRequestHeader(“label”,”value”):在发送请求之前，先设置请求头

事件

• onloadstart：调用xhr.send()方法后立即触发，若xhr.send()未被调用则不会触发此事件。
• onprogress：xhr.upload.onprogress在上传阶段(即xhr.send()之后，xhr.readystate=2之前)触发，每 50ms 触发一次；xhr.onprogress在下载阶段（即xhr.readystate=3时）触发，每 50ms 触发一次。
• onabort：当调用xhr.abort()后触发
• ontimeout：xhr.timeout不等于 0 ，由请求开始即 onloadstart 开始算起，当到达xhr.timeout 所设置时间请求还未结束即 onloadend ，则触发此事件。
• onerror：在请求过程中，若发生 Network error 则会触发此事件（若发生 Network error 时，上传还没有结束，则会先触发 xhr.upload.onerror，再触发 xhr.onerror ；若发生 Network error 时，上传已经结束，则只会触发xhr.onerror ）。注意，只有发生了网络层级别的异常才会触发此事件，对于应用层级别的异常，如响应返回的xhr.statusCode是 4xx 时，并不属于 Network error ，所以不会触发 onerror 事件，而是会触发 onload 事件。
• onload：当请求成功完成时触发，此时xhr.readystate=4
• onloadend：当请求结束（包括请求成功和请求失败）时触发
• onreadystatechange：每当xhr.readyState改变时触发；但xhr.readyState由非 0 值变为 0 时不触发。

JSONPlaceHolder

	JSONPlaceholder 是一个提共在线 REST API 的网站，我们在开发时可以使用它获取一些假数据、假图片。其返回的数据为 JSON 格式，且同时支持 HTTP 和 HTTPS 这两种请求类型

	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    // POST请求
    function postInit() {
        $.ajax({
            type: "post",
            // 返回请求数据及随机id
            url: "https://jsonplaceholder.typicode.com/posts",
            data: {
                account: "tom",
                password: "147258",
                text: "post请求传值，返回所有值及id"
            },
            dataType: "json",
            success: function(res) {
                console.log("post请求\n", res);
            }
        });
    }
    postInit();
</script>

AJAX优缺点

优点

• 无需刷新页面而与服务器端进行通信
• 允许根据用户事件更新部分页面内容

缺点

• 没有浏览历史，无法回退
• 存在跨域问题（a.com不能向b.com发送AJAX请求）
• 对爬虫不友好（SEO）

HTTP协议

主要内容为请求报文和响应报文

请求报文格式

行		GET(请求方式)+url+HTTP/1.1(协议及版本号)
请求头	键值对
		Host：atguigu.com
		Cooki:name=guigu
空行
体		GET请求的话请求体为空，如果是POST，请求体可以不为空

响应报文格式

行	HTTP/1.1 200 OK（状态码）
头	键值对。和请求报文格式一样
空行
体	主要返回结果

AJAX请求的基本操作

GET请求

 <style>
      #res {
        width: 300px;
        height: 200px;
        border: 2px solid black;
      }
    </style>
     <button>点击请求</button>
    <div id="res"></div>`

const btn = document.getElementsByTagName("button")[0];
      const result = document.getElementById("res");
      btn.onclick = function () {
        //1.创建对象
        const xhr = new XMLHttpRequest();
        //2.初始化 设置请求方法和url
        //设置url参数：？分开&链接
        xhr.open("GET", "http://localhost:8000/sever?a=100&b=200&c=300","async");
         //async:默认true(异步)或false(同步)
        //3.发送
        xhr.send();
        //4.事件绑定 处理服务端的返回结果
        //on when 当....时候
        //readystate是xhr对象中的属性，表示状态有0（初始化，最开始的值iu是0） 1（表示open方法已经调用完毕） 2（表示send方法调用完毕） 3（表示服务端返回的部分结果）4(服务端返回的所有结果)
        //会被触发4次，改一次触发一次
        xhr.onreadystatechange = function () {
          //处理服务端返回结果
          //判断（服务端返回了所有的结果）
          if (xhr.readyState == 4) {
            //判断响应状态码 200 300 400 500
            if (xhr.status >= 200 && xhr.status <= 300) {
              //处理结果 行 头 空行 体
              console.log(xhr.status); //状态码
              console.log(xhr.statusText); //状态字符串
              console.log(xhr.getAllResponseHeaders()); //所有响应头
              console.log(xhr.response); //响应体

              //设置result文本
              result.innerHTML = xhr.response;
            }
          }
        };
      };

POST请求

POST请求与GET大致相同初始化设置的类型不同

xhl.open("POST", "http://localhost:8000/sever");