Ajax加强

XMLHttpRequest的基本使用

XMLHttpRequest（xhr）是浏览器提供的js对象，可以通过它请求服务器上的数据资源

jQuery中的Ajax就是基于xhr对象封装出来的

使用xhr发起GET请求

步骤：

1、创建xhr对象

var xhr = new XMLHttpRequest();

2、调用xhr.open()函数

xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');

3、调用xhr.send()函数

xhr.send();

4、监听xhr.onreadystatechange事件

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
       // 获取服务器响应的数据
       console.log(xhr.responseText);
    }
}

xhr的readyState属性

是表示当前Ajax请求所处的状态

使用xhr发起带参数的GET请求

只需在调用xhr.open期间，为URL地址指定参数即可：

xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')

URL后面拼接的参数，叫做查询字符串（用于向服务器发送信息的字符串---变量）

格式：？参数=值，多个参数的话，使用&符号进行分隔

GET请求携带参数的本质就是将参数以查询字符串的形式，追加到URL地址后面

URL编码与解码

URL地址中只允许出现英文、标点符号、数字，如果出现其他字符就需要对其进行编码（转义）

URL编码的原则：使用允许的去表示不允许的

浏览器提供了URL编码与解码的API，分别是：

encodeURL（）编码的函数

decode URL（）解码的函数

注：因为浏览器会自动对URL地址进行编码操作，所以大多数情况下不需要关心URL地址的编码和解码操作

关于URL的更多知识：为什么要进行URL编码_李狗要多读书的博客-CSDN博客_url为什么要编码

使用xhr发起POST请求

步骤：

1、创建xhr对象

var xhr = new XMLHttpRequest();

2、调用xhr.open()函数

xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook');

3、设置Content-Type 属性（固定写法--必须写在open（）函数调用后）

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

4、调用xhr.send()函数，同时指定要发送的数据

xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书馆出版社');

5、监听xhr.onreadystatechange事件

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 获取服务器响应的数据
        console.log(xhr.responseText);
    }
}

数据交换格式

服务器端与客户端之间进行数据传输与交换的格式

前端领域经常提及的是XML和JSON。其中重点学习JSON

XML（EXtensible Markup Language）--可扩展标记语言（和HTML类似也是一种标记语言）

XML和HTML的区别

虽然二者都是标记语言，但是，他们没有任何关系

HTML是被设计来描述网页上的内容，是网页内容的载体

XML是设计用来传输和存储数据，是数据的载体

XML的缺点：

1、格式臃肿，和数据无关的代码多，体积大，传输效率低

2、在JavaScript中解析XML比较麻烦

JSON（JavaScript Object Notation）---JavaScript对象表示法

简单讲：JSON就是JavaScript对象和数组的字符串表示法

注：JSON的本质是字符串

作用：是一种轻量级的文本数据交换格式，用于存储和传输数据，JSON比XML更小、更快、更易解析

现状：2001年开始推广，到现在JSON已经成为主流的数据交换格式

JSON的两种结构

JSON中包含对象和数组，通过这两种结构的相互嵌套，可以表示各种复杂的数据结构

对象结构：在JSON中表示为{}括起来的内容。数据结构为{key：value，key：value，...}

注：key必须用英文的双引号包裹，value的数据类型可以是数字、字符串（也需用双引号包裹）、布尔值、null、数组、对象6中类型

数组结构：在JSON中表示为[]括起来的内容。数据结构为["java","javascript",30,true...]

数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

JSON语法注意事项：

1、属性名必须使用双引号包裹

2、字符串类型的值必须使用双引号包裹

3、JSON中不允许使用单引号表示字符串

4、JSON中不能写注释

5、JSON最外层必须是对象或数组格式

6、不能使用undefined或函数作为JSON的值

JSON和JS对象的关系

JSON是JS对象的字符串表示法，它使用文本表示一个JS对象的信息，本质是一个字符串

//这是一个对象 
var obj={a:'Hello',b:'Word'} ​ 
//这是一个JSON字符串，本质是一个字符串 
var json='{"a":"Hello","b":"World"}'

JSON和JS对象的互转

JSON字符串转换为JS对象，使用JSON.parse()方法：

var obj=JSON.parse('{"a":"Hello","b":"world"}') //结果是{a:'Hello',b:'World'}

JS对象转换为JSON字符串，使用JSON.stringify()方法：

var json=JSON.stringify({a:'Hello',b:'World'}) //结果是'{"a":"Hello","b":"world"}'

序列化和反序列化

把数据对象转换为字符串的过程，叫做序列化

把字符串转换为数据对象的过程，叫做反序列化

封装自己的Ajax函数

定义options参数选项

处理data参数

// 书写处理data的函数
function resolveData(data) {
    var arr = [];
    for (var k in data) {
        var str = k + '=' + data[k];
        arr.push(str);
    }
    return arr.join('&');
}

定义itheima函数

function itheima(options) {
    var xhr = new XMLHttpRequest();
​
    // 把外界传递过来的参数对象，转换为 查询字符串
    var qs = resolveData(options.data);
​
    // 判断请求的类型
    if (options.method.toUpperCase() === 'GET') {
        // 发起GET请求
        xhr.open(options.method, options.url + '?' + qs);
        xhr.send();
    } else if (options.method.toUpperCase() === 'POST') {
        // 发送post请求
        xhr.open(options.method, options.url);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(qs);
    }
​
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var result = JSON.parse(xhr.responseText);
            options.success(result);
        }
    }
}