什么是AJAX？

是一种创建交互式网页应用的网页开发技术，进行前后端交互。

AJAX： Asynchronous Javascript And XML（异步JavaScript和XML）
交互：客户端和服务器的数据可以互相传递和使用
xml：一种类似于HTML的标记语言，可以将数据结构化，XML已经被JSON淘汰了
异步：异步指程序可以同时执行，同步指程序需要按照顺序执行

特点：再不提交整个页面的情况下,实现页面的局部刷新

AJAX的产生背景

以前做数据交互的时候，大家通常选择使用表单的方式提交数据，表单提交这种方式，默认的时候会由当前页面跳转到action页面，所以用户体验及其糟糕，所以需要想办法让当前页面，不跳转的同时把数据传递过去，把服务器响应的内容拿回来。

AJAX解决的问题

指不刷新当前页面，把某些数据传递给服务器，把某些数据从服务器拿回客户端。

注意：AJAX必须依赖www服务执行，即使用http协议来运行。

AJAX四步

第一步、实例化Ajax核心对象

// W3C标准：
var xhr = new XMLHttpRequest();

第二步、打开AJAX对象，建立连接

// 语法：
xhr.open("get", url, true);

open() 方法中:

第一个参数为AJAX请求的发送方式值为get或者post
第二个参数为请求的url路径
第三个参数为异步还是同步，如果写true表示异步（默认true），写false表示同步

第三步、发送AJAX请求

// 语法：
xhr.send();

如果使用get方式发送请求，send()命令中不用写任何参数，使用post方法发送，数据要通过send()发送

传递的数据可以写在url中，服务器php文件用$_GET["参数名"]接收。

第四步、接收AJAX返还（接收响应）

1.onreadystatechange事件

// 异步时需要通过 onreadystatechange 监听
// 指如果xhr对象的预备好的状态发生了变化时，触发函数。
xhr.onreadystatechange = function(){
	if(xhr.readyState == 4 && xhr.status == 200){
		alert(xhr.responseText);
	}
}
// 请求状态4：响应已完成；您可以获取并使用服务器的响应了。
// HTTP状态码200：ok，页面正确打开，并得到完整的响应内容。

onreadystatechange指本次ajax请求的状态发生改变时所触发的事件
readyState 指请求状态

0：请求未初始化（还没有调用 open()）。
1：请求已经建立，但是还没有发送（还没有调用 send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：发送已完成；您可以获取并使用服务器的响应了。

status 指http状态（常用的http状态码，稍微了解下即可）

200：ok，页面正确打开，并得到完整的响应内容。
301：被请求的资源已永久移动到新位置
302：请求的资源临时从不同的 URI响应请求
304：缓存
404：页面不存在。
500：常指后端代码发生错误
503：由于临时的服务器维护或者过载，服务器当前无法处理请求。

responseText指接收到的响应结果

2.onload 发送成功且返还成功

xhr.onload = function(){
     console.log("发送成功，且返回成功");
     console.log(xhr.responseText);					
}

注意：打开的html和请求的地址在一个服务器上

php里会把所有的打印和非php代码都通过AJAX返还

GET和POST

W3C建议我们使用get获取数据，使用post发送数据。

但实际上，无论是get还是post，都即可以发送数据，也可以接收数据。

区别：

get是以url的方式传递数据；而post是以http请求中的body部分传递数据。所以有种说法说post更安全。
get传递数据时，直接在浏览器地址栏中可以看到；而post可以使用开发者工具中看到。
get传递的数据，中文会被编码或有可能出现乱码；而post不会。
get在IE下会走缓存；而post不会。

GET 和 POST 可传递的最大值是多少？

网上流传的一种说法是，GET 256b，POST 2M，这种说法不太准确。

GET 是通过 URL 传递的，HTTP协议没有对URL长度和参数个数进行限制。这个限制是特定的浏览器和服务器对URL进行了限制。IE为2083字节（2KB+35）；Firefox为65535字节；Safari为80000字节；Opera为190000字节；Chrome为8182字节；Apache能够接收url最大长度为8192字节；IIS为16384字节。
POST理论上没有长度的限制，HTTP协议没有对POST进行限制，起限制的是服务器的处理程序的处理能力。 Tomcat默认为2M；IIS默认为4M，也可以通过设置，让POST内容无限大，但要注意服务器和内存能力。

var xhr = new XMLHttpRequest();
xhr.open("post", url, true);
// 如果是post方式发送请求，需要设置请求头才能正确把数据传递给后端页面。
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 客户端向服务器端发送数据，服务器php用$_POST["参数名"]接收。
xhr.send("数据名1=数据值&数据名2=数据值")
// 客户端接收服务器的响应内容
xhr.onreadystatechange = function(){
	if(xhr.readyState == 4 && xhr.status == 200){
		alert(xhr.responseText);
	}
}

Ajax的异步问题

同步和异步的概念

同步: 按步骤按顺序进行

异步: 同时执行,也叫并发;

举例说明: 假如
吃饭(10分钟)   洗衣服(30分钟)   玩游戏(60分钟)

同步(按步骤 按顺序进行)
先吃饭 ->  洗衣服 -> 玩游戏   (100)  // 单线程

异步(同时执行,也叫并发)
吃饭 
洗衣服    =>   60   // 多线程
玩游戏

但是很尴尬 JS是单线程的.

为什么JavaScript是单线程？

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。

JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？

Javascript 如何解决异步问题?

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。

JavaScript语言的设计者也意识到这个问题，于是，所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入”任务队列”（task queue）的任务，只有”任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行;

具体来说，异步执行的运行机制如下。

（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
（4）主线程不断重复上面的第三步

AJAX