Ajax简单例子（XMLHttpRequest对象）

最新推荐文章于 2020-02-23 10:03:47 发布

yuan_fa

最新推荐文章于 2020-02-23 10:03:47 发布

阅读量223

点赞数

http://www.nowamagic.net/librarys/veda/detail/1242

在使用Ajax时，需要创建XMLHttpRequest对象，不同浏览器的创建方式略有不同：

01	<script language="javascript">
02	var xmlHttp = null;
03	try
04	{
05	    // Firefox, Opera 8.0+, Safari 非IE浏览器
06	    xmlHttp=new XMLHttpRequest();
07	}
08	catch (e)
09	{
10	    //IE浏览器
11	    try
12	    {
13	        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
14	    }
15	    catch (e)
16	    {
17	        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
18	    }
19	}
20	</script>

在利用Ajax向服务器提交请求时，需要先确定三点：

使用GET或POST方式提交请求？
需要请求的页面（Page）或代码（Script）？
将请求的页面或代码加载到页面什么位置？

01	function makerequest(serverPage, objID)
02	{
03	    //将要被替换的页面位置obj
04	    var obj = document.getElementById(objID);
05	    //发出页面（serverPage）请求
06	    xmlhttp.open("GET", serverPage);
07	    xmlhttp.onreadystatechange = function()
08	    {
09	        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
10	        {
11	            //将服务器返回的信息替换到页面位置obj
12	            obj.innerHTML = xmlhttp.responseText;
13	        }
14	    }
15	    xmlhttp.send(null);
16	}

其中readyState表示当前对象状态，分为0～4的类别，0: uninitialized, 1: loading, 2: loaded, 3: interactive, 4: complete。status表示HTTP响应状态，常见状态有200 OK，304 Not Modified，401 Unauthorized，403 Forbidden，404 Not Found，500 Internal Server Error，503 Service Unavailable。代码中认定readyState==4和status==200为正常状态。

一个简单的例子

下面再来看一个简单的代码，当用户点击Page1～4时，相应的链接文件将会显示在My Webpage页面中。

view source print ?

01	<html>
02	<head>
03	<title>Ajax Sample</title>
04	<script type="text/javascript">
05	var xmlHttp=null;
06	try
07	{
08	    xmlHttp=new XMLHttpRequest();
09	}
10	catch (e)
11	{
12	    try
13	    {
14	        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
15	    }
16	    catch (e)
17	    {
18	        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
19	    }
20	}
21	function makerequest(serverPage,objId)
22	{
23	    var obj = document.getElementById(objId);
24	    xmlHttp.open("GET", serverPage);
25	    xmlHttp.onreadystatechange = function()
26	    {
27	        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
28	        {
29	            obj.innerHTML = xmlHttp.responseText;
30	        }
31	    }
32	    xmlHttp.send(null);
33	}
34	</script>
35	<body onLoad="makerequest ('content1.html','hw')">
36	    <div align="center">
37	        <h1>My Webpage</h1>
38	    <a href="content1.html" onClick="makerequest('content1.html','hw'); return false;">Page 1</a>
39	    <a href="content2.html" onClick="makerequest('content2.html','hw'); return false;">Page 2</a>
40	    <a href="content3.html" onClick="makerequest('content3.html','hw'); return false;">Page 3</a>
41	    <a href="content4.html" onClick="makerequest('content4.html','hw'); return false;">Page 4</a>
42	    //这里就是将要替换content1～4.html的位置。
43	        <div id="hw"></div>
44	    </div>
45	</body>
46	</html>

yuan_fa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax简单例子（XMLHttpRequest对象）

http://www.nowamagic.net/librarys/veda/detail/1242在使用Ajax时，需要创建XMLHttpRequest对象，不同浏览器的创建方式略有不同：01 02 var xmlHttp = null;03 try04 {05 // Firefox, Opera 8.0+, Safari 非IE浏览器06 xmlHttp=
复制链接

扫一扫