Ajax 相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。
1、服务器端大多情况下以 JSON 对象作为响应数据的格式 2、在http请求与响应的过程中，请求参数 和 响应内容如果是对象类型，会被转换为对象字符串进行传输。
JSON.parse() //将json字符串转换为json对象 xhr.onload = function(){ var responseText = JSON.parse(xhr.responseText); //将JSON字符串转换为JSON对象 console.log(responseText); var str = '<p>' + responseText.name + '<p>'; document.body.innerHTML = str; }1、请求方式
//GET请求方式 xhr.open('get','http://www.baidu.com'); //POST请求方式 xhr.open('post','http://www.baidu.com'); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded') //设置请求参数格式的类型（post请求必须要设置） xhr.send('name=lisi&age=20'); xhr.open('post','http://www.baidu.com'); xhr.setRequestHeader('Content-Type','application/json') //设置请求参数格式的类型（post请求必须要设置） xhr.send(JSON.stringify({name: 'lisi', age: '20'})); //JSON.stringify()将json对象转换为json字符串2、请求参数的格式
//application/x-www-form-urlencoded name=lisi&age=20&sex=男 //application/json {name: 'lisi', age: '20', sex: '男'} //get请求无法提交json对象数据格式，传统网站的表单提交也不支持3、Ajax 状态码
0：请求未初始化（未调用open（）） 1：请求已经建立，但是还没有发送（未调用send（）） 2：请求已经发送 3：请求正在处理中，通常响应中已经有部分数据可以用了 4：响应已经完成
xhr.readyState //获取Ajax状态码 //onreadyStatechange事件 （当Ajax状态码变化时将自动触发该事件） xhr.onreadyStatechange = function(){ //2：请求已经发送 //3：请求正在处理中，通常响应中已经有部分数据可以用了 //4：响应已经完成 console.log(xhr.readyState); if(xhr.readyState == 4){ //对ajax状态码进行判断 console.log(xhr.responseText); } }4、Ajax 错误处理
服务器端能接收到请求，但是返回的结果不是预期结果 判断服务器端返回的状态码，分别进行处理，xhr.status 获取http状态码 xhr.send(); xhr.onload = function(){ console.log(xhr.responseText); if(xhr.status == 400){ //xhr.status 获取http状态码 alert('请求出错') } }网络畅通，服务器端没有接收到请求，返回404状态码 检查请求地址是否错误
网络畅通，服务器端能接收到请求，返回500状态码 服务器端错误
网络中断，请求无法发送到服务器端 触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理
xhr.onerror = function(){ alert('网络中断，无法发送ajax请求') }5、低版本IE浏览器的缓存问题
在低版本的IE浏览器中，Ajax请求中有严重的缓存问题，在请求地址不发生变化的情况下，只有第一次请求会真正发送到服务器端，后续的请求都会从浏览器的缓存中获取结果，即使服务器端的数据更新了，客户端拿到依然是缓存中的旧数据。
**解决方案：**在请求地址的后面添加请求参数，保证每一次请求中的请求参数的值不相同。
xhr.open('get','http://www.baidu.com?t=' + Math.random()); //?t=6、Ajax 异步
同步 上一行代码执行完成后才执行下一行代码，代码逐行执行
异步 异步代码需要花费时间去执行，但程序不会等待异步代码执行完成后再执行后续代码，而是直接执行后续代码，然后再回头看异步代码是否执行完毕返回结果，如果返回结果再调用回调函数处理异步代码执行的结果
console.log('before'); setTimeout(()=>{ console.log('last'); },2000); console.log('after');7、模板引擎
7.1、下载 art-template 模板引擎库文件并在 HTML 页面中引入库文件
<script src="./js/template-web.js"></script>7.2、准备 art-template 模板
<script id="tq1" type="text/html"> <div class="box"></div> </script>7.3、告诉模板引擎将哪一个模板与哪个数据进行拼接
var html = template('tp1',{username: 'lisi', age: '20'});7.4、通过模板语法告诉模板引擎，数据和html字符串要如何拼接
<script id="tq1" type="text/html"> <div class="box">{{username}}</div> </script>7.5、将拼接好的html字符串添加到页面中
document.getElementById('container').innerHTML = html;8、FormData 对象
8.1、作用
模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。异步上传二进制文件。8.2、使用
准备HTML表单 <form id="form"> <input type="text" name="username" /> <input type="password" name="password" /> <input type="button" /> </form> 将HTML表单转化为 formData 对象 var form = document.getElementById('form'); var formData = new FormData(form); 提交表单对象 xhr.send(formData); 获取表单对象中属性的值 formData.get('key'); console.log(formData.get('username')); 设置表单对象中属性的值 formData.set('key','value'); console.log(formData.set('username','itcast')); //设置的表单属性存在，覆盖属性原有的值 console.log(formData.set('age',100)); //设置的表单属性不存在，会创建这个表单属性 删除表单对象中属性的值 formData.delete('key'); 向表单对象中追加属性值 formData.append('key','value'); //设置的表单属性存在，两个值都保留8.3、FormData 二进制文件上传
<input type="file" id="file"/> <script type="text/javascript"> var file = document.getElementById('file') file.onchange = function(){ //当用户选择文件时触发 var formData = new FormData(); //创建空表对象 formData.append('attrName',this.files[0]); //将用户选择的二进制文件添加到表单对象中 xhr.open('post','www.baidu.com'); //配置ajax对象，请求方式必须为post xhr.send(formData); } </script>9、同源政策
如果两个页面拥有相同的协议、域名和端口，那么它们属于同一个源，只要有一个不同就是不同源
http://www.baidu.com/dir/page.htmlhttp://www.baidu.com/dir2/other.html 同源http://baidu.com/dir/page.html 不同源（域名不同）http://v2.www.baidu.com/dir/page.html 不同源（域名不同）http://www.baidu.com:81/dir/page.html 不同源（端口不同）https://www.baidu.com/dir/page.html 不同源（协议不同）