Ajax实现步骤.docVIP

Ajax技术集合 版本1.0 Ajax简介 Ajax是多种技术的集合（Asynchronous、JavaScript、XML） Ajax是一种开发模式： JavaScript负责操作XMLHttpRequest对象来跟数据库打交道。 DOM(文档对象模式)负责数据的动态显示和交互。 XML(可扩展标记语言)负责数据的交换和处理。 XMLHttpRequest负责数据的异步读取。 2.要完整实现一个Ajax异步调用和局部刷新，通常需要以下几步： (1)创建XMLHttpRequest对象,也就是创建一个异步请求对象. (2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息. (3)设置响应HTTP请求状态变化的函数； (4)发送HTTP请求. (5)获取异步调用返回的数据. (6)使用JavaScript和DOM解析XMl,实现局部刷新. 3. 来撰写您第一个Ajax程序，使用异步的方式向服务器端取得文本文件，并加以显示，首先请准备一个HTML网页： HelloAjaxEx-1.html //页面名字 !DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//ENhtmlhead meta content=text/html; charset=Big5 http-equiv=content-type titleHello! Ajax! Examples.../title script type=text/javascript src=HelloAjaxEx-1.js/script/headbodycenterinput value=Ajax请求 onclick=startRequest(); type=button/center/body/html 4. 这个HTML网页会取得JavaScript文件，而按下按钮后，会执行startRequest()函式，JavaScript档案如下所示： HelloAjaxEx-1.js //js名字 var xmlHttp;function createXMLHttpRequest() { if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } else if(window.ActiveXObject) { xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); }} function startRequest() { createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open(GET, HelloAjaxEx-1.txt); xmlHttp.send(null);} function handleStateChange() { if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { alert(“服务器端响应： + xmlHttp.responseText); } }} 5. XMLHttpRequest，并发出异步请求取得HelloAjaxEx-1.txt HelloAjaxEx-1.txt 这是异步请求的响应文字 6. 例子： var xmlhttp; function checkUser(){ //获得标签中的数据 var checkResult = document.getElementById(checkResult); checkResult.innerHTML = 正在检测用户名...; //获得表单中的数据 var userName = document.getElementById(userName).value; // alert(userName); //1.创建XMLHttpRequest对象，需要根据IE和其他类型的浏览器创建不同的对象 第一步：创建XMLHttpRequest对象,也就是创建一个异步请求对象. if(window.XMLHttpRequest){ //针对FireFox，Mozillar，IE7，IE8 ，Opera xmlhttp=new XMLHttpRequest();