Ajax 介绍和简单用法

一. Ajax 基础

1. 异步传输 +js+xml

优点：无需刷新整个页面，就能更新局部数据的技术

缺点：打破了浏览器的 back 回退机制

2. 同异步

异步:当一行代码还没结束，就可以执行另一行代码

同步:当一行执行结束，才能执行另一行代码

3. 连接步骤

1. 创建 XMLHttpRequest 请求对象
2. 发起 open 请求，需指定 http 的请求方式、请求地址
3. 向服务器发送数据
4. 监听服务器的响应和状态码
5. 判断是否连接成功执行的函数

4. 解决同源跨域问题

同源（三源）：协议、域名、端口号

dataType:"jsonp"，<script> 的 src 不受同源策略的影响

java:@CrossOrigin

5. readyState 状态码

0, 请求未初始化

1, 服务器已建立链接

2, 请求已接受

3, 请求处理中

4, 请求完成并且响应就绪

6. 两种 http(TCP)发送请求方式：get 和 post 区别

1. 请求的内容和作用不一样
   get 是请求指定的页面信息，并返回实体主体。
   post 在指定资源提交数据进行处理**（提交表单、上传文件）**，数据是包含在请求体中的。
2. 请求的参数直接在浏览器 地址栏中显示
   get 会：参数是通过 url 传递
   post 不会：参数是通过 Request body
3. 发送次数不一样
   get 会产生一个数据包：浏览器会先 http header 和 data 一起发送出去，服务器响应 200（返回数据）
   post 会产生两个数据包(2 次)：两次发包的优点，可以保证数据的完整性
   浏览器会先发送 header，服务器响应 100(临时请求) continue，在发送 data，服务器响应 200（返回数据）。
4. 存储的容量不一样
   get 存储的参数不能超过 2k
   post 没有限制

7. js 和 jq ajax 的码法

1. js

2. jquery

   <script>
       $(function () {
           $.ajax({
               // 请求地址
               url: "js/mydata.json",
               // 请求方式
               type: "get",
               // 是否为异步，true为异步，false为同步
               async: "true",
               // 向服务器端传送数据
               data: {},
               // 请求成功返回的函数
               success: function (res) {
                   console.log(res);
                   //jq的遍历方式
                   $.each(res, function (k, v) {
                       console.log(k, v);
                       $(".box").append(" <p>\n" +
                           "        <span>" + k + "</span>\n" +
                           "        <span>" + v + "</span>\n" +
                           "    </p>")
                   })
               },
               // 请求失败返回的函数
               error: function (res) {
                   console.log(res);
               }
           })
       })
   </script>
   
   ​