Ajax
Ajax，是 Asynchronous JavaScript + XML 的简写。
这种技术能够向服务器请求额外的数据而无须卸载页面(即刷新)，会带来更
好的用户体验。
一、 XMLHttpRequest
**
**Ajax 技术核心是 XMLHttpRequest 对象(简称 XHR)，这是由微软首先引入
的一个特性，其他浏览器提供商后来都提供了相同的实现。在 XHR 出现之前，
Ajax 式的通信必须借助一些手段来实现，大多数是使用隐藏的框架或内嵌框架。
XHR 的出现，提供了向服务器发送请求和解析服务器响应提供了流畅的接口。
能够以异步方式从服务器获取更多的信息，这就意味着，用户只要触发某一事件，
在不刷新网页的情况下，更新服务器最新的数据。
虽然 Ajax 中的 x 代表的是 XML，但 Ajax 通信和数据格式无关，也就是说这
种技术不一定使用 XML。
IE7+、 Firefox、 Opera、 Chrome 都支持原生的 XHR 对象，在这些浏览器
中创建 XHR 对象可以直接实例化 XMLHttpRequest 即可。
var xhr = new XMLHttpRequest();
alert(xhr); //XMLHttpRequest
1.在使用 XHR 对象时，先必须调用 open()方法，它接受三个参数：
要发送的请求类型(get、 post)、 请求的 URL 和表示是否异步。
open()方法并不会真正发送请求，而只是启动一个请求以备发送。
通过 send()方法进行发送请求， send()方法接受一个参数，作为请求主体
发送的数据。如果不需要则，必须填 null。执行 send()方法之后，请求就会发
送到服务器上。
当请求发送到服务器端，收到响应后，响应的数据会自动填充 XHR 对象的属
性。那么一共有四个属性：
接受响应之后，第一步检查 status 属性，以确定响应已经成功返回。一般
情况 HTTP 状态代码为 200
作为成功的标志。除了成功的状态代码，还有一些别的：
2.同步调用固然简单，但使用异步调用才是我们真正常用的手段。使用异步调
用的时候，检测 readyState 属性,每当 readyState 属性改变时，触发
readystatechange 事件。这个属性有五个值：
3.发送的请求的步骤：
1)、得到XMLHttpRequest对象
new XMLHttpRequest()
2)、准备请求 open(请求类型GET/POST,请求的URL,是否异步)
xhr.open(请求类型GET/POST,请求的URL,是否异步);
3)、发送请求 send([参数])
xhr.send([参数])
注：如果是GET请求，请求的参数设置在url的后面，所以send(null)
如果是POST请求，无参数设置为null，有参数则设置参数即可
4)、判断响应状态，得到后台响应
xhr.responseText;
4.测试
1）Ajax同步测试
Ajax同步测试
2）Ajax异步测试（模拟服务器 js/data.json）
ajax异步测试
二、 GET 与 POST
**
**在提供服务器请求的过程中，有两种方式，分别是： GET 和 POST。在 Ajax
使用
的过程中， GET 的使用频率要比 POST 高。
1.GET 请求
GET 请求是最常见的请求类型，最常用于向服务器查询某些信息。必要时，
可以将查询字符串参数追加到 URL 的末尾，以便提交给服务器。
xhr.open('get','diner/login?'+'name=Lee&age=100',true);
通过 URL 后的问号给服务器传递键值对数据，服务器接收到返回响应数据。
特殊字符传参产生的问题可以使用 encodeURIComponent()进行编码处理，中
文字符的返回及传参，可以将页面保存和设置为 utf-8 格式即可， AJAX 返回的
数据为 UTF-8。
//一个通用的 URL 提交函数
function addURLParam(url, name, value) {
//判断的 url 是否有已有参数
url += (url.indexOf('?') == -1 ? '?' : '&');
url += encodeURIComponent(name) + '=' + encodeURIComponent(value);
return url;
}
当没有 encodeURIComponent()方法时，在一些特殊字符比如"&"，会出现
错误导致无法获取。
2.POST 请求
POST 请求可以包含非常多的数据，我们在使用表单提交的时候，很多就是
使用的 POST 传输方式。
xhr.open('post', 'diner/login', true);
而发送 POST 请求的数据，不会跟在 URL 的尾巴上，而是通过 send()方法
向服务器提交数据。
xhr.send('name=Lee&age=100');
一般来说，向服务器发送 POST 请求由于解析机制的原因，需要进行特别的
处理。因为 POST 请求和 Web 表单提交是不同的，需要使用 XHR
来模仿表单提交。
xhr.setRequestHeader('Content-Type','application/x-www-form-urle
ncoded');
从性能上来讲 POST 请求比 GET 请求消耗更多一些，用相同数据比较， GET
最多比 POST 快两倍。
3.tomcat服务器
post 请求，需要有服务器，暂时使用 tomcat
将 tomcat 压缩包在某个盘下解压
将存放了 json 文件的项目放入 webapps 文件夹下
在 bin 目录下，打开 startup.bat，启动服务
三、封装 Ajax
因为 Ajax 使用起来比较麻烦，主要就是参数问题，比如到底使用 GET 还是
POST；我们需要封装一个 Ajax 函数，来方便我们调用。
1、得到XMLHttpRequest对象
new XMLHttpRequest()
2、打开请求
open(请求类型GET/POST,请求的URL,是否异步) 注：三个参数都是由调用者传递
注：判断如果是POST请求，请求路径直接设置即可；如果是GET请求，需要拼接请求参数；
3、发送请求 send([参数])
xhr.send([参数])
注：如果是GET请求，请求的参数设置在[url]{.underline}的后面，所以send(null)
如果是POST请求，无参数设置为null，有参数则设置参数即可
4、判断响应状态，得到后台响应
xhr.responseText;
注：判断是否是异步请求，如果是同步则直接获取响应数据；如果是异步，则需要先判断数据是否完全响应（readyState==4），再获取响应数据
封装Ajax
四、Jquery 的 ajax
1.$.ajax()
**
**jquery 调用 ajax 方法：
格式： $.ajax({});
参数：
type：请求方式 GET/POST
url：请求地址 url
async：是否异步，默认是 true 表示异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调用此函数
error：请求失败时调用此函数
$.ajax()
2.$.get()
**
**这是一个简单的 GET 请求功能以取代复杂 $.ajax 。
请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
1.请求 json 文件，忽略返回值
$.get('../js/cuisine_area.json');
2.请求 json 文件，传递参数，忽略返回值
$.get('../js/cuisine_area.json',{name:"tom",age:100});
3.请求 json 文件,拿到返回值,请求成功后可拿到返回值
$.get('../js/cuisine_area.json',function(data){
console.log(data)
});
4.请求 json 文件,传递参数,拿到返回值
$.get('../js/cuisine_area.json',{name:"tom",age:100},function(data){
console.log(data)
});
$.get()
3.$.post()
**
**这是一个简单的 POST 请求功能以取代复杂 $.ajax 。
请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
1.请求 json 文件，忽略返回值
$.post('../js/cuisine_area.json');
2.请求 json 文件，传递参数，忽略返回值
$.post('../js/cuisine_area.json',{name:"tom",age:100});
3.请求 json 文件,拿到返回值,请求成功后可拿到返回值
$.post('../js/cuisine_area.json',function(data){
console.log(data)
});
4.请求 json 文件,传递参数,拿到返回值
$.post('../js/cuisine_area.json',{name:"tom",age:100},function(data){
console.log(data)
});
$.post()
4.$.getJSON()
**
**表示请求返回的数据类型是 JSON 格式的 ajax 请求
$.getJSON
5.jsonp
**
**远程跨域时，如果有两个域名，从其中一个域名去访问另一个域名时，使用
普通的 ajax 方法是获取不到数据的，那么就可以使用 jsonp 方式发送请求。
添加属性：
jsonp:'callback'
dataType:'jsonp'
jsonp跨域