180426 AJAX

Ajax与JavaScript的联系

Ajax提供了使用脚本操作HTTP的Web应用框架。
由脚本启动，客户端从服务器拉取数据。

---

什么是AJAX?

（Asynchronous javascript and xml）
用JavaScript以异步的形式操作XML（现在是操作JSON）

• 在Ajax模型中，客户端向服务器请求额外的数据而无需重载整个页面。
• AJAX的技术核心是 XMLHttpRequest 对象（XHR），XHR为向服务器发送请求和解析服务器响应提供了接口。
• 脚本实例化浏览器提供的XHR对象取得新数据，然后再通过DOM将新数据插入到页面中。
• 虽然名字中包含XML成分，但AJAX通信技术与数据格式无关。

---

XMLHttpRequest 对象（XHR）

• XMLHttpRequest 对象用于在后台与服务器交换数据。
• 浏览器在XMLHttpRequest类上定义了它们的HTTP API。
• XHR不是协议级的HTTP API，而是浏览器级别的。不需要考虑其它问题，只关心请求和响应。
• 脚本通过实例化生成XHR对象：

var xhr = new XMLHttpRequest();

XHR API

• open()方法，接收五个参数：
  
  • 要发送的请求的方法： GET/POST
  • 请求数据的地址： URL [ 通常使用相对路径，使用绝对路径时，跨域请求通常会报错 ]
  • 是否异步： true/false
  • 最后两个参数用于验证用户：账号和密码

xhr.open('GET','example.php',true);

xhr.open('POST','example.php',true);

• setRequestHeader(header, value) 方法

  • 设置HTTP请求头部信息。
  • 此方法必须在 open() 方法和 send() 之间调用。
  • 如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头。
  • 安全起见，有些请求头的值只能由user agent设置

• getResponseHeader() 和 getAllResponseHeader()

  • 查询响应头。XHR会自动处理cookie：从方法返回集合中过滤cookie头。

• send()方法

  • 如果是异步请求（默认为异步请求），则此方法会在请求发送后立即返回；如果是同步请求，则此方法直到响应到达后才会返回。
  • 接受一个可选的参数，其作为请求主体；如果请求方法是 GET 或者 HEAD，则应将请求主体设置为 null。
  • 请求方法是 POST ,在发送请求即调用send（）方法之前使用setRequestHeader() 方法设置 Content-Type头部来指定数据流的MIME类型。并将请求主体作为参数传入。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/server', true);
xhr.onload = function () {
   // 请求结束后,在此处写处理代码
};
xhr.send(null);

--------------------------------------------
var xhr = new XMLHttpRequest();
xhr.open("POST", '/server', true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {//Call a function when the state changes.
    if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
        // 请求结束后,在此处写处理代码
    }
}

xhr.send("foo=bar&lorem=ipsum"); 

关于编码：提交表单时，表单中的数据编码到一个字符串中并随请求发送。默认情况下，HTML表单通过POST方法发送给服务器，而编码后的表单数据则用作请求主体，即传入send()方法作为参数。

编码方式：对表单数据的编码方案采用普通的URL编码（使用十六进制转义码替换特殊字符），使用[&]连接名值对。find=pizza&zipcode=02134&redius=1km

表单数据编码格式有一个正式的MIME类型：application/x-www-form-urlencoded
使用POST方法时，必须设置”Content-Type“请求头为这个值。

UserAgent中文名为用户代理，是Http协议中的一部分，属于头域的组成部分，UserAgent也简称UA。它是一个特殊字符串头，是一种向访问网站提供你所使用的浏览器类型及版本、操作系统及版本、浏览器内核、等信息的标识。通过这个标识，用户所访问的网站可以显示不同的排版从而为用户提供更好的体验或者进行信息统计；例如用手机访问谷歌和电脑访问是不一样的，这些是谷歌根据访问者的UA来判断的。UA可以进行伪装。

---

HTTP基础知识

• 一个HTTP请求由4部分组成：

  • HTTP请求方法或“动作”
  • 正在请求的url
  • 一个可选的请求头集合，其中可能包括身份验证信息
  • 一个可选的请求主体

