AJAX

什么是ajax

AJAX (阿贾克斯 Asynchronous Javascript And Xml ) 异步JavaScript和XML，是指一种创建交互式网页应用的网页开发技术, 可以访问服务器数据的局部刷新的技术。

AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

作用：

允许客户端脚本发送HTTP请求，去请求服务器的数据来创建动态网页，可以在不重新加载整个网页的情况下，对网页的某部分进行更新。也称局部刷新

JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 通过JavaScript中的一些模式来表示结构化数据, JSON 并不是 JavaScript 独有的数据格式，其他很多语言都可以对 JSON 进行解析和序列化,
除了JSON外, 还有XML也是一种数据表示方式;

JSON 的语法可以表示三种类型的值：

1.对象表示法
2.数组表示法
3.对象和数组的结合的表示法

对象表示法:
JavaScript 对象字面量表示法：

var box = {
      name : 'Zhang', 
      age : 100
};

JSON 中的对象表示法需要加上双引号，并且不存在赋值运算和分号:

{ "name" : "Zhang", //需要使用双引号，否则转换会出错
  "age" : 100
}

数组表示法:
JavaScript 数组字面量表示法：

 var box = [100, 'Zhang', true];

JSON 中的数组表示法同样没有变量赋值和分号：

 [“100”, “Zhang”, “true”]

对象和数组结合的复杂形式:

[ { "name" : "a", 
    "age" : 1
  },
  { "name" : "b",
    "age" : 2 
  },
]

JSON 的解析:

JSON解析就是对JSON格式的字符串解析成原生的JavaScript值(数组或对象)

1.eval()函数. 但这个方法可能会造成安全问题
2.JSON 对象提供了另外两个方法(常用): JSON.parse(): 将JSON字符串转换为JavaScript原生值(对象或数组);
JSON.stringify() : json序列化,将原生JavaScript值(对象或数组)转换为JSON字符串的过程;

XMLHttpRequest

AJAX的核心是 JavaScript对象XMLHttpRequest 。它是一种支持异步请求数据的技术。 (简称 XHR)。

XHR 的出现，提供了向服务器发送请求和解析服务器响应流畅的接口。能够以异步方式从服务器获取更多的信息，这就意味着，用户只要触发某一事件，在不刷新网页的情况下，更新服务器最新的数据。

XHR对象支持IE7+、Firefox、Opera、Chrome 和 Safari 等浏览器, 但是不支持IE6。

创建 XHR 对象可以直接实例化 XMLHttpRequest 。
var xhr = new XMLHttpRequest();
alert(xhr); //XMLHttpRequest

如果是 IE6 及以下，那么我们必须还需要使用 ActiveX 对象通过 传入参数Microsoft.XMLHTTP来实现。
xhr = new ActiveXObject("Microsoft.XMLHTTP");

如何写

open()方法:
它接受三个参数：要发送的请求类型(get、post)、请求的 URL 和表示是否异步 xhr.open('get', 'demo.json', false); //对于demo.json 的 get 请求，false表示同步

send()方法:
向服务器发送请求 open()方法并不会真正发送请求，而是准备好需要发送给服务器的内容。我们需要通过send()方法向服务器发送请求
send()方法接受一个参数，作为请求体发送的数据。如果是get方式请求则填 null。 xhr.send(null);

abort()方法:
取消异步请求, 如果需要取消某异步请求, 则在send()之后再调用, 写在send()之前调用会报错
//取消异步请求 xhr.abort();

XHR 对象的属性:

当请求发送到服务器端，收到响应后，响应的数据会自动填充 XHR 对象的属性。一共有四个属性：

status: 响应的 HTTP 状态 (重要)
statusText: HTTP 状态的说明 (重要)
responseText:  作为响应主体被返回的文本 (重要)
responseXML: 如果响应主体内容类型是"text/xml"或"application/xml"，则返回包含响应数据的 XML文档,否则是null

status 属性:

  HTTP请求状态码, 一般 HTTP 状态代码为 200 则表示请求服务器成功

HTTP 协议中， 状态码
   404:  找不到服务器中的资源
   403:  服务器缓存
   500：  服务器故障
   200:  【正常】返回
   400:  语法错误导致服务器不识别
   503:  由于服务器过载或维护导致无法完成请求

