XMLHttpRequest 对象用于在后台与服务器交换数据,它能够
在不重新加载页面的情况下更新网页;在页面已加载后从服务器请求数据;在页面已加载后从服务器接收数据;在后台向服务器发送数据。
XMLHttpRequest.open()语法 open(method, url, async, username, password)
各参数的解析:
method 参数是用于请求的 HTTP 方法。
值包括 GET、POST 和 HEAD。
( 不区分大小写。POST:用"POST"方式发送数据,可以大到4MB;GET:用"GET"方式发送数据,只能256KB;如果请求带有参数的化实用POST方式,POST方式将参数放置在页面的隐藏控件内;没有参数使用GET方式;对于请求的页面在中途可能发生更改的,也最好用POST方式)
url 参数是请求的主体。大多数浏览器实施了一个同源安全策略,并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。
async 参数指示请求使用应该异步地执行。如果这个参数是 false,请求是同步的,后续对 send() 的调用将阻塞,直到响应完全接收。
如果这个参数是 true 或省略,请求是异步的,且通常需要一个 onreadystatechange 事件句柄。
username 和 password 参数是可选的,为 url 所需的授权提供认证资格。如果指定了,它们会覆盖 url 自己指定的任何资格。
说明
1.这个方法初始化请求参数以供 方法稍后使用。它把 readyState 设置为1,删除之前指定的所有请求头部,以及之前接收的所有响应头部,并且把 responseText、responseXML、status 以及statusText 参数设置为它们的默认值。
2.当 readyState 为 0 的时候(当 XMLHttpRequest 对象刚创建或者abort() 方法调用后)以及当 readyState 为 4时(已经接收响应时),调用这个方法是安全的。
3.当针对任何其他状态调用的时候,open() 方法的行为是为指定的。
4.除了保存供 send() 方法使用的请求参数,以及重置 XMLHttpRequest 对象以便复用,open() 方法没有其他的行为。
5.要特别注意,当这个方法调用的时候,实现通常不会打开一个到 Web 服务器的网络连接。
举例
1 同步方式
var xmlhttp=newXMLHttpRequestObj ();
xmlhttp.open('get','xxx.asp?name=mumu',false);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send();
2 异步方式
var sendStr='?m=1&n=2'; //url 的参数
var xmlhttp=newXMLHttpRequestObj ();
xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4){ if(xmlhttp.status==200){//操作其他
} } } xmlhttp.open('get','xxx.asp',true); xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded'); xmlhttp.send(sendStr);实例:
$(function({ $('#a').onclick = function () { getDetails(this.id); }))//获取XMLHttpRequest对象function creatRequest() { try { request = new XMLHttpRequest(); } catch (tryMS) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (otherMS) { try { request = new ActiveXObject("Miscrosoft.XMLHTTP"); } catch (failed) { request = null; } } } return request;}//发送ajax请求function getDetails(itemName) { request = creatRequest(); if (request == null) { alert('没有成功创建请求') return; } var url = "getDetails.php?LiName="+escape(itemName); request.open("GET",url,true); request.onreadystatechange = displayDetails; request.send(null);}//根据返回结果执行响应事件function displayDetails() { if (request.readyState == 4) { if (request.status == 200) { detailDiv = document.getElementById("inf"); detailDiv.innerHTML = request.responseText; } }}
JQ ajax:
//注意:如果是中文参数值,需要采用escape函数处理下,或者使用encodeURI包括两次进行传递 $('#list li').click ( function () { $.ajax({ type:'GET', data:'', url:"getDetails.php?LiName="+escape(this.id), success:function(data){ $('#inf').html(data); }, dataType:'text', error:function (){ alert("失败!"); } }) });