JavaScript中几个重要的知识点（3） ---- Ajax

JavaScript中几个最重要的大知识点

1. 面向对象

2. DOM事件

3. 异步交互ajax

AJAX

AJAX是异步的javascript和xml（Asynchronous Javascript And XML）的缩写，用于网页局部刷新，提高用户浏览体验

一般前端程序员关于AJAX的掌握仅仅停留在会用AJAX发送请求，将获得的数据渲染到DOM中便可，若是看这篇文章的你是出于这个目的，那么下面的两个代码示例就能够解决你的问题了。

• 原生JS写法：

var xhr=new XMLHttpRequest();
xhr.open("[method]","[url]",[true/false]);    //true为异步，false为同步
xhr.onreadystatechange=function(){
    if(xhr.readystate===4 && xhr.status==200){
        var result=xhr.responseText;    //这里是服务器端返回的数据
    }
}
xhr.send(null);    //若是须要向服务器发送数据，则写入key=value&key=value形式的字符串

• jQuery写法：

$.ajax({
    url:"",
    method:"",
    dataType:"json",
    async:true,
    data:null,    //须要向服务器发送的数据，能够是对象形式
    success:function(data){}    //data为服务器返回的数据
})

本文的重点不在于介绍AJAX写法，而是AJAX所形成的先后端交互，下面将介绍完整的先后端交互过程以及其中的一些细节东西。

客户端和服务器端的交互

面试题：当你在浏览器的地址栏中输入一个网址，到浏览器呈现这个网页中的内容，中间都经历了哪些事情？

这个面试题粗略地考察了一下先后端交互的知识点，即客户端和服务器端的交互模型“HTTP事务”，这个交互主要包含了如下几个阶段：

• Request请求阶段

  1. 客户端首先经过域名，到DNS服务器上，找到服务器对应的外网IP地址

  2. 经过外网IP地址，找到对应的项目服务器

  3. 经过端口号，在服务上找到对应的项目资源文件目录（由于发布项目的时候,已经把项目目录和项目端口号对应了）

• Response响应阶段

  1. 服务器端会把客户端须要请求的资源文件的源代码，返回给客户端的浏览器

  2. 客户端浏览器接收到返回内容后，使用不一样的代码解析引擎进行渲染和解析

看到这里，你或许会对上面一些名词有疑惑，下面对一些细节进行详细地描述，以帮助你理解以上的交互。

一个完整的URI：https://www.baidu.com:443/xxx...

• URI：统一资源标识符

• URL：统一资源定位符

• URN：统一资源名称

• URI=URL+URN

上述的一个完整的URI能够分6部分，前3部分为URL，后3部分为URN

1. HTTP / HTTPS / FTP：传输协议

   • 浏览器默认使用HTTP，但网站能够进行重定向使用HTTPS

   • HTTP：超文本传输协议，客户端和服务器端除了传输文本之外，还能够传输图片，音视频等富媒体资源（二进制文件流/BASE64……）

   • HTTPS：传输通道通过SSL加密HTTP，和支付有关的网站基本都是HTTPS传输协议

   • FTP：资源文件传输协议，常常应用于对服务器资源文件的管理（上传和下载）

2. 域名

   • 一级域名：www.qq.com

   • 二级域名：sport.qq.com

   • 三级域名：kbs.sport.qq.com

3. 端口号

   • 80：HTTP默认

   • 443：HTTPS默认

   • 21：FTP默认

   • 端口号的取值范围:0-65535之间,端口号被一个项目或程序占用,其它的程序就不能再使用这个端口号了

4. 请求资源文件的路径和名称

   • /student/index.html 请求的是当前项目student文件夹下的index.html文件

   • /index.html 请求的是当前项目根目录下的index.html文件，在不指定请求文件的时候，默认请求的资源文件通常都是/index.html或者/default.html（能够在服务器中配置默认的请求文件）

5. 问号传参

   • ?key=value&key=value...

   • 客户端能够经过问号传递参数的方式,把一些信息传递给服务器端

6. 哈希值（HASH）

   • #video

   • 通常用于锚点定位或者实现页面的路由切换

HTTP报文：客户端传递给服务器端的内容以及服务器返回给客户端的内容统称为报文

• 起始行：请求起始行、响应起始行

• 首部（头）：通用头、请求头、响应头、自定义（请求/响应）头

• 主体：请求主体、响应主体

1. 客户端均可以经过哪些方式把内容传递给服务器呢？

   • 请求URL地址后面的问号传参（很经常使用）

   • 经过设置请求头信息，把内容传递给服务器（请求头：客户端设置/服务器端获取）

   • 经过请求主体把信息传递给服务器（请求主体：客户端设置/服务器端获取）

