ajax数据交互的方式（get/post请求、 url）（原生自带的fetch请求）

传统的交互方式：

1 

2 用户名：
3 密码：
4 
5 

 

        用户名:
        密 码:
        

 

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 交互模型

    用户名:
    

/*
    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()）

 

 

转载于:https://www.cnblogs.com/MrZhujl/p/10065861.html