06-网络请求

GET和POST请求

• get请求会将提交的数据拼接到URL后面
  例如: ?userName=lnj&userPwd=123456
• post请求会将提交的数据放到请求头中
• 两种请求方式区别
  • 提交数据存储的位置不同,GET请求会将数据放到URL后面
  • POST请求会将数据放到请求头中
  • GET请求对数据有大小限制
  • POST请求对数据没有大小限制

---

Ajax技术

• Ajax是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下

var oBtn = document.querySelector("button");
    oBtn.onclick = function () {
        // 1.创建一个异步对象
        var xmlhttp = new XMLHttpRequest();

        // 2.设置请求方式和请求地址
        /*
        method：请求的类型；GET 或 POST
        url：文件在服务器上的位置
        async：true（异步）或 false（同步）
        */

        xmlhttp.open("GET", "04-ajax-get.php", true);
        // 3.发送请求
        xmlhttp.send();

        // 4.监听状态的变化
        xmlhttp.onreadystatechange = function (ev2) {
            /*
            0: 请求未初始化
            1: 服务器连接已建立
            2: 请求已接收
            3: 请求处理中
            4: 请求已完成，且响应已就绪
            */
            if(xmlhttp.readyState === 4){
                // 判断是否请求成功(通过状态码判断)
                if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
                    xmlhttp.status === 304){
                    // 5.处理返回的结果
                    console.log("接收到服务器返回的数据");
                }else{
                    console.log("没有接收到服务器返回的数据");
                }
            }
        }
    }

json数据交换格式

• JSON是一种轻量级的数据交换格式

JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串
var obj = {a: 'Hello', b: 'World'}; //这是一个对象，注意键名也是可以使用引号包裹的
var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串，本质是一个字符串

要实现从对象转换为 JSON 字符串，使用 JSON.stringify() 方法：
var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'
要实现从 JSON 转换为对象，使用 JSON.parse() 方法：
var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}


非标准的JSON字符串: {error: 0, id: 1, time: 1526541587, acc: 0, ref: 0}
标准的JSON字符串: {"error": "0", "id": "1", "time": "1526541587", "acc": "0", "ref": "0"}
var obj = eval("("+msg+")");

cookie技术

• cookie是客户端会话跟踪技术
• cookie作用:
  将网页中的数据保存到浏览器中
• cookie生命周期:
  • 默认情况下生命周期是一次会话(浏览器被关闭)
  • 如果通过expires=设置了过期时间, 并且过期时间没有过期, 那么下次打开浏览器还是存在
  • 如果通过expires=设置了过期时间, 并且过期时间已经过期了,那么会立即删除保存的数据
• cookie注意点:
  cookie默认不会保存任何的数据
  cookie不能一次性保存多条数据, 要想保存多条数据,只能一条一条的设置
  cookie有大小和个数的限制
  个数限制: 20~50
  大小限制: 4KB左右

session技术

• session是服务端会话跟踪技术

Hash属性

• hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）

window.location.hash = 3;

sessionStorage和localStorage

• 相同点
  设置、读取方便、页面刷新不丢失数据
  容量较大，sessionStorage约5M、localStorage约20M
  只能存储字符串，可以将对象通过JSON.stringify()方法转换为字符串存储
• 不同点

window.sessionStorage
1、生命周期为关闭浏览器窗口
2、在同一个窗口(页面)下数据可以共享
// 保存数据到sessionStorage
// 如果指定的key不存在就是保存, 如果存在就是更新
window.sessionStorage.setItem('name','wjh');
window.sessionStorage.setItem('age','19');
// 从sessionStorage获取数据
var data = window.sessionStorage.getItem("name");
// 从sessionStorage删除指定数据
window.sessionStorage.removeItem("name");
// 从sessionStorage清空所有数据
window.sessionStorage.clear();

window.localStorage
1、永久生效，除非手动删除,关闭页面也会存在
2、可以多窗口（页面）共享（同一浏览器可以共享）

// 保存数据到sessionStorage
// 如果指定的key不存在就是保存, 如果存在就是更新
window.localStorage.setItem('name','wjh');
window.localStorage.setItem('age','19');
// 从sessionStorage获取数据
var data = window.localStorage.getItem("name");

// 从sessionStorage删除指定数据
window.localStorage.removeItem("name");
// 从sessionStorage清空所有数据
window.localStorage.clear();

---

同源策略

• 什么是同源策略?
  同源策略是浏览器的一种安全策略, 所谓的同源策略指的是请求的URL地址中的协议/域名和端口都相同,只要其中一个不同就是跨域
• 跨域
  协议/(一级/二级)域名和端口号存在不同就是跨域

http:  协议
it666.com 一级域名
www/edu  二级域名
:8080 端口号

http://www.it666.com:8080/index.html
http://www.it666.com:8080/abc.html   // 同源的

https://www.it666.com:8080/abc.html // 协议不同, 所以不同源

http://edu.it666.com:8080/index.html // 二级域名不同,  所以不同源
http://www.itzt.com:8080/index.html  // 一级域名不同,  所以不同源

http://www.it666.com:8090/index.html // 端口号不同, 所以不同源

• 同源策略带我们的影响?
  在同源策略下, 浏览器不允许Ajax获取不同源地址的数据
  但是在企业开发中, 一般情况下为了保证访问的速度,网页都会单独存储在一个服务器上, 而数据又会单独的存储在另一个服务器上
• 同源策略解决方案
  • jsonp技术
  • window.postMessage (存在兼容问题)

---

jsonp技术

• jsonp原理
  由于script标签的src可以从远程服务器加载数据, 并且没有同源的限制,所以在企业开发中想获取不同源的数据, 都是通过script标签的src属性来获取的(本质是利用script加载远程文件的原理),那这种获取不同源数据的方式, 我们就称之为jsonp
• jQuery网络请求使用jsonp

1.只要指定jQuery的Ajax方法的dataType等于jsonp, 就可以使用跨域获取数据
2.jQuery的Ajax方法会将服务器存储到返回函数中的数据提取出来返回给我们
    2.1 jQuery在发送请求的时候通过URL的参数已经告诉服务器回调函数的名称了
    这个名称是jQuery随机生成的一个名称, 通过callback=jQuery233217392718
    2.2 如果不想使用jQuery随机生成的函数名称, 可以自定义
   $.ajax({
        url: "http://127.0.0.1:80/jQuery_Lesson/Ajax/10-error.php",
        type:"get",
        dataType: "jsonp", // 告诉jQuery以jsonp形式来请求数据
        // jsonp: "callback", // 指定服务器提取函数名称的key
        // jsonpCallback: "lnj", // 指定回调函数的名称(默认是jq随机生成的函数名称)
        success:function (msg) {
            console.log(msg);
        },
        error:function (xhr) {
            console.log(xhr.status);
        }
    });