JavaScript 原生和JQuery 的Ajax--源自技术

XMLHttpRequest 对象：

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

方法：

open(method,url,async)：规定请求的类型、URL 以及是否异步处理请求。
                                       method：请求的类型；GET 或 POST 
                                       url：文件在服务器上的位置

                                       async：true（异步）或 false（同步） 

send(string):将请求发送到服务器。

                 string：发送给服务器的数据，仅用于 POST 请求。

setRequestHeader(header,value):向请求添加 HTTP 头。
                                                    header: 规定头的名称
                                                    value: 规定头的值

属性：

responseText：获得字符串形式的响应数据。
responseXML：获得 XML 形式的响应数据。(xml操作对象)
onreadystatechange：存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
                        0: 请求未初始化
                        1: 服务器连接已建立
                        2: 请求已接收
                        3: 请求处理中
                        4: 请求已完成，且响应已就绪

status：请求响应状态（200/404/405）。

示例：

[javascript] view plain copy

 

1. var xmlHttp;  
2. if(window.XMLHttpRequest){  
3.     xmlHttp = new XMLHttpRequest();  
4. }else{  
5.     xmlHttp = ActiveXObject();  
6. }  
7. xmlhttp.onreadystatechange=function(){  
8.     if (xmlhttp.readyState==4 && xmlhttp.status==200){  
9.         console.log(xmlhttp.responseText);  
10.     }  
11. }  
12. xmlhttp.open("POST","www.test.com/test",true);  
13. xmlhttp.send();  

注意：

GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
·无法使用缓存文件（更新服务器上的文件或数据库），get请求有可能得到的是缓存的结果。
·向服务器发送大量数据（POST 没有数据量限制）
·发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

------------------------------------------------------------------分割线-------------------------------------------------------------------

JQuer Ajax

发起请求：
$.ajax();
$.post();
$.get();
$.getJSON();
$.getScript();
$().load();
Ajax时间（全局）：
$().ajaxComplete()
$().ajaxError()
$().ajaxSend()
$().ajaxStart()
$().ajaxStop()
$().ajaxSuccess()
设置默认参数（全局）：
$.ajaxSetup()

$.post(url,data,callback,dataType):通过 HTTP POST 请求从服务器载入数据。
参数：
url：必需。规定把请求发送到哪个 URL。
data：可选。映射或字符串值。规定连同请求发送到服务器的数据。
callback:success(data, textStatus, jqXHR)：可选。请求成功时执行的回调函数。
data:请求的结果数据，
textStatus：请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"），
jqXHR：XMLHttpRequest 对象的超集。
dataType：可选。规定预期的服务器响应的数据类型，默认执行智能判断（xml、json、script 或 html）。

jqXHR:设置请求终止时调用的函数，出于对由 $.ajax() 使用的回调函数名称便利性和一致性的考虑，它提供了 .error(), .success() 以及 .complete() 方法
，jQuery 1.5 中的约定接口同样允许 jQuery 的 Ajax 方法，包括 $.post()，来链接同一请求的多个 .success()、.complete() 以及 .error() 回调函数，甚至会在请求也许已经完成后分配这些回调函数。

示例：

[javascript] view plain copy

 

1. var jqxhr = $.post(url, function() {  
2.   console.log("success");  
3. });  
4. jqxhr.success(function() { console.log("second success"); })  
5. jqxhr.error(function() { console.log("error"); })  
6. jqxhr.complete(function() { console.log("complete"); });  
7. jqxhr.complete(function(){ console.log("second complete"); });  

$.get():通过远程 HTTP GET 请求载入信息。GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
参数：
url：规定要将请求发送到哪个 URL。
data：可选。规定连同请求发送到服务器的数据。
function(response,status,xhr)：可选。规定当请求完成时运行的函数。额外的参数：
response： 包含来自请求的结果数据，
status： 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"），
xhr： 包含 XMLHttpRequest 对象
dataType:可选。规定预计的服务器响应的数据类型。

$.getJSON(url,data,callback):HTTP GET 请求载入 JSON 数据。
参数；
url：同$.get();
data：同$.get();
callback:function(response,status,xhr)：同$.get();

