AJAX

AJAX并不是一门新技术，而是多种技术的结合体

  • 一些有趣的事

    1. AJAX 不是新的编程语言，而是一种使用已有标准的新概念

    2. 2005年由美国人Jesse James Garrett推广，并取名。
      神奇的是，这哥们并不是搞程序的，而是搞设计的，是交互设计大师、用户体验大师。甚至是个优秀建筑设计师。

    3. 在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。

    4. 在今天，很少有哪个网站不使用Ajax技术

    5. Ajax技术对智能手机支持非常好。

    6. Ajax中字母x表示XML，实际上XML已经过时，现在的公司，几乎全都在使用JSON代替XML。所以理论上讲，应该称呼为Ajaj，不过，呃，这个词儿，长得好难看。

  • AJAX 是一个什么东西
    在不刷新页面的情况下，
    浏览器悄悄地、异步地向服务器发出HTTP请求。
    服务器收到请求后，传回新的格式化数据回来（通常是JSON）。
    浏览器解析JSON，通过DOM将新数据呈递显示，页面仅局部刷新。

服务器与客户端

  1. 服务器和客户端说白了，都是电脑

  2. 服务器：能够提供某种服务的机器（计算机）

  3. 客户端：具有向服务器索取服务能力的终端

  4. 服务器类型：
    a、按服务类型可分为：文件服务器、数据库服务器、邮件服务器、Web 服务器等；
    b、按操作系统可分为：Linux服务器、Windows服务器等
    c、按应用软件可分为 Apache服务器、Nginx 服务器、IIS服务器、Tomcat服务器、Node服务器等

  5. 服务器软件
    定义：使计算机具备提供某种服务能力的应用软件，称为服务器软件，通过安装相应的服务软件，然后进行配置后就可以使计算具备了提供某种服务的能力。

    常见的服务器软件：
    a、文件服务器：Server-U、FileZilla、VsFTP等
    b、数据库服务器：Oracle、MySQL、PostgreSQL、MSSQL
    c、邮件服务器：Postfix、Sendmail
    d、HTTP 服务器：Apache、Nginx、IIS、Tomcat、NodeJS

基础知识铺垫-网络相关概念

  1. 什么是IP地址，如何查看IP
    所谓IP地址就是给每个连接在互联网上的主机分配的一个32位地址。
    查看本机的IP： ipconfig 或者ipconfig -all
    查看域名的IP： ping

  2. 域名
    由于IP地址是基于数字，不方便记忆，于是便用域名来代替IP地址，
    说百了，域名就是方便IP的的别名，替代品

  3. DNS以及查找的规则
    记录了 IP 地址和域名的映射（对应）关系。
    查找优先级 本机hosts文件、DNS服务器

  4. 端口
    端口是计算机与外界通讯交流的出口，每个端口对应不同的服务。
    说白了就是服务所对应的出口。

  5. 一个域名可以对应多个IP
    但是一个IP只能对应一个域名

通信协议

  1. 常见的通信协议
    a、HTTP、HTTPS 超文本传输协议 —- 默认http是80端口,https是443端口
    b、FTP 文件传输协议 —- 默认是 21 端口
    c、SMTP 简单邮件传输协议 —- 默认是 25 端口

  2. HTTP协议
    即超文本传输协议，网站是基于HTTP协议的。
    HTTP协议是由从客户机到服务器的请求(Request)和从服务器到客户机的响应(Response)进行了约束和规范。
    即HTTP协议主要由请求和响应构成。

  3. HTTPS协议
    以安全为目标的HTTP通道，简单讲是HTTP的安全版。
    即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。
    SSL即安全套接层，是为网络通信提供安全及数据完整性的一种安全协议。

    详细了解：百度百科（https://baike.baidu.com/）

  4. C/S 和 B/S — 网络结构模式

    C/S — 客户机和服务器模式 — 例如QQ、迅雷
    B/S — 浏览器和服务器模式 — 例如OA、网页版QQ、网页版263邮箱

    但要注意：
    B/S是基于特定通信协议(HTTP)的C/S架构，也就是说B/S包含在C/S中，是特殊的C/S架构。
    B/S属于C/S，浏览器只是特殊的客户端，本质上开发浏览器，还是实现一个C/S系统。

    详细了解：百度百科（https://baike.baidu.com/）

原生Ajax实现页面局部更新

什么是Ajax
在不刷新页面的情况下，浏览器悄悄地、异步地向服务器发出HTTP请求。
服务器收到请求后，传回新的格式化数据回来（通常是JSON）。
浏览器解析JSON，通过DOM将新数据呈递显示，页面仅局部刷新

原生Ajax详解-xhr对象创建

  1. 标准下 — xhr = new XMLHttpRequest();
  2. IE6 — xhr = new ActiveXObject(‘Microsoft.XMLHTTP’);

