Ajax小程序，了解Ajax原理

最新推荐文章于 2024-06-13 20:12:40 发布

wenwenye820526

最新推荐文章于 2024-06-13 20:12:40 发布

阅读量75

点赞数

分类专栏： ajax 文章标签： Ajax 浏览器 IE XML 编程

本文链接：https://blog.csdn.net/wenwenye820526/article/details/83362612

版权

ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

今天看<ajax基础教程>，开始学习ajax底层的一些东西，对理解atlas会有帮助。下面是ajax最简单的代码
----innerHTML.htm----
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>User ResponseText With innerHTML</title>
<script type="text/javascript">
var xmlHttp;//声明全局XmlHttpRequest
function createXMLHttpRequest() //创建一个xmlhttprequest
{
if(window.ActiveXObject)//IE浏览器把xmlhttprequest看成一个activeX控件。
{
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
}
else//其他浏览器
{
xmlHttp= new XMLHttpRequest();
}
}

function startRequest()
{
createXMLHttpRequest();
xmlHttp.onreadystatechange=handleStateChange;//设定请求状态改变时，响应的函数
xmlHttp.open("GET","innerHTML.xml",true);//建立调用，向innerHTML.xml发送请求，innerHTML.xml模拟服务器
xmlHttp.send();//发送请求
}

function handleStateChange()
{

if(xmlHttp.readyState==4)//请求完成，0=未初始化；1=正在加载；2=已加载；3=交互中；4=完成
{
if(xmlHttp.status==200)//请求状态，200为正常返回。
{
document.getElementById("results").innerHTML=xmlHttp.responseText;//返回文本绘制页面
}
}
}
</script>
</head>
<body>
<form action="#">
<input type="button" value="click me" οnclick="startRequest();"/>
<div id="results"></div>
</form>
</body>
</html>

---innerHTML.xml
<table border="1">
<tr>
<th>Activity Name</th>
<th>Location</th>
<th>Time</th>
</tr>
<tr>
<th>WaterSkiing</th>
<th>Dock #1</th>
<th>9:00 AM</th>
</tr>
<tr>
<th>WaterSkiing</th>
<th>Dock #1</th>
<th>9:00 AM</th>
</tr>
<tr>
<th>WaterSkiing</th>
<th>Dock #1</th>
<th>9:00 AM</th>
</tr>
</table>

一个XmlHttpRequest与普通的Http请求流程上没有太大的差别，具体分为：
1.open():建立对服务器的调用，这里设定调用是异步还是同步，这里的异步也就是Ajax里面那个大A。设定为同步，处理只有等待服务器返回相应才继续。一般情况下设定为True，这才与XmlHttpRequest初衷相符合。
2.send(content):向服务器发送请求。
3.得到responseText或者responseXml进行处理。
以上代码对各步骤进行了说明。Ajax核心就是处理XmlHttpRequest对象，深入学习，需要对javascript面向对象编程有深入的了解。这样可以把js代码与html完全分离，实现自己的业务逻辑。

wenwenye820526

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax小程序，了解Ajax原理

今天看，开始学习ajax底层的一些东西，对理解atlas会有帮助。下面是ajax最简单的代码----innerHTML.htm---- User ResponseText With innerHTML var xmlHttp;//声明全局XmlHttpRequest function createXMLHttpRequest() //创建一...
复制链接

扫一扫

专栏目录