1、Ajax(Asynchronous JavaScript And XML) 异步的JavaScript和XML
XML 可扩展标记语言 Ajax是常用的WEB开发技术，是联系前端和后端的桥梁 应用：搜索引擎（例如在百度里输入一个字符，下面就自动显示相关信息的列表 其实这些信息就是通过使用Ajax从服务器获取的）2、HTTP原理介绍
HTTP：超文本传输协议访问网页的原理：响应 和 请求请求：从客户端到服务器端的请求消息响应：服务器根据客户请求返回内容请求方式：get 和 post get方式请求：需要从服务器获取数据post方式请求：把客户端的数据提交给服务器总结：Ajax就是通过运行JavaScript程序发起HTTP请求，而不用非得把请求地址写到
浏览器地址栏，再按回车请求网页3、Chrome浏览器开发者工具
可以通过Network选项查看发起的请求3、搭建自己的WEB服务器
如何让自己的电脑变成服务器：安装WEB服务器程序最常用的WEB服务器程序是Apache，但是在Windows环境下安装会比较困难，所以可以安装一个集成环境：XAMPP(下载地址：http://www.xampps.com)本机的IP地址：127.0.0.1 等同于域名 localhost
将网页放到XAMPP安装根目录下htdocs文件夹下
4、Ajax使用步骤
（1）创建XMLHttpRequest对象var xhr = new XMLHttpRequest();
（2）使用onreadystatechange事件监听请求过程的变换，并设置匿名函数处理响应内容readyState状态0-4
0：请求初始化
1：服务器建立连接
2：收到的请求
3：处理请求
4：请求完成并准备响应就绪
（3）初始化请求
xhr.open()
（4）发送请求
xhr.send()
5、XMLHttpRequest对象
属性:onreadeystate事件
readyState XMLHttpRequest对象的状态码，从0-4变化 0：请求初始化 1：服务器建立连接 2：收到的请求 3：处理请求 4：请求完成和响应准备就绪 status HTTP状态码，例如404/200/500 responseText 返回作为一个字符串的响应数据方法：
open(method,url,asyn)
send() setRequestHeader()仅在post请求时使用 xhr.setRequestHeader("Content-Type","aplication/x-www-form-urlencoded");
==============以下使用表单方式和Ajax方式请求区别==============
表单方式：地址栏会跳转Ajax方式：地址不会跳转6、表单GET请求与POST请求的区别
GET请求会将数据拼接显示在地址栏中，不安全。且地址栏地址的长度是有限制的，超出长度，地址失效POST请求方式不会将数据显示在地址栏，相对get方式更安全7、Ajax发起GET请求
document.querySelector('#getBtn').onclick = function(){ var name = document.getElementById('name').value; var message = document.getElementById('message').value; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.status === 200 && xhr.readyState === 4){ alert(xhr.responseText); } } xhr.open('GET','http://localhost/get-content.php?name='+ name +'&message='+ message +'',true); xhr.send(); }8、Ajax发起POST请求document.querySelector('#postBtn').onclick = function(){ var name = document.getElementById('name').value; var message = document.getElementById('message').value; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.status === 200 && xhr.readyState === 4){ alert(xhr.responseText); } } xhr.open('POST','http://localhost/post-content.php',true);xhr.setRequestHeader('Content-Type','Application/x-www-form-urlencoded');
xhr.send('name='+ name +'&message='+ message);
}9、Ajax处理JSON数据
JSON(JavaScript Object Notation,JS对象标记)是一种轻量级的数据交换格式
后端可能是php、java、.net，不管后端是什么，只要知道后端会返回一个JSON数据即可。
实际中可以根据后端提供的接口来获取JSON，再在前端进行相关操作。JSON.parse() 可以把JSON字符串转换为JavaScript对象
10、Ajax异步和同步
同步：后面的代码必须等到Ajax请求完成后才执行
异步：后面的代码会先于Ajax请求执行一个程序中，异步操作会等到同步操作执行完成后才执行