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
  在CODE上查看代码片 派生到我的代码片
  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
  在CODE上查看代码片 派生到我的代码片
  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
  在CODE上查看代码片 派生到我的代码片
  1. $.getJSON("www.test.com?callback=?"function(data){  
  2.     console.log("name:"+data.name+" age:"+data.age);  
  3. });  

后端(java)

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  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
  在CODE上查看代码片 派生到我的代码片
  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
  在CODE上查看代码片 派生到我的代码片
  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
  在CODE上查看代码片 派生到我的代码片
  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
  在CODE上查看代码片 派生到我的代码片
  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函数。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值