148 lines
6.5 KiB
HTML
148 lines
6.5 KiB
HTML
<!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> |