<!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" onclick="startRequest();"/>
<div id="results"></div>
</form>
</body>
</html>
<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完全分离,实现自己的业务逻辑。
分享到:
相关推荐
AJAX原理 原理 AJAXAJAX原理 原理 AJAXAJAX原理 原理 AJAX
关于Ajax原理的ppt 理解AJAX原理 理解AJAX核心对象 了解异步调用基本原理 使用异步调用构建简单AJAX程序
Ajax原理与系统开发》源码 Ajax原理与系统开发》源码
ajax ajax原理 ajax代码 ajax编程 ajax学习
主要关于ajax原理、XMLHTTPRequest等介绍
ajax原理
ajax原理,ajax原理和XmlHttpRequest对象,ajax优缺点
Ajax原理 和开发指南
Ajax原理详细说明.docAjax原理详细说明.doc
Ajax原理详细说明
ajax原理及应用,概念,技术以及xmlhttprequest实例化
Ajax原理图解借鉴.pdf
Ajax原理介绍,详细介绍了ajax的工作原理!
AJAX原理[收集].pdf
描述原生ajax的原理,以及详细的用法 1.什么是Ajax技术? Ajax 由javascript , xml , css 的组合来做到一定功能的技术 2.它的工作原理是什么? 它会产生一个Ajax引擎对象XMLHttpRequest,它由浏览器产生。所以不同...
程序员突击:Ajax原理与系统开发
AJAX原理及其在Web开发中的应用.pdf
Ajax 原理和应用.如果你对Ajax不了解或者不是很熟悉的,可以来看看 文档通过10个方面,比较详细的给你介绍这一技术。 1、ajax技术的背景 2、ajax技术的意义 3、关于ajax的名字 。。。等等
1 原始ajax原理 2 jquery JDBC 3 json数据 4 三级联动 5 仿百度自动提示 6 fromValidator验证 其中自带jar包 修改 DBconfig Mysql数据库配置文件直接运行即可 方便大家学习 ~~~同时鄙视那些高分卖例子的人... ...
十分经典的Ajax实例,可以讲通用 网页无刷新,异步请求实现的相当完美