[duyi] 20180116 网络

Ajax

---

即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）

• Ajax 是一种用于创建快速动态网页的技术。
• Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
• 通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页页面。
• 用JavaScript 以异步的形式操作 xml （现在操作的是json）

---

当你在地址栏中输入一个地址返回一个网页的过程中，发生了什么？

1.寻找服务器。
输入网址，发送到DNS服务器。
通过DNS解析出IP地址，返回浏览器。
客户端通过IP地址指向请求的服务器。

2.客户端向服务器发送http请求。
保证安全性。
三次握手。
建立连接。

3.链接发送，处理请求，服务器响应（成功或者失败），获取资源。

4.断开链接。
四次挥手。

5.浏览器渲染页面。

---

form表单

1. 属性 method : GET POST
2. 属性 action：address
3. 属性 enctype : 规定在发送表单数据前如何对其进行编码
   application/x-www-form-urlencoded
   在发送前编码所有字符（默认）
   multipart/form-data([input type = ‘file’])
   不对字符编码，在使用包含文件上传控件的表单时，必须使用该值

---

Ajax对象

1. new XMLHttpRequest()
2. new ActiveXObject(‘Microsoft.XMLHttp’)

对象方法

• abort() — 停止当前请求
• getAllResponseHeaders() — 把http请求的所有响应首部作为键/值对返回
• getResponseHeader(‘server’) — 返回值指定首部的串值
• open(‘method’,’url’,’async’) — 建立对服务器的调用。method参数可以是GET，POST，PUT。url参数可以是相对地址也可以是绝对地址。 async参数是布尔值，同步或者异步。
• send(content) — 向服务器发送请求
• setRequestHeader(‘label[请求头]’,’value[请求名]’) — 把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()

对象属性

• onreadystatechange — 状态改变的事件触发器

• readyState — 对象状态(integer)，状态值
  0 = 未初始化，未调用send()方法
  1 = 读取中，已调用send()，正在发送请求
  2 = 已读取，send方法执行完成，接受到全部响应内容
  3 = 交互中，正在解析响应内容
  4 = 完成，响应内容解析完成

• responseText — 获得字符串形式的响应数据

• responseXML — 获得XML形式的响应数据

• status — 服务器返回的状态码
  404 = 文件未找到
  200 = 成功
  500 = 服务器内部错误
  304 = 资源未被修改

• statusText — 服务器返回的状态文本信息

---

Ajax过程

1. 设备 — 手机 —> 浏览器
2. 工具 — 饿了么 —> ajax对象
3. 寻找地址 — 浏览商家 —> open (‘GET’,’url’,’true’);
4. 确定信息 — 下单 备注 付款 —> send();
5. 监听物流 — 看到哪了 —> onreadychange
6. 处理 — 是不是你的饭，吃，送女朋友 —> 取值

---

• 封装Ajax方法

function ajax(method, url, async, callback, data) {
    // GET/POST , PHP地址 , 是否异步, 处理方法 , POST键入的数据 

    var xml = null; //兼容性处理后的ajax对象
    if (window.XMLHttpRequest) {
        xml = new XMLHttpRequest();
    } else {
        xml = new ActiveXObject('Microsoft.XMLHttp');
    }
    //------------【兼容性处理新建一个ajax对象】-------------


    if (method == 'GET') {
        //--------------GET方法------------------
        var time = new Date().getTime();
        xml.open('GET', url + '?time' + time + '&' + data, async);
        xml.send();
    } else if (method == 'POST') {
        //--------------POST方法----------------
        xml.open('POST', url, async);
        xml.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xml.send(data);
    }
    //-----------【根据参数判断使用方法】--------------


    xml.onreadystatechange = function() {
        if (xml.readyState == 4) {
            if (xml.status == 200) {
                callback(xml.responseText);
                //处理POST数据方法
                //处理GET数据方法
            }
        }
    }
}
//---------【监听readystate，数据请求是否完成】-------


btn.onclick = function() {
    ajax('GET', './getNews.php', true, dealData, '');
}

submit.onclick = function(e) {
    e.preventDefault();
    var userVal = user.value;
    // var age = age.value;  变量声明提升
    var ageVal = age.value;
    ajax('POST', './post.php', true, showData, 'username=' + userVal + '&age=' + ageVal);
}

function dealData(data) {
    var value = JSON.parse(data);
    var str = ''
    value.forEach(function(ele, index) {
        str += '<li>' + ele.title + '-' + ele.date + '</li>';
    })
    document.body.innerHTML = str;
}

function showData(data) {
    alert(data);
}

//----------【返回数据处理方法】---------------

---

get方法会产生缓存，当再次请求同一地址时会从缓存中获取资源。
例如验证码图片保证每次请求不同，可以在路径后加时间戳

GET请求 — 单向申请资源
POST请求 — 双向交互，向服务器提交数据

---

同源策略

如果非同源，那么在请求数据时，浏览器（服务器到服务器不涉及同源策略）会在控制台中报一个异常，提示拒绝访问。
同源指：域名、协议、端口相同。
不满足条件的情况若在服务器白名单中依旧可以访问。

• 协议：http:// ; https://
• 域名：www.baidu.com
  域名是倒序解析的：
国际上 .com 是顶级域名
国内 .com 是一级域名
baidu.com 二级域名
www.baidu.com 三级域名
'www'代表网页请求，含有'www'是非裸域名
• 端口：http 默认是 80；https 默认端口是 443

Ajax受同源策略的限制。