• 服务器返回的HTTP响应包含3部分：

  • 一个数字和文字组成的状态码，用来显示请求的成功和失败
  • 一个响应头集合
  • 响应主体

• HTTP状态码

分类	分类描述
1xx	信息，服务器收到请求，继续执行操作
2xx	成功，操作被成功接收并处理
3xx	重定向，需要进一步的操作以完成请求
4xx	客户端错误，请求包含语法错误或无法完成请求
5xx	服务器错误，服务器在请求过程中发生了错误

状态码	英文名称	中文描述
200	OK	请求成功。一般用于GET与POST请求
201	Created	已创建。成功请求并创建了新的资源
202	Accepted	已接受。已经接受请求，但未处理完成
301	Moved Permanently	永久移动。请求的资源已被永久的移动到新URI
302	Found	临时移动。资源只是临时被移动。客户端应继续使用原有URI
401	Unauthorized	请求要求用户的身份认证
403	Forbidden	服务器理解请求客户端的请求，但是拒绝执行此请求
404	Not Found	服务器无法根据客户端的请求找到资源（网页）
500	Internal Server Error	服务器内部错误，无法完成请求
503	Service Unavailable	由于超载或系统维护，服务器暂时的无法处理客户端的请求。

• 多用途Internet邮件扩展（MIME）类型
  
  • 是一种标准化的方式来表示文档的性质和格式。
  • 浏览器通常使用MIME类型（而不是文件扩展名）来确定如何处理文档；因此服务器设置正确以将正确的MIME类型附加到响应对象的头部是非常重要的。

---

Ajax实现步骤

一、发起HTTP请求

• 实例XMLHttpRequest对象

• 调用XMLHttpRequest对象的open()方法去指定请求的方法和URL。

• 发送请求调用send()方法，可以指定可选的请求主体。

二、获取HTTP响应

• 发送请求后，异步方式的send()方法立即返回。直到响应返回，以下响应方法和属性才有效。

• 在收到响应后，响应的数据会自动填充XHR对象的属性：

  • status和statusText属性分别以数字和文本形式返回状态码。
  • getResponseHeader() 和 getAllResponseHeader() 查询响应头。XHR会自动处理cookie：从方法返回集合中过滤cookie头。
  • responseText属性得到文本形式的响应主体。responseXML得到document形式。

• 为了响应就绪时得到通知，必须监听XHR对象上的readystatechange事件。

  • 先了解readyState属性：是一个整数，它指定了HTTP的请求状态。是XHR规范的一部分。

常量	值	含义
UNSENT	0	open()尚未调用
OPENED	1	open()已调用
HEADERS_RECEIVED	2	接受到头信息
LOADING	3	接收到响应主体
DONE	4	响应完成

• 响应事件处理函数 onreadyStatechange
  
  • 确保请求完成 —- 检查readystate属性
  • 确保请求成功 —- 检查响应状态码
  • 验证响应主体类型 —- 查找 ” Content-Type “头

---

• 在接收到响应后，第一步是检查status属性，以确定响应已经成功返回。状态码200作为成功的标志，状态码为304表示请求的资源没有被修改，可以直接使用浏览器中缓存的版本。

if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
    alert(xhr.responseText);
}else{}

• 只要readyState属性的值由一个值变成另一个值，都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。

var xhr = createXHR();
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            alert(xhr.responseText);
        }else{}
    }
}

---

HTTP头部信息

每个HTTP请求和响应都会带有相应的头部信息。xhr对象提供了操作这两种头部信息的方法。

• accept：浏览器能处理的内容类型。
• accept-charset：浏览器能显示的字符集。
• accept-encoding：浏览器能够处理的压缩编码。
• accept-language：浏览器当前设置的语言。
• connection：浏览器与服务器之间的连接类型。
• cookie：当前页面设置的任何cookie。
• host：发出请求的页面所在的域。
• referer：发出请求的页面的URL。
• user-agent：浏览器的用户代理字符串。
• 使用 setRequstHeader()方法 可以设置自定义的请求头部信息。接收两个参数：头部字段名称，和头部字段值。必须在open()方法后，send()方法前调用。