原生Ajax详解-请求参数分析

  1. open()方法,调用open方法并不会真正发送请求，而只是启动一个请求以备发送。

    参数一： 请求方式（get获取数据，post提交数据）；
    参数二： 请求的地址
    参数三： 同步或者异步标识位，默认是true标识true，false表示

    注意：如果是get请求，那么请求参数必须在url中传递
     encodeURI()用来对中文参数进行编码，防止乱码。

  2. send()方法
    要发送特定的请求，需要调用send()方法。
    它接受一个参数，即要作为请求主体发送的数据。
    如果不需要通过请求主体发送数据，则必须传入null，不能留空。
    如果要发送请求，用send()方法,get请求这里需要添加null参数

  1. post请求参数通过send传递，不需要通过encodeURI()转码

    但是必须需要设置请求头参数

  2. xhr对象有一个重要的属性，就是readyState属性，表示“就绪状态”,就是xhr.readyState,readyState取值只有5种值：0、1、2、3、4.

    - 0 (uninitialized)  未初始化
- 1 (loading)      XMLHttpRequest对象正在加载
- 2 (loaded)     XMLHttpRequest对象加载完毕
- 3 (interactive)    正在传输数据
- 4 (complete)     全部完成

  3. 只要readyState属性值发生了变化，就会触发一个事件onreadystatechange事件。
    此时，可以用xhr.onreadystatechange = function(){}来捕获readyState改变之后做的事情。

  4. Ajax一旦用send方法发出HTTP请求之后,当readyState为4的时候，就会有一个属性产生 — xhr.status,表示的是请求的文件的状态码

    • 1** —- 消息
    • 2** —- 代码请求成功
    • 3** —- 重定向
    • 4** —- 请求错误
    • 5** —- 服务器错误
    • 6** —- 其它

原生Ajax详解-同源策略

什么是跨域
同源策略是浏览器的一种安全策略，所谓同源指的是请求URL地址中的协议、域名和端口号都相同，只要其中之一不相同就是跨域。
同源策略主要是为了保证浏览器的安全性
在同源策略下，浏览器不允许Ajax跨域获取服务器数据

说简单点：跨域是指从一个域名的网页去请求另一个域名的资源。只要协议、域名、端口有任何一个的不同，就被当作是跨域。
跨域解决方案

  1. jsonp

  2. document.domain + iframe

  3. location.hash + iframe

  4. window.name + iframe

  5. window.postMessage

  6. flash 等第三方插件

  7. Ajax本身开始支持跨域(cross-origin- resource sharing)

    99%的公司都在使用jsonp。

    注：前端解决跨域问题的8种方案
    http://www.cnblogs.com/JChen666/p/3399951.html

    原生Ajax详解-JSONP的原理

    动态创建script标签，通过标签的src属性发送请求
    动态创建script标签发出去的请求是异步请求
    服务器响应的内容【函数调用】

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
      /*这是jquery中jsonp简单版模块*/
      (function(window){
        Leon.extend({
            ajaxjsonp:function(defalults){
              var bkName ='jQuery' + ('1.11.1' + Math.random()).replace(/\D/g,"") +     '_' + (new Date().getTime());
              if(defaults.jsonpcallback){
                bkName = defaults.jsonpcallback ;
              }
              /*回调函数*/
              window[bkName] = function (data){
                defaults.success(data);
              }
            
              /*data拼接*/
              var parm ='';
              for(var j in defaults.data){
                parm += '&' + j + "=" + defaults.data[j]; 
              }
            
              /*动态创建script*/
              var script = document.createElement("script");
              script.src = defaults.url + "?" +defaults.jsonp +'='+bkName + parm;
              var head = document.getElementsByTagName('head')[0];
              head.appendChild(script); 
            }
          });
    })(window);

原生Ajax详解-数据格式(xml)

什么是XML

1、XML指可扩展的标记语言
2、主要用来输出和存储数据 — 注意：设置宗旨是【传输数据】，而非显示数据
3、XML标签没有预定义，需要自行定义标签 — 就是说XML具有自我描述性

XML 数据格式的缺点

1、元数据占用的数据量比较大，不利于大量数据的网络传输
2、解析不太方便

XML和HTML的区别

1、XML是用来传输和存储数据的，而HTML被设计是用来显示数据的
2、XML旨在传输数据，HTML旨在显示信息

XML的树结构

1、XML 文档形成了的也是一种“树结构”，
2、【XML文档必须包含根元素】。该元素是所有其他元素的父元素。树结构从根部开始，扩展到最低端

XML的语法

1、所有XML元素都必须都闭合标签
2、XML标签对大小写敏感，因此必须使用相同的大小写来编写打开标签和关闭标签
3、XML必须正确地嵌套
4、XML 文档必须有根元素
5、XML 的属性值须加引号
6、XML 中的注释 — <!– … –>
7、在 XML 中，空格会被保留
8、一些特殊符号需要用实体引用

原生Ajax详解-数据格式 (json)

  • 什么是JSON

    • JavaScript 对象表示法
    • 是存储和交换文本信息的语法
    • 轻量级的文本数据交换格式

  • JSON数据和普通的JS兑现的区别

    • json 对象没有变量
    • json 形式的数据结尾没有分号
    • json 数据中的键必须用双引号包括

  • JSON和XML对比

    • JSON 比 XML 更小、更快，更易解析

  • 把JSON文本转换为JavaScript对象

    • JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。

  • 为什么要转换

    • 在数据传输过程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。

  • 转换的方法

    • JSON_parse() — 把json形式的字符串转成对象
    • JSON_stringify() — 把对象转成字符串
    • eval() — 把字符串解析成JS代码并执行