您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
ajax的初步使用-局部数据请求的应用
发布时间：2015-03-07 20:14:13编辑：雪饮阅读（）
我们在网页中写一个容器,默认不给他内容只给其宽高以及边框颜色使其可以在网页中明显的看到该容器，然后做一个按钮，通过这个按钮触发一个方法，该方法向服务器发出请求，而该请求所返回的值将其接收在我们所布局的这个空白的div中。这便是本次实现局部请求的全过程。
代码如下：
前端请求页面代码：
<html>
<meta http-equiv="content-type" content="text/html; charset=gb18030"/>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","demo_get.php",true);
xmlhttp.send();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//readyState状态值为4时：请求已完成，且响应已就绪
//status状态码为200时：请求完成，结果是创建了新资源。新创建资源的URI可在回应的实体中得到。
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onClick="loadXMLDoc()">请求数据</button>
<div id="myDiv" style="border:pink solid 1px;width:200px;height:30px;"></div>
</body>
</html>
服务器端被请求文件代码：
<?php
header("Content-type: text/html; charset=gb18030");
?>
<?php
echo "我是ajax";
?>
代码解析：
首先判断浏览器的ajax引擎并创建ajax对象。
创建对象之后我们就使用该对象向服务器中请求某文件的返回值
xmlhttp.open("GET","demo_get.php",true);
xmlhttp.send();
open方法创建请求，send方法发送请求
ajax前端请求是有其状态值的，共有0,1,2,3,4不同的值分别代表请求的几个结果，而后端处理请求是有其状态码的，其状态码远比状态值的结果多，因为http的状态码需要经过多重判断，直到完全没有问题的时候才返回，而我们这里xmlhttp.readyState==4 && xmlhttp.status==200则就是代表着完全可以取得响应之后的结果了。那么我们就可以直接取回该响应结果document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
测试站点文件下载：
关键字词：ajax,局部获取,个人博客