博学谷it学习技术支持

1.什么是xhr

XMLHttpRequest（简称xhr）是浏览器提供的 JavaScript对象，通过他它，可以请求服务器上的数据资源。之前所学的[jQuery]中的Ajax函数，就是基于xhr对象封装出来了的

2.xhr的一些属性和方法

属性：

readyState xhr的状态码响应体接收完毕 status 获取状态码 responseText 获取响应体，文本格式 responseXML 获取响应体，xml格式 onreadtstatechange 事件，当xhr.readyState属性发生改变触发 onload 事件，响应接收完毕

方法：

open(method, url, async) 设置请求的方式，请求的路径，同步/异步 send(requestBody) 发送请求体 setRequestHeader(key, value) 设置请求头 getResponseHeader(key) 获取响应头

3.具体的请求方式get和post

get请求方式

     // 1先创建咱们的XMLHttpRequest
    let xhr=new XMLHttpRequest()
 
    // 2在利用open方法将咱们的API接口引用过来
    xhr.open('GET','http://maowei.api.tp6:8000/user?page=1&page_size=3')
 
    // 3在利用send发起AJax请求
    xhr.send()
 
    // 4在利用onreadystatechange函数来进行监听
    xhr.onreadystatechange=function(){
      // 在监听xhr的请求状态 readyState为4代表请求成功，status为200代表响应成功
      if (xhr.readyState===4 || xhr.status===200) {
        // 打印数据
        console.log(xhr.responseText);
      }
    }

注意：第四步onreadystatechange函数这块if里的条件是固定写法

GET请求没有请求主体，所以send(null)；若有请求数据，追加为URI后面的查询字符串

post请求方式

步骤：

（1）创建xhr对象

（2）调用xhr.open()函数

（3）设置Content-Type属性

（4）调用xhr.send()函数

（5）监听xhr.onreadStatechange()事件

 
    xhr.open('POST','http://maowei.api.tp6:8000/user')
    
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
 
    xhr.send('id=2')
 
    xhr.onreadystatechange=function(){
      if (xhr.readyState===4 || xhr.status===200) {
        console.log(xhr.responseText);
      }
    }

注意：这里的第三步设置Content-Type属性是固定写法，不要改，而且顺序位置也不要变，一定是跟在open函数后，在send函数之前的

4.GET 和POST区别

GET比POST 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

5.数据交换格式（JSON）

json的全称为：JavaScript Object Notation，是一种轻量级的数据交互格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。【以上来自于百度百科】
简单来说：json就是一种在各个编程语言中流通的数据格式，负责不同编程语言中的数据传递和交互。

5.1 JSON的语法

数组（Array）用方括号(“[]”)表示。
对象（0bject）用大括号(“{}”)表示。
名称/值对(name/value）组合成数组和对象。
名称(name）置于双引号中，值（value）有字符串、数值、布尔值、null、对象和数组。
并列的数据之间用逗号(“,”）分隔

5.2 JSON和XML

JSON常被拿来与XML做比较，因为JSON 的诞生本来就多多少少要有取代XNL的意思。相比 XML，JSON的优势如下:

没有结束标签,长度更短,读写更快
能够直接被JavaScript解释器解析
可以使用数组

5.3 JSON 和 JS 对象互转

要实现从JSON字符串转换为JS对象，使用 JSON.parse() 方法

要实现从JS对象转换为JSON字符串，使用 JSON.stringify() 方法

<script>
	var str = '{"name": "兮动人","age":22}';
	var obj = JSON.parse(str);
	console.log(obj);
</script>



<script>
	var str = '{"name": "兮动人","age":22}';
	var obj = JSON.parse(str);
	console.log(obj);
        
	var jsonstr = JSON.stringify(obj);
	console.log(jsonstr);
</script>

目前就先到这块，后续再写！

xhr的基本使用