Ajax基础入门
1.什么是Ajax技术？
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的独立的 Web 应用程序的技术。
通过在浏览器与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行局部更新。
2.为什么要采用Ajax技术（优缺点）
使用Ajax的最大优点，就是能在不更新整个页面的前提下和服务器进行数据交互。这使得Web应用程序更为迅捷地回应用户动作。
优点：
1.减轻服务器负担，按需要获得数据。
2.无刷新更新页面，进行少量数据交互。
缺点:
1.对搜索引擎支持不好,因为数据是动态加载,搜索引擎爬取不到数据
3.Ajax的原理
Ajax的原理简单来说通过浏览器的javascript对象XmlHttpRequest(Ajax引擎)对象来向服务器发异步请求并接收服务器的响应数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。即用户的请求间接通过Ajax引擎发出而不是通过浏览器直接发出,同时Ajax引擎也接收服务器返回响应的数据,所以不会导致浏览器上的页面全部刷新.什么意思呢？看下图：
4.原生Ajax
4.1创建ajax对象（语法）
let xhr=new XMLHttpRequest()(xhr是变量名，随意取，但一般是xhr)
5.原生Ajax实现get方式
5.1分为四步走
- 创建ajax对象
- 设置发送方式和请求地址(使用open方法)
let xhr=new XMLHttpRequest() console.log(xhr)
- 发送请求（使用send方法 同上）
- 监听状态码和响应码（只有当
readyState=4&&status=200时才是请求成功，且响应就绪。onreadystatechange属性是一个方法,当Ajax引擎的状态发生改变时都会执行onreadystatechange属性对应的方法.
readyState 状态码
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
#4: 请求已完成，且响应已就绪
== http状态码（响应码）==
1 消息
2 成功（200就是成功）
3 重定向
4 请求错误（404 No Found）
5 服务器错误
自己可以去搜来看看
5.2代码实例
// 1. 创建ajax对象 let xhr=new XMLHttpRequest();//2. 设置发送方式和请求地址xhr.open('get/GET','请求地址?键名=值&键名=值');//这里是原生写法，后期封装不这样传参//3.发送请求xhr.send();//4.监听状态码和响应码xhr.onseadystatechange=function(){//ajax状态码等于4 且 http状态码等于200,表示请求成功 if(xhr.readState==4 && xhr.status==200){ //获取响应的数据 var data=xhr.response; //各种渲染操作 }6原生Ajax实现post方式
原生Ajax实现post方式，步骤和get方式几乎一样，不同之处是post方式多了一步，即设置请求头
// 1. 创建ajax对象var xhr = new XMLHttpRequest()// 2. 配置请求方式和请求地址xhr.open('post', '服务器地址url')// 3. 设置请求头xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');// 4. 发送请求xhr.send('参数名1=参数值1&参数名2=参数值2')// 5. 监听状态变化 & 接收数据xhr.onreadystatechange = function () {// 如果ajax状态等于4 且 http状态码等于200if (xhr.readyState === 4 && xhr.status === 200) {// 接收数据var data = JSON.parse(xhr.response) // 后端响应的数据是字符串 需要转为对象console.log( data)}}由此可见，还有比较重要的一点是传参方式不一样
//get方式传参在请求的地址后面（后续封装后以对象方式传参）xhr.open('请求方式', '服务器地址url?参数名1=参数值1&参数名2=参数值2')//post方式在send里传（后续封装后以对象方式传参）xhr.send('参数名1=参数值1&参数名2=参数值2')
