【转】js通过xmlHttpRequest向服务器请求

使用js通过xmlHttpRequest向服务器请求，再根据返回的结果进行更新面页，

可以做到无刷新，也就是AJAX技术了。

项目中用到这一点，所以也就写下来，以供自己以后查询和使用。

1、要例用xmlHttpRequest向服务器请求，首要的就是要创建一个

???? xmlHttpRequest对象，但这个对象会根据浏览器的不同而不同，

　　所以创建的时候也有区别。代码如下

view plaincopy to clipboardprint?
var xmlHttp = false;??
??????????
??????? /*@cc_on @*/?
??????? /*@if (@_jscript_version >= 5)?
??????????? try?
??????????? {?
??????????????? xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");?
??????????? }??
??????????? catch (e)??
??????????? {?
??????????????? try??
??????????????? {?
??????????????????? xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");?
??????????????? }??
??????????????? catch (e2)??
??????????????? {?
??????????????????? xmlHttp = false;?
??????????????? }???
??????????? }?
??????? @end @*/?
??????? if (!xmlHttp && typeof XMLHttpRequest != 'undefined')???
??????? {??
????????? xmlHttp = new XMLHttpRequest();??
??????? }??
var xmlHttp = false;
???????
??????? /*@cc_on @*/
??????? /*@if (@_jscript_version >= 5)
??????????? try
??????????? {
??????????????? xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
??????????? }
??????????? catch (e)
??????????? {
??????????????? try
??????????????? {
??????????????????? xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
??????????????? }
??????????????? catch (e2)
??????????????? {
??????????????????? xmlHttp = false;
??????????????? }?
??????????? }
??????? @end @*/
??????? if (!xmlHttp && typeof XMLHttpRequest != 'undefined')
??????? {
????????? xmlHttp = new XMLHttpRequest();
??????? }?

　　有一点得说明，这个代码最好以静态的方式执行，也就是一开始就让页面运行这些代码以产生xmlHttpRequest

　　因为它可能会创建不成功，如果创建不成功的话，直接就不再执行了，以免浪费不必要的资源

2、创建了xmlHttpRequest对象后，就要使用它了

???? 方法如下

function callServer()
??????? {???????
??????????? xmlHttp.open("get","www.baidu.com",true);

　　　　//这是一个委托事件，也就是xmlHttpRequest请求后的结果给那个方法调用

??????????? xmlHttp.onreadystatechange = updatePage;
?????????????
??????????? xmlHttp.send(null);
??????? }

3、请求后就要处理结果了，这个处理结果的方法就是那个委托的方法

?????? function updatePage()
??????? {
????????????? if (xmlHttp.readyState == 4)
????????????? {

?　　　　　　　var response = xmlHttp.responseText;? //这个就是请求后得到的Html源码，再根据源码处理自己要做的事

????????????? }

??????? }

4、这里我写的不尽详细，因为我也是完成任务就行的了，下次能再次用起来就OK的那种。。。。

　　如果要看详细的话，请参看　http://www.ccvita.com/6.html 　这一篇文章

2010.4.29补充：

???? 1、创建xmlHttpRequest还是用比较简单的方法比较好，如下

var req;

??????

?????? function init()

?????? {

?????????? if(window.XMLHttpRequest)

?????????? {

????????????? req = new XMLHttpRequest();

?????????? }

?????????? else if (window.ActiveXObject)

?????????? {

????????????? req = new ActiveXObject("Microsoft.XMLHTTP");

?????????? }

?????? }

?

?

??? 2、 通过xmlHttpRequest请求的时候分两种，一种是POST一种是GET。这两种在传参数方面也有不同。

?

????????? Get的话就用简单的后面带参数的方式传过去，但POST就有点不一样了。它传参的方式是这样：

?

???????

????? req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");??

????? var c = "ID?89&Name=Love"? //就是这种形式

????? req.send(c);

?????????

????????? 并且要记信，req.setRequestHeader必须放在OPEN之后，也就是请求之后，否则另外一个页面是无法获取

????????? 到参数的。至于其中的原理好像跟浏览器有关，这点没进行深入了解

?

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/liushengmz/archive/2010/03/29/5426732.aspx