原生js之Ajax
1、什么是Ajax？
全称：Asynchronous JavaScript and XML （异步的 JavaScript和 xml），是前后端数据交互的一种技术（前端通过 Ajax 发送http请求->后台接受前端数据并处理->处理完毕返回响应数据）。原理简单但功能强大。
核心优点：在不刷新整个页面的情况下实现局部数据刷新。大大节省了资源的消耗。
应用范围：现阶段的前后端数据交互大多使用 Ajax 技术。
2、怎么发送一个 Ajax请求 。有以下几个关键点：
①创建 XMLHttpRequest 对象
这个对象 是 实现 Ajax的基础 用于和服务器进行数据交互
var xh = new XMLHttpRequest();
②调用 XMLHttpRequest 的 open() 和 send() 方法
xh.open(method,url,true|false);
三个参数 分别是：method，请求的方法，了解 post 和 get 基本就够了（一般就用这两种方法）。url:请求的服务器API接口。最后一个是否异步，默认是异步。
xh.send(string);
参数 ：当open中的 method 是post 时， string代表的是要向后台传送的数据。当 method 是 get 时 string为空代表get请求不通过send方法传送数据。
扩展：post和get传参数的区别：get通过地址栏向后台传数据 例如：http://www.baidu.com?name=zjl&age=18 ，“？”后面的就是传送的数据。post传送的数据就是通过上面讲到的send()向后台发送数据.
③前面两点讲了如何发送一个请求 那么如何接受后台返回的数据？。
xh.onreadystatechange() 通过该事件监听当前请求的状态并接受后台传送的数据，readyState 改变时就会触发该事件
readyState取值：
- 0: 请求未初始化
- 1:服务器连接已建立
- 2：请求已接收
- 3：请求处理中
- 4：请求已完成，且响应已就绪
常见响应状态码(status)：200：请求响应成功 404：找不到路径 检查请求路径是否正确
了解readyState 和 status 之后 即可判断何时接收后台传回的数据
④通过 xh.responseText 属性获得响应的字符串。如果服务器响应的是 xml ，则通过 xh.responseXML 属性进行接收。
3.通过以上的了解，直接看个Ajax完整实例。注意：通过控制台查看打印结果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax</title> <script> // js 的原生 Ajax // 获取所有的数据 function getAll(){ // 创建 XMLHttpRequest 实例 var http = new XMLHttpRequest(); // 发送请求的方式 和 URL 地址 http.open('GET','http://www.wangshuwen.com/api/getRegion');//访问一个免费接口，如果失效可替换 http.onreadystatechange = function(){ if (http.status === 200 && http.readyState === 4) { console.log(http.responseText); var res = http.responseText;// 响应体数据 console.log(JSON.parse(res));// 将 json 数据转化为js数据 } } // 发送请求 http.send(); } getAll(); </script> </head> <body> </body> </html>
