一、概念

1. 概念： ASynchronous JavaScript And XML?? ?异步的JavaScript 和 XML
?? ?1. 异步和同步：客户端和服务器端相互通信的基础上
?? ??? ?* 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
?? ??? ?* 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

? ? ?2.? Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 [1]?
? ? ? ? ?通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
?? ??? ?传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

?

二、优点缺点

优点：

使用局部刷新技术让网页显示效率更高，同时又不破坏其他内容的显示
界面与应用分离。有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。
前端和后端负载平衡。最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。

缺点：

没有浏览历史，不能回退
存在跨域问题（同源）
SEO不友好（搜索引擎优化，对爬虫不友好）

三、实现方式

? 3.1 原生的JS实现方式（了解）

//1.创建核心对象
?? ? ? ? ? ? ? ?var xmlhttp;
?? ? ? ? ? ? ? ?if (window.XMLHttpRequest)
?? ? ? ? ? ? ? ?{// code for IE7+, Firefox, Chrome, Opera, Safari
?? ? ? ? ? ? ? ? ? ?xmlhttp=new XMLHttpRequest();
?? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ?else
?? ? ? ? ? ? ? ?{// code for IE6, IE5
?? ? ? ? ? ? ? ? ? ?xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
?? ? ? ? ? ? ? ?}

?//2. 建立连接
?? ? ? ? ? ? ? ?/*
?? ? ? ? ? ? ? ? ? ?参数：
?? ? ? ? ? ? ? ? ? ? ? ?1. 请求方式：GET、POST
?? ? ? ? ? ? ? ? ? ? ? ? ? ?* get方式，请求参数在URL后边拼接。send方法为空参
?? ? ? ? ? ? ? ? ? ? ? ? ? ?* post方式，请求参数在send方法中定义
?? ? ? ? ? ? ? ? ? ? ? ?2. 请求的URL：
?? ? ? ? ? ? ? ? ? ? ? ?3. 同步或异步请求：true（异步）或 false（同步）
?? ?
?? ? ? ? ? ? ? ? */
?? ? ? ? ? ? ? ?xmlhttp.open("GET","ajaxServlet?username=tom",true);

?//3.发送请求
?? ? ? ? ? ? ? ?xmlhttp.send();
?? ?
//4.接受并处理来自服务器的响应结果
?? ? ? ? ? ? ? ?//获取方式：xmlhttp.responseText
?? ? ? ? ? ? ? ?//什么时候获取？当服务器响应成功后再获取
?? ?
?? ? ? ? ? ? ? ?//当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
?? ? ? ? ? ? ? ?xmlhttp.onreadystatechange=function()
?? ? ? ? ? ? ? ?{
?? ? ? ? ? ? ? ? ? ?//判断readyState就绪状态是否为4，判断status响应状态码是否为200
?? ? ? ? ? ? ? ? ? ?if (xmlhttp.readyState==4 && xmlhttp.status==200)
?? ? ? ? ? ? ? ? ? ?{
?? ? ? ? ? ? ? ? ? ? ? //获取服务器的响应结果
?? ? ? ? ? ? ? ? ? ? ? ?var responseText = xmlhttp.responseText;
?? ? ? ? ? ? ? ? ? ? ? ?alert(responseText);
?? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ?}

? 3.2 JQeury实现方式?

? ? 3.2.1?$.ajax( )

* 语法：$.ajax({键值对});
?? ??? ??? ? //使用$.ajax()发送异步请求
?? ? ? ? ? ? ? ?$.ajax({
?? ? ? ? ? ? ? ? ? ?url:"ajaxServlet1111" , // 请求路径
?? ? ? ? ? ? ? ? ? ?type:"POST" , //请求方式
?? ? ? ? ? ? ? ? ? ?//data: "username=jack&age=23",//请求参数
?? ? ? ? ? ? ? ? ? ?data:{"username":"jack","age":23},
?? ? ? ? ? ? ? ? ? ?success:function (data) {
?? ? ? ? ? ? ? ? ? ? ? ?alert(data);
?? ? ? ? ? ? ? ? ? ?},//响应成功后的回调函数
?? ? ? ? ? ? ? ? ? ?error:function () {
?? ? ? ? ? ? ? ? ? ? ? ?alert("出错啦...")
?? ? ? ? ? ? ? ? ? ?},//表示如果请求响应出现错误，会执行的回调函数
?? ?
?? ? ? ? ? ? ? ? ? ?dataType:"text"//设置接受到的响应数据的格式
?? ? ? ? ? ? ? ?});

? ? 3.2.2?$.get( )：发送get请求?

* 语法：$.get(url, [data], [callback], [type])
?? ??? ??? ??? ?* 参数：
?? ??? ??? ??? ??? ?* url：请求路径
?? ??? ??? ??? ??? ?* data：请求参数
?? ??? ??? ??? ??? ?* callback：回调函数
?? ??? ??? ??? ??? ?* type：响应结果的类型

? ? 3.2.3$.post( )：发送post请求?

* 语法：$.post(url, [data], [callback], [type])
?? ??? ??? ??? ?* 参数：
?? ??? ??? ??? ??? ?* url：请求路径
?? ??? ??? ??? ??? ?* data：请求参数
?? ??? ??? ??? ??? ?* callback：回调函数
?? ??? ??? ??? ??? ?* type：响应结果的类型