readyState 属性

0:       没有发送
1:       已经发送了，但服务器还没有接收到
2:       服务器已经接收到了，但还没有处理完数据
3:       服务器已经处理完数据，并已经返回
4:       客户端已经正常接收到服务器返回的数据

// 1. 创建对象
var xhr = new XMLHttpRequest();

// 2. 准备
        //    参数1： 获取数据的方式， GET、POST
        //    参数2： 向服务器请求数据的地址 格式： 例如：http://ip:8080/ajax/ajaxtest
        //    参数3： false 代表同步的方式请求数据，true 代表异步
        // xhr.open("GET", "http://127.0.0.1:8080/ajax/ajaxtest", false);
xhr.open("GET", "http://127.0.0.1:8080/ajax/ajaxtest", false);

// 3. 发送请求
xhr.send();

// 4. 获取数据
xhr.onreadystatechange = function() {
    if (req.readyState == 4) {
        if (req.status == 200) {
            // 200 说明返回的数据是正常的
            var str = req.responseText;
        }
    }
}

HTTP协议

HTTP是一个属于应用层的面向对象的协议, 由于其简捷,快速的方式, 适用于分布式超媒体信息系统.

HTTP协议的主要特点有:

 1, 支持客户端/服务端模式. 即请求(request)-响应(response)模式
 2, 简单快速,  客户端向服务端发送请求时, 只需要传送请求方式和路径即可,所以简单, 由于HTTP协议简单, 使得HTTP服务器的程序规模小, 因而速度很快;
 3, 灵活, 传输数据类型种类多
 4, 无连接,  请求一次服务器后立刻断开连接, 即非长连接, 即短连接
 5, 无状态,  HTTP协议对事务处理没有记忆能力; session

HTTP协议的请求方式: GET, POST, HEAD, PUT等 HTTP包含: 请求头和请求体 响应头和响应体

GET请求

在通过HTTP协议向服务器请求的过程中，有两种最常用的请求方式，分别是: GET和POST。在Ajax使用的过程中，GET的使用频率又要比POST高得多. GET请求最常用于向服务器获取数据。也可以将少量字符串参数提交给服务器。 xhr.open('get', 'demo.php?football=1&name=Koo', true);

用途： 向服务器传递数据 football=2 football=3

格式： 地址?参数名1=值1&参数名2=值2&参数名3=值3

通过URL后的问号?给服务器传递键值对数据，服务器接收到请求后可以从中获取到对应的数据

POST请求:

POST 请求可以包含非常多的数据，我们在使用表单提交的时候，很多就是使用的 POST 传输方式。
xhr.open('post', 'demo.php', true);

POST请求向服务器发送的数据，不会跟在URL后面，而是通过 send()方法向服务器提交数据。
xhr.send('name=Zhang&age=100');

POST请求和Web表单提交不同，需要使用 XHR 来模仿表单提交
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

GET与POST的对比

 共同点： 都是向服务器请求数据的方式
 GET                                                             
 数据放在地址栏后 ?reg=123&psw=123                                           
 数据量小                                                                      
 安全性低                                                                      
 传输速度快    
 POST
 send(数据参数)
 数据量大
 安全性高
 传输速度慢

字符编码:

特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理，中文字符的返回及传参，可以将页面保存和设置为 utf-8 格式即可.

//一个通用的函数给URL添加参数
addURLParam(url, name, value) {
    //判断的 url 是否有已有参数 , 添加?或者&来连接参数
    url += (url.indexOf('?') == -1 ? '?' : '&'); 
    url += encodeURIComponent(name) + '=' + encodeURIComponent(value); 
    return url;
}

请求头:

请求头包含HTTP的头部信息, 即服务器返回的响应头信息和客户端发送出去的请求头信息。我们可以获取响应头(response)信息或者设置请求头(request)信息。

//使用 getAllResponseHeaders()获取整个响应头信息
alert(xhr.getAllResponseHeaders());

//使用 getResponseHeader()获取单个响应头信息
alert(xhr.getResponseHeader('Content-Type'));

//使用 setRequestHeader()设置单个请求头信息 xhr.setRequestHeader('MyHeader', Zhang); //放在 open 方法之后，send 方法之前