实现JSONP：
在url总增加callback=?的参数，jQuery 将自动替换 ? 为生成的函数名，参数名callback可自定义。
示例

[javascript] view plain copy

 

1. $.getJSON("www.test.com?callback=?", function(data){  
2.     console.log("name:"+data.name+" age:"+data.age);  
3. });  

后端（java）

[javascript] view plain copy

 

1. public String test(HttpServletRequest request){  
2.     String callback = request.getParameter("callback");  
3.     return "@"+callback+"({\"name\":\"李连杰\",\"age\":\"23\"})";  
4. }  

$.getScript():通过 HTTP GET 请求载入并执行 JavaScript 文件。
参数：
url将要请求的 URL 字符串。
success(response,status)：可选。规定请求成功后执行的回调函数。额外的参数：response - 包含来自请求的结果数据，status - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"）
示例：

[javascript] view plain copy

 

1. $.getScript("www.test.com/test.js");  

$().load(): 通过AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。
参数：
url：同$.get();
data：同$.get();
function(response,status,xhr)：同$.get();
函数说明：
该方法是最简单的从服务器获取数据的方法。它几乎与 $.get(url, data, success) 等价，不同的是它不是全局函数，并且它拥有隐式的回调函数。当侦测到成功的响应时（比如，当 textStatus 为 "success" 或 "notmodified" 时），.load() 将匹配元素的 HTML 内容设置为返回的数据。这意味着该方法的大多数使用会非常简单：
示例：

[javascript] view plain copy

 

1. $("#div").load(“ajax/test.html);  

$.Ajax()：方法通过 HTTP 请求加载远程数据。该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
参数：
async：类型Boolean，默认值 true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
contentType：类型：String 默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
context：这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素。
data：发送到服务器的数据。
dataType：预期服务器返回的数据类型
ifModified：类型：Boolean仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中，它也会检查服务器指定的 'etag' 来确定数据没有被修改过。
jsonp:设置回调函数的参数名默认callback。
jsonpCallback:设置回调函数，默认为JQuer生成。
timeout：类型：Number 设置请求超时时间（毫秒）。此设置将覆盖全局设置。
type：类型：String 默认值: "GET")。请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
url：类型：String 默认值: 当前页地址。发送请求的地址。


xhr：类型：Function 需要返回一个 XMLHttpRequest 对象。默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。
cache：类型：Boolean ，默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。
global：类型：Boolean是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件
processData：类型：Boolean 默认值: true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
beforeSend：类型：Function，发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。
complete：类型：Function 请求完成后回调函数 (请求成功或失败之后均调用)。
dataFilter：类型：Function 给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数：data 是 Ajax 返回的原始数据，type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。
error：类型：Function 默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 "timeout", "error", "notmodified" 和 "parsererror"。
success：类型：Function 请求成功后的回调函数。参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
scriptCharset：类型：String 只有当请求时 dataType 为 "jsonp" 或 "script"，并且 type 是 "GET" 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。
traditional：类型：Boolean 如果你想要用传统的方式来序列化数据，那么就设置为 true。请参考工具分类下面的 jQuery.param 方法。

jsonp:由于同源策略浏览器不允许进行跨域请求，但是HTML的<script>元素例外（img和css一样），利用这个特性返回动态的js代码实现跨域交互的目的。

示例:

[javascript] view plain copy

 

1. $.ajax({  
2.     type:'post',  
3.     url:'test',  
4.     dataType:'jsonp',  
5.     success: function(data){  
6.         alert("success:"+data);  
7.     }  
8. });  

后端（java）

[java] view plain copy

 

1. public String test(HttpServletRequest request){  
2.     String callback = request.getParameter("callback");  
3.     return "@"+callback+"({\"name\":\"李连杰\",\"age\":\"23\"})";  
4. }  

发送的请求url
http://www..com/test?callback=jQuery111305851919590495527_1441768595030
参数callback以及参数值jQuery111305851919590495527_1441768595030都是jQuer添加。


注意
jsonp模式下采用get请求，参数type失效！

Ajax常见错误和异常
一。回调函数不执行的Error
1.如果跨域请求那么Ajax的所有回调函数都不会执行,包括error函数。

2.如果返回数据格式不是你指定（dataType）那么就会发生数据解析失败的错误，回调error函数。