整个过程是:创建XMLHttpRequest 对象 -> 指定发送地址及发送方法 -> 发送请求 -> 指定处理方法并处理返回结果。但是需要注意,我们正常的思路理解是这样的,可是onreadystatechange事件句柄指定处理方法需要在发送之前就指定好,否则无法处理状态变化事件。
所以我们应该按照下面的流程来记忆:创建XMLHttpRequest 对象 -> 指定发送地址及发送方法 -> 指定状态变化处理方法 -> 发送请求,请求发送后状态变化了就会自动调用指定的处理方法。
好了,看看完成的代码吧。
参考了:http://javagp.group.javaeye.com/group/topic/12223
完成的代码
var xmlhttp = false; //创建一个新变量 request 并赋值 false。使用 false 作为判断条件,它表示还没有创建 XMLHttpRequest 对象。
function CreateXMLHttp(){
try{
xmlhttp = new XMLHttpRequest(); //尝试创建 XMLHttpRequest 对象,除 IE 外的浏览器都支持这个方法。
}
catch (e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //使用较新版本的 IE 创建 IE 兼容的对象(Msxml2.XMLHTTP)
}
catch (e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //使用较老版本的 IE 创建 IE 兼容的对象(Microsoft.XMLHTTP)。
}
catch (failed){
xmlhttp = false; //如果失败则保证 request 的值仍然为 false。
}
}
}
return xmlhttp;
}
xmlhttp = CreateXMLHttp();
xmlhttp.open("get","http://www.cnblogs.com",true);
xmlhttp.onReadyStateChange = getResult;
xmlhttp.send(null);
function getResult(){
if(xmlhttp.readyState == 4){
alert(xmlhttp.responseText);
}
}
看似一切都OK了,可是有没有想过,如果HTML代码在网络传输过程中出错了,或者我们指定的地址失效会怎么样呢。这个时候就需要用到status属性,即由服务器返回的 HTTP 状态代码。 xmlhttp.status 等于200时表示传输过程完整没有错误。具体的HTTP状态代码什么意思可以到W3C组织网站上看看,地址http://www.w3.org /Protocols/rfc2616/rfc2616-sec6.html#sec6.1.1 。
把getResult()方法写成下面这样我觉的就真的OK了。
function getResult(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
alert(xmlhttp.responseText);
}
}
open方法的参数为如下
xmlhttprequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
bstrMethod
http方法,例如:POST、GET、PUT及PROPFIND。大小写不敏感。
bstrUrl:和平常一样(如:"encoding.php?id=1&timeStamp= "+new Date().getTime())
如果是以GET方式提交的话,URL里的最后一个参数(timeStamp)是为了解决浏览器缓存问题
varAsync[可选]
布尔型,指定此请求是否为异步方式,默认为true。如果为真,当状态改变时会调用onreadystatechange属性指定的回调函数。
bstrUser[可选]
如果服务器需要验证,此处指定用户名,如果未指定,当服务器需要验证时,会弹出验证窗口。
bstrPassword[可选]
验证信息中的密码部分,如果用户名为空,则此值将被忽略。
问题1:GET或者POST只是参数传递的方式,
get方式和post方式的区别:
使用get方式提交表单时,浏览器将各个表单字段元素及其数据按照url参数的方式附加在请求行的资源后面。使用get方式传递的数据量是有限的,一般限制在1K以下。
使用post方式时,浏览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给web服务器,而不是作为url地址参数传递,因此,使用post方式,要比使用get方式大的多。 原来在ASP中用GET传递,页面地址栏能看到参数,POST就看不到,POST方式的好处是可以传递大文件,而GET就有限制,上面说明的意思应该是为了安全性!你只是为了获取服务器的数据用get足够,你要是想把一个页面用AJAX方式传递到服务器,使服务器能够保存表单上的内容,就要用post,参数是针对页面的form来说
问题2:open(get,url,true,usename,password)中关于url的理解:
xmlHttp.open("GET", url);
就是请求url指定文件,该文件可以是xml,也可以是html
url可以带参数 Url:和平常一样(如:"encoding.php?id=1&timeStamp= "+new Date().getTime())
如果是以GET方式提交的话,URL里的最后一个参数(timeStamp)是为了解决浏览器缓存问题
这个参数可以用于服务器处理数据用
url也可以是xml文件
服务器会将xml文件内容返回给客户端
客户端可以用dom对返回的xml对象进行操作 一般情况下,使用Ajax提交的参数多是些简单的字符串,可以直接使用GET方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null。
例如 :
var url = "login.jsp?user=XXX&pwd=XXX";
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
此外,也可以使用send方法传递参数。使用send方法传递参数使用的是POST方法,需要设定Content-Type头信息,模拟HTTP POST方法发送一个表单,这样服务器才会知道如何处理上传的内容。参数的提交格式和GET方法中url的写法一样。设置头信息前必须先调用open方法。
例如:
xmlHttp.open("POST","login.jsp",true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xmlHttp.send("user="+username+"&pwd="+password);
需要注意的是根据提交方式的不同,两种提交方式分别调用后台的doGet方法和doPost方法