AJAX知识点汇总
一、全局刷新和局部刷新
B/S 结构项目中， 浏览器（Browse）负责把用户的请求和参数通过网络发送给服务器
（Server）,服务端使用 Servlet（多种服务端技术的一种）接收请求，并将处理结果返回给浏
览器。
浏览器在 html或jsp 上呈现数据，混合使用 css， js 帮助美化页面，或响应事件。
（一）全局刷新
servlet 返回后把数据全部覆盖掉原来页面内容， 覆盖了全部的浏览器内存数据。
整个浏览器数据全部被刷新。重新在浏览器窗口显示数据，样式，标签等。
全局刷新原理:
1) 必须由浏览器亲自向服务端发送请求协议包。
2) 这个行为导致服务端直接将【响应包】发送到浏览器内存中
3) 这个行为导致浏览器内存中原有内容被覆盖掉
4) 这个行为导致浏览器在展示数据时候，只有响应数据可以展示
（二）局部刷新
浏览器在展示数据时，此时在窗口既可以看到本次的响应数据， 同时又可以看到浏览
器内存中原有数据
局部刷新原理:
1) 不能由浏览器发送请求给服务端
2) 浏览器委托浏览器内存中一个脚本对象代替浏览器发送请求.
3) 这个行为导致服务端直接将【响应包】发送到脚本对象内存中
4) 这个行为导致脚本对象内容被覆盖掉，但是此时浏览器内存中绝大部分内容没有受到任何影响.
5) 这个行为导致浏览器在展示数据时候,同时展示原有数据和响应数据
二、异步请求对象
AJAX是实现局部刷新的一种技术
局部刷新，需要创建一个对象，代替浏览器发起请求的行为，这个对象存在内存中。代替浏览器
发起请求并接收响应数据。这个对象叫做异步请求对象。
全局刷新是同步行为， 局部刷新是异步行为[浏览器数据没有全部更新]这个异步对象用于在后台
与服务器交换数据。XMLHttpRequest 就是我们说的异步对象对应的类。
XMLHttpRequest 类的对象能够：
• 在不重新加载页面的情况下更新网页
• 在页面已加载后向服务器请求数据
• 在页面已加载后从服务器接收数据
所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest
对象。通过一行简单的 JavaScript 代码，我们就可以创建 XMLHttpRequest 对象
创建 XMLHttpRequest 类的对象语法是：
var xhr = new XMLHttpRequest();
AJAX 中的核心对象就是这个被new出来的对象： xhr
三、AJAX
1、什么是AJAX?
AJAX 英文名称：Asynchronous JavaScript and XML（中文名称是：异步的 JavaScript 和 XML）。
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分页面内容的新方法
AJAX 不是新的编程语言，而是使用现有技术混合使用的一种新方法。ajax 中使用的技术有
JavaScript, html , dom , xml ,css 等。主要是 JavaScript , XML.
JavaScript: 使用脚本对象 XMLHttpRequest 发送请求， 接收响应数据
XML: 发送和接收的数据格式，现在大多使用 json
AJAX 不单需要前端的技术，同时需要后端（服务器）的配合。服务器需要提供数据，数据
是 AJAX 请求的响应结果。
2、AJAX异步请求实现步骤：
（1） 创建对象异步对象
var xhr = new XMLHttpRequest();
（2） 绑定onreadstatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。
此事件可以指定一个处理函数 function。通过判断 XMLHttpReqeust 对象的状态，获取服务端返回的数据。
语法：
xhr.onreadystatechange = function() {
if( xhr.readyState == 4){
if(xhr.status >= 200 && xhr.status < 300){
处理服务器返回数据
}else{
alert(xhr.status);
}
}
}
下面是 XMLHttpRequest 对象的三个重要的属性：
onreadystatechange 是一个回调函数，每当 readyState 属性改变时，就会调用该函数
readyState 属性：
存放对象"xhr"的状态。从 0 到 4 发生变化。
• 0: 请求未初始化，创建异步请求对象 var xmlHttp = new XMLHttpRequest()
• 1: 初始化异步请求对象， xmlHttp.open(请求方式，请求地址，true)
• 2: 异步对象发送请求， xmlHttp.send()
• 3: 异步对象接收应答数据 从服务端返回数据。XMLHttpRequest 内部处理。
• 4: 异步请求对象已经将数据解析完毕。 此时才可以读取数据。
status 属性：
200: "OK"
404: 未找到页面
（3） 初始化请求参数：
方法：
open(method,url,async) ： 初始化异步请求对象
参数说明：
• method：请求的类型；GET 或 POST
• url：服务器的 servlet 地址
• async：true（异步）或 false（同步）
例如:
xhr.open("get","http:192.168.1.20:8080/myweb/query",true)
（4） 发送请求
xmlHttp.send()
（5） 接收服务器响应的数据
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
xhr.responseText：获得字符串形式的响应数据
xhr.responseXML：获得 XML 形式的响应数据
3、异步请求
XMLHttpRequest对象.open( method , url, true ) 第三个参数 true 表示异步请求
异步请求特点：
1)某一个时刻，浏览器可以委托多个异步请求对象发送请求，无需等待请求处理完成。
2)浏览器委托异步请求，对象工作期间浏览器处于活跃状态。可以继续向下执行其他命令。
3) 当响应就绪后再对响应结果进行处理
实现步骤：
1. 设置异步对象 open 方法第三个参数为 true
举例：
xhr.open("get","searchProvinceJson?属性名=" + 动态属性值,true);
4、同步请求
XMLHttpRequest 对象 open( method , url, false ) 第三个参数 false 表示同步请求
同步请求特点：
1)某一个时刻，浏览器只能委托一个异步请求对象发送请求，必须等待请求处理完成。
2)浏览器委托同步请求，对象工作期间浏览器处于等待状态。不能执行其他命令。
3)不推荐使用。
实现步骤：
同上，需要 open(method,url,false)第三个参数设为 false
四、AJAX与jQuery
jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，您能够使用 HTTP Get
和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON 同时能够把接收的数据更新
到 DOM 对象。
1、$.ajax()
$.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法。
语法：
$.ajax( { name:value, name:value, ... } )
说明：参数是 json 格式的数据，包含请求方式，数据，回调方法等
async ： 布尔值，表示请求是否异步处理。默认是 true
contentType ：发送POST请求需要设置请求头的内容类型。默认是： "application/x-www-form-urlencoded"。所以在开发中可以不写
data：规定要发送到服务器的数据，可以是：string， 数组，多数是 json
dataType：期望从服务器响应回来的数据类型所属类型。jQuery 从 xml, json, text,, html 这些类型中测试最可能的类型
"xml" ———— 一个 XML 文档
"html" ———— HTML 作为纯文本
"text" ———— 纯文本字符串
"json" ———— 以 JSON 运行响应，并以对象返回
error(xhr,status,error)：如果请求失败要运行的函数, 其中 xhr, status, error 是自定义的形参名
success(result,status,xhr)：当请求成功时运行的函数，其中 result, status, xhr 是自定义的形参名
type：规定请求的类型（GET 或 POST 等），默认是 "GET" get，post 不用区分大小写
url：规定发送请求的 URL。
以上是常用的参数。
error() , success()函数中的 xhr 是 XMLHttpRequest 对象。
2、$.get()
$.get() 方法使用 HTTP GET 请求从服务器加载数据。
语法：$.get(url,data,function(data,status,xhr),dataType)
url 必需。规定您需要请求的 URL。
data 可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)可选。当请求成功时运行的函数。data,status,xhr 是自定义形参名。
参数说明：
data - 包含来自请求的结果数据
status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"）
xhr - 包含 XMLHttpRequest 对象
dataType 可选。规定预期的服务器响应的数据类型。jQuery 会智能判断。
可能的类型：
"xml" - 一个 XML 文档
"html" - HTML 作为纯文本
"text" - 纯文本字符串
"json" - 以 JSON 运行响应，并以对象返回
3、$.post()
$.post() 方法使用 HTTP POST 请求从服务器加载数据。
语法：
$.post(URL,data,function(data,status,xhr),dataType)
参数同$.get()