在 Ajax 出现之前，网页想要和服务器通信，最常用的方式是使用 form 表单；用户提交表单后，浏览器就开始跳转，服务器接收表单并处理，然后将新的网页返回给浏览器；整个过程用户都只有等待，用户之前的操作状态会丢失，并且服务器返回的新网页常常和之前网页的大部分内容相同，浪费带宽；可见，使用表单来进行网页和服务器的交互，会做很多无谓的工作，浪费资源，用户体验还差。
Ajax 是 Asynchronous JavaScript and XML（异步的 JavaScript 与 XML 技术）的缩写，并不是 JavaScript 的一部分，而是网页与服务器通信的一系列技术的总称。网页使用 Ajax 与服务器通信，可以规避上述 form 表单存在的问题，页面不会刷新，用户不用等待请求的返回，可以继续在我们的网页上“冲浪”。第一个大规模使用 Ajax 的网页应用是 Gmail
Ajax就是无需刷新页面就可以从服务器获取新数据的技术。
Ajax技术的核心是XMLHttpRequest对象(简称XHR,是浏览器提供的)，这是由微软首先引入的一个特性，其他浏览器供应商后来都引入了。在XHR出现之前，Ajax式的通信必须借助一些hack手段来实现，大多数是使用隐藏的框架和内嵌的框架。XHR 为 向服务器发送请求和解析服务器的响应提供了流畅的接口。能够以异步的方式从服务器提供更多信息，用户单击后可以不必刷新页面而取得新数据。也就是说 ，可以使XHR对象取得新数据，然后再通过dom将新数据插入到页面中。另外，虽然涉及XML，但是Ajax通信与数据格式无关(不一定是XML)。
Ajax通过原生的XMLHttpRequest对象发出HTTP请求，得到服务器返回的数据后，再进行处理。
- 创建Ajax对象
- 发出HTTP请求
- 接收服务器传回的数据
- 更新网页数据
Ajax可以是同步请求，也可以是异步请求。但是，大多数情况下，特指异步请求。因为同步的Ajax请求，对浏览器有“堵塞效应”。
eg（以下代码要背下来）：
let xhr =new XMLHttpRequest()//实例化xhr对象
xhr.open('get','./xxxx')//配置request
xhr.onreadystatechange=function(){
if(xhr.readyState===4 && xhr.status===200){
console.log(xhr.responseText)
}
}//接收并更新
xhr.send('xxxxx')//发出请求
readyState的状态有5个
0:未初始化。
1：启动
2：发送
3：接收
4：完成
同源策略
突破同源策略（跨域）
在服务器中添加一句：response.setHeader('Access-Control-Allow-Origin','http://cissy.com:8888') //要背下来哟
eg：
http://javascript.ruanyifeng.com/bom/ajax.html阮一峰AJAX
http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html阮一峰，浏览器同源策略及规避方法
网友评论