xhr.open("get","example.php",true);
xhr.setRequsetHeader("MyHeader","MyValue");
xhr.send(null);

• 调用getResponseHeader()方法并传入头部字段名称，可以取得相应的头部信息。而调用getAllResponseHeaders()方法可以取得一个包含所有头部的长字符串。

---

GET请求

常用于向服务器查询某些信息。可以将查询字符串参数追加到URL的末尾，位于传入open()方法的URL末尾的查询字符串必须经过正确的编码才行。
查询字符中的每个参数的名称和值都必须使用encodeURIComponent()进行编码，然后才能放到URL的末尾；而且所有名值对都必须由&分隔，如下面的例子所示：
GET请求会将数据存到cookie中，下次请求相同地址时，直接使用缓存中的数据。为了防止这种情况，可以在访问地址后加时间戳。

xhr.open("get","example.php?name1=value1&name2=valuse2",true);

• 使用GET请求，没有主体，不需要设置请求头。GET方法发送给服务器的表单编码数据需要追加在URL尾部，用[?]链接。

---

POST请求

通常用于向服务器发送应该被保存的数据。

xhr.open('post','example.php',true);

默认情况下，服务器对post请求和提交web表单不会一视同仁。
我们可以使用XHR模仿表单提交：首先将content-type头部信息设置为application/x-www-form-urlencoded，也就是表单提交时的内容类型。

xhr.open('post','postexample.php',true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send(data);

• 使用POST请求，需要设置”Content-Type“头指定请求主题的MIME类型；POST请求通常有请求主体（包含客户端传递给服务器的数据）。
  
  • HTML表单默认通过POST方法发送给服务器，编码后的表单数据用做请求主体。
  • 编码方式：对每个表单元素的名字和值执行普通的URL编码（使用十六进制转义码替换特殊字符），使用等号把编码后的名字和值分开，使用[&]分开名值对。
  • 表单数据编码格式有一个正式的MIME类型：使用POST方法时，必须设置”Content-Type“请求头为这个值。
  • 在POST请求主体中使用表单编码是常见惯例，但是也可以使用其他：
    -xhr.setRequestHeader("Content-Type","application/json");
    -xhr.send(JSON.stringify(data));

GET请求点的速度最多可达到POST请求的两倍。

---

XHR实现Ajax的局限性：

XHR实现的Ajax遵循同源策略，尽管规避了安全漏洞，但是也阻止了大量合适的跨域请求。同源策略不允许XHR进行跨域请求。

不能发送和接收cookie

当需要跨域请求时，可以借助<script>发送HTTP请求：JSONP。

---

封装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对象】-------------


      xml.onreadystatechange = function() { //状态改变的事件触发器
              if (xml.readyState == 4) { //解析完成
                  if (xml.status == 200) { //成功
                      callback(xml.responseText);
                      //处理POST数据方法
                      //处理GET数据方法
                  }
              }
          }
          //---------【监听readystate，数据请求是否完成】-------

      if (method == 'GET') {
          //--------------GET方法------------------
          xml.open('GET', url + '?' + data, async); //get特有的方式，在地址后链接数据
          xml.send();
      } else if (method == 'POST') {
          //--------------POST方法----------------
          xml.open('POST', url, async);
          xml.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); //提交数据，进行编码
          xml.send(data); // 'username=aimee&age=18'
      }
      //-----------【根据参数判断使用方法】--------------

  }

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

  submit.onclick = function(e) {
      e.preventDefault(); //取消默认事件
      var userVal = user.value; //id取标签input键入值赋值给userVal
      // var age = age.value;  变量声明提升
      var ageVal = age.value;
      ajax('POST', './post.php', true, showData, 'username=' + userVal + '&age=' + ageVal); // + 给程序看用于连接，php中对应的格式
  }

  function dealData(data) { //处理请求回来的数据，转换成json格式
      var value = JSON.parse(data);
      var str = ''
      value.forEach(function(ele, index) {
          str += '<li>' + ele.title + '-' + ele.date + '</li>';
      })
      document.body.innerHTML = str; //插入dom
  }

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

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