【前言】
最近看了看AJAX的一些相关，也对AJAX进行了一些资料查询，本篇博客首先对AJAX入门的基础知识进行简介！详情请见下文！
【正文】
一、What——什么是AJAX？
1、概念
AJAX（Asynchronous JavaScript And XML）不是一种新的编程语言，是指一种创建交互式网页应用的网页开发技术。
使用JavaScript向服务器提出请求并处理响应而不阻塞用户，通过核心对象XMLHTTPRequest，JavaScript可在不重载页面的情况下与web服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果
2、特点：
◆异步JavaScript和XML（标准通用标记语言的子集）
◆创建快速动态网页
◆无需重新加载整个网页的情况下，能够更新部分网页
3、AJAX与Web开发的区别——
这里再对AJAX与传统web开发的区别中的页面端进行说明一下：
（1）、传统方式：
◆本质：
浏览器做了很多数据组织和提交的工作
◆表面：
①页面代码简单
②submit按钮提交数据，表单管理数据。
③input中定义name属性。
（2）、AJAX方式：
◆本质：
需要自己编写代码进行数据的组织，提交，接收，并进行页面的更新
◆表面：
①页面代码量大
②通过button的一个onclick事件转向js的方法，然后通过编写的js代码来获取数据，发送数据，接收数据。
③input中定义id属性。页面中预留了div标签，自己编写js代码将div标签中的内容更新。
二、When——何时用AJAX？
小菜使用AJAX并不多，但是之前接触过一点点，最近也查了一些资料，下面就根据个人目前的了解，说说自己的理解！
1、请求的提交是为了页面数据的显示，这时用户一般不想看到页面的刷新，此时便可以使用AJAX
2、如果请求提交后，用户能从页面感觉到提交结果，此时也最好不要刷新页面可以使用AJAX
3、使用AJAX的常见实例：谷歌地图、百度搜索（键入值下面弹出的提示框）等等
三、How ——怎么用AJAX？
看到的视频里基本上都是在使用XMLHttpRequest对象来做页面局部刷新，而小菜我之前接触到的是使用$.ajax(){}函数，$.ajax(){}是封装到ajax里的一个函数，相比XMLHttpRequest对象来做页面局部刷新更为方便，下面对两种方法都做一个简单介绍。
1、AJAX函数
（1）、When——何时用
一般在前端HTML和服务器交互又要异步提交表单时会用到$.ajax(){}函数
（2）、How——怎么用
◆函数格式
//函数格式
$.ajax({
url: "url",//请求的服务器地址
type: "GET/POST",//请求的方式，有POST和GET两种
dataType: "json/jsonp/script/text/html/xml",//预期服务器返回的数据类型
data: "data",//发送到服务器的数据
async: false,//所有请求是同步还是异步
success: function () { } //请求成功后调用的回调函数
})
◆参数解说
①type:请求的方式有两种POST和GET，下面说说这两者的区别
◇POST：是向指定的资源提交要处理的数据
◇GET：是从指定的资源请求数据
②async:用生活中的小例子简单说说同步与异步的区别
◇假设条件：
今天午餐的主食是米饭，菜是西红柿鸡蛋，现在有一位“同步”先生和“异步”女士，两位pk做饭，看谁快
◇“同步”先生：
先把米饭放电饭锅里蒸煮，然后一边玩手机一边等待米饭熟了之后再菜
◇“异步”女士：
先把米饭放电饭锅里蒸煮，随后在米饭煮着的同时就开始炒菜
◇结局：
“异步”女士胜利
◇◇小结：
AJAX的同步异步就如上面的生活小例子，如果是异步的话，不管ajax的执行请求有没有返回，代码会继续往下执行；如果是同步的话，只有ajax请求完成返回数据之后代码才能继续往下执行
2、XMLHttpRequest对象——
（1）、XMLHTTPRequest五步使用法：
①建立XMLHTTPRequest对象
②注册回调函数
③使用open方法设置和服务器端交互的基本信息
④设置发送的数据，开始和服务器端的交互
⑤在回调函数中判断交互是否结束，响应是否正确，并根据需要获取服务器端返回的数据，更新页面内容
（2）、XMLHttpRequest三个重要属性：
①onreadystatechange属性
该属性存有处理服务器响应的函数，当readyState变化时会调用这个属性上注册的JavaScript函数
②readyState属性
◆该属性存有服务器响应的状态信息，每当readyState改变时，onreadystatechange函数就会被执行。
◆属性值
◆例子：
//测试响应是否已完成，即可以得到数据了
xmlHttp.onreadystatechange = function () {
//如果请求已完成，就从response中获得数据
if (xmlHttp.readyState == 4) {
// 从服务器的response获得数据
}
}
③responseText属性
◆该属性可以取回由服务器返回的数据。
◆例子：
对对对
xmlHttp.onreadystatechange = function () {
//如果请求完成，把时间文本框的值设置为等于 responseText：
if (xmlHttp.readyState == 4) {
document.myForm.time.value = xmlHttp.responseText;
}
}