传统的交互方式：
1 <form action="/get"> 2 用户名：<input type="text" use=""/> 3 密码：<input type="password"/> 4 <input type="submit" value="提交"/> 5 <form>
<form action="/post" method="POST" enctype="application/x-www-form-urlencoded" >
用户名:<input type="text" name="user"/>
密 码:<input type="password" name="password" />
<input type="submit" value="提交">
</form>
jq 的 ajax 的方式：
首先要引入 jQuery 文件
/* url:请求地址 （后台童鞋一定会你的） data：数据的拼接 dataType --（等同于）-> JSON.parse() （把json转成对象） success:function(data){ data ->为object，直接使用的数据 } */ $.ajax({ url:必须传，（向后台要） data：{ 人：刘德华 狼： 神： key（为前后端一起定义的字段）：val（前端传的数据） }， success：function(json/data){ let data = JSON.parse(json);//如果拿到的数据是json就转成对象，如果是data（对象）就直接使用 //dataType:"json" if(data.code === 0){ $("#txt").removeClass("ok"); $("#txt").addClass("error"); } if(data.code === 1){ $("#txt").removeClass("error"); $("#txt").addClass("ok"); } } })
$('#txt').blur(function(){
// $.ajax({
// url:'/getget',
// dataType:'json',
// data:{
// ren:$(this).val()
// },
// success:function(data){
// if(data.code){
// $('#txt')[0].className = 'ok';
// }else{
// $('#txt')[0].className = 'error';
// }
// }
// })
//下面这种方式，也可以。
fetch('/getget?ren='+$(this).val())
.then(e=>e.json())
.then(data=>{
console.log(data);
});
});
原生的 ajax 交互模型
<body> 用户名:<input type="text" id="txt"/> <input type="button" value="提交" id="btn"> <script> //xxx.com?a=5#id=0 //?a=5 问号到井号之间的信息叫查询信息 window.location.search //key=val&key=val btn.onclick = function(){ /* 在IE下，有ActiveXObject插件， new ActiveXObject("Mscrosoft.XMLHttp"); */ let xhr = new XMLHttpRequest; /* 请求方式有: GET、POST、DELETE、PUT GET通过URL的方式去请求的服务器 */ xhr.open('get','/get?ren='+txt.value,true); xhr.send(); xhr.onload = function(){ console.log(xhr.responseText); } //未来会用下面这个 （原生自带的请求方式） // fetch('/get?ren='+txt.value) // .then((e)=>e.json()) // .then(data=>{ // console.log(data); // }); } </script> </body>
/* ajax 的模型叫 电话模式 1.先有一个电话 创建ajax对象 2.输入号码(拨号) 填写请求地址 xhr.open("请求的方式"，"url地址"+具体字段，请求异步默认为true) 3.发送 send（） 4.等待 xhr.onload 5.成功接收 在xhr.onload中接收到数据 xhr.responseText */ btn.onclick = function(){ let xhr = new XMLHttpRequest;//1.创建ajax对象 xhr.open("get","/get？user="+txt.value,true)//第三个参数：是否异步（true：要异步）; 2.填写请求地址 xhr.send(); //3.发送 xhr.onload = function(){ //4.等待服务器响应 //console.log(xhr.responseText) //5.接收的信息 let data = JSON.parse(xhr.responseText); if(data.code == 0){ txt.className = "error" }else if(data.code == 1){ txt.className = "ok" } } }
URL:
url是统一资源定位符
https://www.baidu.com:80/item/url/110640?fr=aladdin
URL的结构:
第一部分:
模式/协议（scheme）
常用超文本传输协议（Hypertext Transfer Protocol，缩写为HTTP）
https——用安全套接字层传送的超文本传输协议
ftp——文件传输协议
file——当地电脑或网上分享的文件
第二部分
域名 ip地址的一个别名
119.75.217.109 百度的ip地址
顶级域名:
www.baidu.com
二级域名:
baike.baidu.com
三级域名:
baike.tieba.baidu.com
.com 商用的国际域名
.cn 供商用的中文域名
.net 用于网络供应服务商（系统类的经常使用NET域名）
.org 用于官方组织
.edu 用于教育
.gov 用于政府
:数字端口号
范围就是0到65535
浏览网页服务的80端口
mongo:27017
带 / 有可能是目录，也有可能是接口，也有可能是二次封装之前的目录呀，接口呀
? 查询信息
?到#之间的位置
window.location.search 包含问号，不包含#号
即可以读也可以写，写了查询信息是会刷新页面
#之后的锚信息
window.location.hash 包含#号
即可以读也可以写，写了锚信息是不会刷新页面
window.onhashchange 当hash值发生变化的时候才会触发
get请求的特性:
比post快，
● get会将 静态资源 缓存起来（静态资源，除了数据），而post不会。（在低IE下，不仅会缓存 静态资源，也会缓存 数据）
解决：让第二次访问的地址和第一次的地址不一样，就能解决 数据被缓存起来 的缺点
url字节长度是每个浏览器都是不一样的（体积是有限的）
相对来说是不安全
中文的转码问题(在chrome中中文会自动转成URI编码，而IE10以下浏览器都不会自动转)
所以要手动转编码
更擅长于，查找、展示数据、轻量的数据
URI ：Uniform Resource Identifier，统一资源标识符；
URL：Uniform Resource Locator，统一资源定位符；
URN：Uniform Resource Name，统一资源名称。
其中，URL,URN是URI的子集。
decodeURI( ' %E7%8E%8B ' ) -> 中文
encodeURI( 中文 ) -> uri编码
%E5%B0%8F%E7%87%95%E5%AD%90 - >小燕子
post请求的过程：
（1）浏览器请求tcp连接（第一次握手）
（2）服务器答应进行tcp连接（第二次握手）
（3）浏览器确认，并发送post请求头（第三次握手，这个报文比较小，所以http会在此时进行第一次数据发送）
（4）服务器返回100 Continue响应
（5）浏览器发送数据
（6）服务器返回200 OK响应
get请求的过程：
（1）浏览器请求tcp连接（第一次握手）
（2）服务器答应进行tcp连接（第二次握手）
（3）浏览器确认，并发送get请求头和数据（第三次握手，这个报文比较小，所以http会在此时进行第一次数据发送）
（4）服务器返回200 OK响应
也就是说，目测get的总耗是post的2/3左右，这个口说无凭，网上已经有网友进行过测试。
post请求的特点：
服务器发送
安全一点点
体积，理论上可以无限大（但是一般后台人员都会限制）
在请求发送之前，需要设置请求头
请求头：xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
一般用在用户信息上、比较大的数据传输
用 get 对于请求的 数据 和 静态资源（html的页面。图片），在低 IE 下都会缓存
高版本浏览器是只缓存静态资源，不缓存数据
什么样的情况下才会被浏览器缓存？
第二次的地址和第一次的地址一样，那么第二次找到的资源就为第一次缓存起来的资源。
解决：让第二次访问的地址和第一次的地址不一样，就能解决 数据被缓存起来 的缺点
get？user="+txt.value + "&id=" + 随机数 / 时间戳 （new Date/ Date.now()）