1.什么是XMLHttpRequest
XMLHttpRequestapp开发定制公司是浏览器提供的JavaScript对象,app开发定制公司通过它可以请求网络服app开发定制公司务器上的资源,jQuery中的ajaxapp开发定制公司函数就是基于这个对象app开发定制公司封装出来的
2.使用xhr发起GET请求
2.1.创建XMLHttpRequest对象
var xhr=new XMLHttpRequest()
2.2.调用.open()函数,创建请求
xhr.open('GET','htp://www.liulongbin.top:3006/api/getbooks')
2.3.使用xhr.send()函数,发送请求
xhr.send()
2.4.监听xhr.readyonstate
- xhr.onreadystatechange=function(){
-
- //2.4.1监听xhr对象的请求状态与服务器的状态
-
- if(xhr.readyState===4&&xhr.status===200){
- //打印请求的数据
- console.log(xhr.responseText);
- }
- }
3.xhr对象的steadyState属性
值 | 状态 | 描述 |
0 | UNSENT | XMLHttpRequest对象已经被创建,但是还没有调用open方法 |
1 | OPENED | open()方法已经被调用 |
2 | HEADEERS_RECEIVED | send()方法已经被调用,响应头函数也已经被接收 |
3 | LOADING | 数据接收中,response属性已经包含部分数据 |
4 | DONE | ajax请求完成,此时数据已经传输完成或者失败 |
- var xhr = new XMLHttpRequest();
- xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');
- xhr.send();
- xhr.onreadystatechange = function () {
- if (xhr.readyState === 4 && xhr.status === 200) {
- console.log(xhr.responseText);
- }
- }
4.查询字符串
在URL末尾添加的用于向服务器发送信息的字符串
格式
在URL末尾加上英文的?,再加上参数=值,多个参数用&进行分割,就可以把想要发送给服务器的数据添加到URL中
http://liulongbin.top:3006/api/getbooks?id=1&bookname=西游记
- var xhr = new XMLHttpRequest();
- xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1');
- xhr.send();
- xhr.onreadystatechange = function () {
- if (xhr.readyState === 4 && xhr.status === 200) {
- console.log(xhr.responseText)
- }
- }
5.URL编码
URL中包含中文字符就必须对URL进行编码,编码原则就是使用安全字符表示不安全字符
URL编码API
encodeURI()
URL解码API
decodeURI()
- <script>
- var str = '按摩器加偶按你在哪';
- console.log(encodeURI(str));//%E6%8C%89%E6%91%A9%E5%99%A8%E5%8A%A0%E5%81%B6%E6%8C%89%E4%BD%A0%E5%9C%A8%E5%93%AA
- var str2 = '%E6%8C%89%E6%91%A9%E5%99%A8%E5%8A%A0%E5%81%B6%E6%8C%89%E4%BD%A0%E5%9C%A8%E5%93%AA';
- console.log(decodeURI(str2));//按摩器加偶按你在哪
- </script>
6.使用xhr发起POST请求
6.1 创建xhr对象
var xhr=new XMLHttpRequest()
6.2 调用xhr.open()函数
xhr.open('POST','http://www.liulongbin.top:3006/api/addbook');
6.3设置Content-Type属性
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
6.4 调用xhr.send()函数,并指定要发送的数据
xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')
6.5 监听xhr.onreadystatechange事件
- xhr.onreadystatechange=function(){
- if(xhr.readyState===4&&xhr.status===200){
- console.log(xhr.responseText)
- }
- }
- <script>
- var xhr = new XMLHttpRequest();
- xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook');
- xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
- xhr.send('bookname=水浒&author= 施耐庵&publisher=天津教育出版社');
- xhr.onreadystatechange = function () {
- if (xhr.readyState === 4 && xhr.status === 200) {
- console.log(xhr.responseText);
- }
- }
- </script>
7.数据交互格式
数据交互格式就是服务器与客户端之间进行数据传输与交换的格式,前端领域常用的交互格式是XML和JSON
XML:可拓展标记语言,用来传输和存储数据,是数据的载体
JSON:本质是字符串,是一种轻量级的文本数据交互格式,专门用于存储和传输数据,JSON比XML更小,更快,更易于传输
JSON有两种结构
对象结构
{"key":value, "key":value, ...}
注意:key必须是英文双引号包裹的字符串,value可以是数字,字符串,布尔值,null,数组和对象,JSON全用双引号
例如
- {
- "name":"zs",
- "age":20,
- "address":"null",
- "hobby":["吃饭","睡觉","跑步"]
- }
数组结构
["值","值","值", ...]
例如
["1","hhhh",["hhh","你哈"]]
注意事项:
属性名必须用双引号包裹
字符串类型的值必须用双引号包裹
JSON中不允许使用单引号表示字符串
JSON中不能写注释
JSON最外层必须是对象或数组格式
不能使用undefined或函数作为JSON的值
JSON的作用:在计算机与网络之间存储和传输数据
JSON的本质:用字符串来表示JS对象数据或数组数据
JSON和JS对象的互相转换
将JSON字符串转换为JS对象,使用JSON.parse()方法
var obj=JSON.parse('{"a":"Hello","b":"world"}')
将JS对象转换为JSON格式,使用JSON.stringify()方法
var json=JSON.stringify({a:'hello',b:'world'})
- <script>
- var obj = JSON.parse('{"a":"Hello","b":"world"}');
- console.log(obj)
- var json = JSON.stringify({ a: 'Hello', b: 'world' });
- console.log(json);
- </script>
序列化:把数据对象转换为字符串的过程,例如JSON.stringify()
反序列化:把字符串转换为数据对象的过程,例如JSON.parse()
- <script>
- var xhr = new XMLHttpRequest();
- xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');
- xhr.send();
- xhr.onreadystatechange = function () {
- if (xhr.readyState === 4 && xhr.status === 200) {
- console.log(xhr.responseText);
- var result = JSON.parse(xhr.responseText);
- console.log(result)
- }
- }
- </script>