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)。
示例:
- var xmlHttp;
- if(window.XMLHttpRequest){
- xmlHttp = new XMLHttpRequest();
- }else{
- xmlHttp = ActiveXObject();
- }
- xmlhttp.onreadystatechange=function(){
- if (xmlhttp.readyState==4 && xmlhttp.status==200){
- console.log(xmlhttp.responseText);
- }
- }
- xmlhttp.open("POST","www.test.com/test",true);
- 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() 回调函数,甚至会在请求也许已经完成后分配这些回调函数。
示例:
- var jqxhr = $.post(url, function() {
- console.log("success");
- });
- jqxhr.success(function() { console.log("second success"); })
- jqxhr.error(function() { console.log("error"); })
- jqxhr.complete(function() { console.log("complete"); });
- 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可自定义。
示例
- $.getJSON("www.test.com?callback=?", function(data){
- console.log("name:"+data.name+" age:"+data.age);
- });
后端(java)
- public String test(HttpServletRequest request){
- String callback = request.getParameter("callback");
- return "@"+callback+"({\"name\":\"李连杰\",\"age\":\"23\"})";
- }
参数:
url 将要请求的 URL 字符串。
success(response,status):可选。规定请求成功后执行的回调函数。额外的参数:response - 包含来自请求的结果数据,status - 包含请求的状态("success", "notmodified", "error", "timeout" 或 "parsererror")
示例:
- $.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 内容设置为返回的数据。这意味着该方法的大多数使用会非常简单:
示例:
- $("#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代码实现跨域交互的目的。
示例:
- $.ajax({
- type:'post',
- url:'test',
- dataType:'jsonp',
- success: function(data){
- alert("success:"+data);
- }
- });
后端(java)
- public String test(HttpServletRequest request){
- String callback = request.getParameter("callback");
- return "@"+callback+"({\"name\":\"李连杰\",\"age\":\"23\"})";
- }
发送的请求url
http://www..com/test?callback=jQuery111305851919590495527_1441768595030
参数callback以及参数值jQuery111305851919590495527_1441768595030都是jQuer添加。
注意
jsonp模式下采用get请求,参数type失效!
Ajax常见错误和异常
一。回调函数不执行的Error
1.如果跨域请求那么Ajax的所有回调函数都不会执行,包括error函数。
2.如果返回数据格式不是你指定(dataType)那么就会发生数据解析失败的错误,回调error函数。