ajax原理.doc

本文档包含以下内容：一、ajax工作原理二、XMLHttpRequest对象的创建三、打开链接，向服务器发送请求一、ajax工作原理Ajax：异步的javascript和xml作用：在不重新加载整个页面的情况下，实现与服务器交换数据并更新部分网页。/*ajax工作步骤：1、创建ajax对象2、判断数据传输方式：get/post3、打开连接open()4、发送send()5、当ajax对象完成（onreadtstatechange）数据接收完成，判断http响应状态并执行回调函数。二、XMLHttpRequest对象的创建作用：用于在后台与服务器交换数据。IE5，IE6使用:ActiveXObject其他支持XMLHttpRequest1、创建 XMLHttpRequest 对象：a=new XMLHttpRequest();a=new ActiveXObject(Microsoft.XMLHTTP);/ie5,ie6为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：var xmlhttp;if(window.XMLhttpRequest)xmlhttp=new XMLHttpRequest();elsexmlhttp=new ActiveXObject(Microsoft.XMLHTTP);三、打开链接，向服务器发送请求xmlhttp.open(GET,test1.txt,true);xmlhttp.send();参数一：数据传送方式get/post一般情况下使用get,因为get是附在网址后面进行数据传送，大部分情况下都能用。使用post的情况：无法使用缓存文件/向服务器传送大量数据/发送包含未知字符的用户输入参数二：文件参数三：true是异步，false是同步*/代码示例1：1. html无标题文档ajax请求数据function loadXMLDOC()var xmlhttp;if(window.XMLHttpRequest)xmlhttp=new XMLHttpRequest();elsexmlhttp=new ActiveXObject(Microsoft.XMLHTTP);xmlhttp.onreadystatechange=function()if(xmlhttp.readyState=4&xmlhttp.status=200)document.getElementById(mydiv).innerHTML=xmlhttp.responseText;xmlhttp.open(GET,2.html,true);xmlhttp.send();2.html 本内容是使用 GET 方法请求的。 请求时间：2015-10-29 19:32:23 上面的例子中，为避免获得缓存结果，可以向URL添加唯一idxmlhttp.open(GET,2.html?t=+Math.random(),true);使用Post请求时，如果想像HTML表单那样post数据，使用setRequestHeader()来添加HTTP头部，然后在send()方法中规定发送的数据。xmlhttp.open(POST,2.html,true);xmlhttp.setRequestHeader(Content-type,application/x-www-form-urlencoded);xmlhttp.send(fname=bill&lname=gate);/*注意：XMLHttpRequest对象如果要用于AJAX的话，open方法的async参数必须设置为truexmlhttp.open(GET,ajax_test.asp,true);通过ajax,js无需等待服务器响应，而是在等待服务器响应时执行其他脚步当响应就绪后对响应进行处理不建议使用false当使用false时，无需编写onreadystatechange函数，直接把代码放到send()语句后面即可：xmlhttp.open(GET,test