first commit

历届学生/font-end-nine/项目练习/学生项目/张婷/练习/ajax/index.html

@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <ul>
+
+    </ul>
+
+    <!-- <form action="">
+        <input type="text" name="id">
+    </form> -->
+
+
+    <!-- ajax如何调试（接口不通）控制台无数据/渲染页面不进行： 
+             解决方案——————网络——>1 Fetch/XHR 请求状态是否为200——>2 载荷 查询参数是否传递成功——>3 预览 后端是否返回相关数据
+                           都没问题，查找自己的代码是否有错。 -->
+
+    <!-- ajax：前后端交互的工具（无刷新的数据交互方式） -->
+    <!-- 数据格式：json格式=对象object+数组array       （曾经用的xml——标签套标签） -->
+    <!-- 请求<————————>响应 -->
+    <!-- http（超文本传输协议）请求：
+     1 请求头：存放客户端亲请求基本信息
+               
+     2 请求体：
+     
+     3 响应头：存放服务器基被请求本信息
+     
+     4 请求状态码： 200请求成功   202请求接收到但还未处理完成  204成功处理请求但不需返回信息
+                   404找不到对应资源或请求地址  406无法响应  408请求发送超时
+                   500 服务器内部错误无法完成请求 
+     5 请求方式:  (rsa超级加密)
+                  ① GET     要
+                        传参在网址后面添加(?key=vaule&key=vaule...) 即："http://127.0.0.1/index.php?id=1"
+                        简单好用，但不适合提交一些敏感数据（账户密码等）
+                  
+                  ② POST    给
+                        传参放在请求体里面ajax.send(参数)
+                        请求头种类：application/json（最常用）
+                                   application/x-www-form-urlencoded  form表单
+                                   multipart/form-data  上传文件
+                
+get和post的区别：参数：get———— url传递   ；post————— requestbody传递  ；
+                长度：get————  url长度有限（实际上是浏览器和服务器对url的限制）  ；post————— 没有  ；
+                安全：get————  将参数直接暴露在url上所以不能产地敏感信息  ；post————— 没有   ；
+                编码：get————  只能进行url编码  ；post————— 多种  ；
+                速度：get————  data都在url里，所以速度较快  ；post—————   ；
+                缓存：get————  可以被浏览器缓存  ；post————— 不会  ；
+                数据包：get————  http将header和data一并发送所以只残生一个数据包服务器响应200  ；post————— 浏览器先header服务器响应100再data响应200  ；
+            本质：总得来说没有差别，底层都是tcp/ip协议，但由于http的规定和浏览器的限制，导致使用过程中出现差别。
+                            
+                  ③ PUT     更新 请求体
+                  ④ DELETE  删除 请求体
+                  ⑤ OPTIONS 预检测
+                
+                
+                
+                -->
+
+    <!-- 跨域 解决 浏览器 同源策略（协议http/域名 中间内容 /端口 默认：http80——https443） -->
+    <!-- 三种解决方案： 1  cors   后端设置请求头 允许跨域
+
+(只能发get请求)2  jsonp  把 ajax请求 伪装成 js文件请求，绕过 同源策略 达到 发送请求 的目的，通过 回调函数 拿回数据
+              
+              3  服务器代理  a前端————>（http://127.0.0.1/my(自己后端).php）   a后端   请求内容：（$data = file_get_contents("http://127.0.0.1/index(别人后端).php"); echo $data（）得到参数————>b后端 -->
+    <!-- http的请求状态码大于ajax的请求状态 -->
+    <!-- console.log(ajax):   readyState （存储的ajax的状态（0——4），当readyState属性改变时，就会调用该函数）
+                          0_请求未初始化 1_服务器连接已建立 2_请求已接收 3_请求处理中 4_请求已完成，且相应已就绪 -->
+
+</body>
+<script>
+    // 步骤：
+    // 1 创建一个新的ajax对象
+    // 2 配置需要访问的后端地址和请求方式
+    // 3 发送请求（传参）并监听请求
+
+
+    // 1 创建一个新的ajax对象
+    // XMLHttpRequest 和  fetch（es6）  都是ajax的请求方式
+    var ajax = new XMLHttpRequest()
+
+    // 2 配置需要访问的后端地址和请求方式  ajax.open("请求方式"，"地址")
+    ajax.open("GET", "http://localhost?id=1")
+
+    // 3 发送请求（传参）并监听请求
+    ajax.send()
+    // 例：post传参
+
+    // ajax.open("POST","http://localhost")
+    // var params = {
+    //     id : 1
+    // }//"对象"
+    // 手动更改请求头
+    // ajax.setRequestHeader('Content-Type','application/json;charset=UTF-8')
+    // ajax.send(JSON.stringify（params）//“对象转字符串”)
+
+
+    // 例：form表单
+
+    // var form = new FormData();
+    // form.append("username",1)
+    //var a = "id=1"
+    // ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8')
+    // ajax.send(a)
+
+
+
+    ajax.onreadystatechange = function () {
+        // console.log(ajax);
+        if (ajax.readyState == 4) {
+            // 后端给我们的数据保存在response和responseText里，但浏览器在网络传输过程中只能以 字符串 的形式。
+            // （询问数据类型可用typeof），因此需要手动转变一下：  字符串————对象  ：JSON.parse
+            //                                                   对象————字符串 ：JSON.stringify
+
+            if (this.ajax.ststus == 200) {
+                var data = JSON.parse(ajax.responseText)
+                console.log(data);
+                date.result.forEach(v => {
+                    document.querySelector("ul").innerHTML += `<li>${v.title}</li>`
+                });
+            }
+
+        } else {
+            alert("网络请求失败")
+        }
+    }
+
+// jsonp跨域
+// 前端：
+//     function getDate(res){
+//     console.log(res);
+// } 
+// <script src="http://localhost?cb=getDate"></script>
+<!-- 后端：
+         $cb = $_GET['getDate'];
+        echo json_encode($arr);
+        getDate（参数）
+        echo $cb."(".json_encode($arr).")"; -->
+
+</script>
+
+</html>