2. 服务器端如何把内容返回给客户端？

   • 经过响应头把信息返回给客户端（响应头：服务器端设置/客户端获取）

   • 经过响应主体把信息返回给客户端（响应主体：服务器端设置/客户端获取）

实际上关于网络协议的知识点远不止这些，可是用于理解AJAX以及先后端交互已经足够了，下面即可以对AJAX进行深刻地理解了。

分解AJAX步骤

1.建立一个对象（在IE6以及更低版本的浏览器中，不支持XMLHttpRequest这个类，咱们须要使用ActiveXObject来处理）

var xhr=new XMLHttpRequest;

2.打开一个URL请求地址（发送请求前的一些配置）

• 请求方式：GET系列（GET/DELETE/HEAD）；POST系列（POST/PUT）

• 请求地址：经过这个地址向服务器发送数据请求，请求的地址通常都是后台提供的（API接口文档）

• 设置同步异步：默认TRUE异步，设置为FALSE为同步

  xhr.open("GET","URL",true);

3.监听AJAX状态的改变，实现不一样的业务操做

• 0：UNSENT 未发送

• 1：OPENED 已打开，就是已经执行完成第二步操做了

• 2：HEADERS_RECEIVED 客户端已经接收到服务器返回的响应头信息

• 3：LOADING 服务器返回的主体内容正在传输中

• 4：DONE 响应主体内容已经被客户端接收

  xhr.onreadystatechange=function(){
      if(xhr.readyState===4 && xhr.status===200){
  var result=xhr.responseText;
      }
  }

xhr.status：HTTP状态码，经过状态码能够知道当前HTTP事务是否成功，以及失败的缘由

• 2开头：表明成功

  • 200：OK 请求已成功

• 3开头：也表明成功，可是这个成功经历了一些特殊的处理

  • 301：Moved Permanently 在新版本HTTP协议中，它表明永久转移（在以前的版本中它表明永久重定向）

  • 302：Move temporarily 在新版本HTTP协议中，它表明临时转移（在以前的版本中表明临时重定向，新版本中307表明临时重定向） => "服务器负载均衡"

  • 304：Not Modified 读取的是缓存中的数据（网站性能优化的一个特别重要的手段：咱们通常会把静态的资源文件CSS/JS/IMG作304缓存）

• 4开头：表明错误，并且通常都是客户端的错误

  • 400：Bad Request 请求参数错误

  • 401：Unauthorized 无权访问

  • 403：Forbidden 服务器已经理解请求，可是拒绝执行它。与401响应不一样的是，身份验证并不能提供任何帮助，并且这个请求也不该该被重复提交。若是这不是一个 HEAD 请求，并且服务器但愿可以讲清楚为什么请求不能被执行，那么就应该在实体内描述拒绝的缘由。固然服务器也能够返回一个404响应，假如它不但愿让客户端得到任何信息

  • 404：Not Found 请求的地址不存在

  • 413：Request Entity Too Large 客户端传递给服务器的内容超过了服务器愿意接收的范围

• 5开头：表明错误，并且通常都是服务器端错误

  • 500：Internal Server Error 服务器的未知错误

  • 503：Service Unavailable 服务器超负荷

xhr对象中的一些属性和方法

• xhr.response：获取响应主体内容（通常不用）

• xhr.responseText：获取响应主体内容，并且获取的内容是文本格式（字符串）

• xhr.responseXML：获取响应主体内容是XML格式（XML文档）

• xhr.getResponseHeader([key])：获取响应头信息

• xhr.timeout：设置AJAX请求的超时时间，若是当前请求超过这个时间，表明超时，AJAX请求结束，而且会触发ontimeout事件

• xhr.abort()：中断当前AJAX请求，xhr.onabort就是当请求被中断时触发的事件

• xhr.setRequestHeader([key],[value])：设置请求头信息，[value]不能是中文汉字，若是须要传递中文汉字，须要先把传递的内容进行编码由服务器进行解码，例如：xhr.setRequestHeader("ajax",encodeURIComponent("先后端交互"));

编码解码方式：

• escape / unescape：这种方式常常应用于客户端对中文汉字进行编码（不经常使用，由于服务器端大部分语言，除了NODE，其它都不支持这个编码方式）

• encodeURI / decodeURI：按照UNICODE编码解码

• encodeURIComponent / decodeURIComponent：相对于上面的方法来讲能够把特殊字符也进行编码，而encodeURI只能编码中文汉字

4.发送AJAX请求，AJAX请求这件事从执行SEND后才开始（以前都是在作准备），当readState===4的时候这件事结束；
SEND方法中写的内容就是客户端经过请求主体传递给服务器的内容，不想经过请求主体传递内容写null

xhr.send(null);

至此，整个AJAX请求完成，估计你对先后端交互也有一个大体的了解了。