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请求所处的状态
值 | 状态 | 描述 |
---|---|---|
0 | UNSENT | XMLHttpRequest对象已被创建,但尚未被调用 open方法 |
1 | OPENED | open()方法已经被调用 |
2 | HEADERS_RECEIVED | send()方法已经被调用,响应头也已经被接收 |
3 | LOADING | 数据接收中,此时response属性中已经包含部分数据 |
4 | DONE | 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);
}
}
}