Ajax 是使用客户端脚本与 Web 服务器交换数据的 Web 应用开发方法。Web 页面不用打断交互流程进行重新加裁，就可以动态地更新。使用 Ajax，用户可 以创建接近本地桌面应用的直接、高可用、更丰富、更动态的 Web 用户界面。 软件开发网 异步 JavaScript 和 XML（AJAX）不是什么新技术，而是使用几种现有技术 ——包括级联样式表（CSS）、JavaScript、XHTML、XML 和可扩展样式语言转换 （XSLT），开发外观及操作类似桌面软件的 Web 应用软件。 执行原理] [AJAX 执行原理] 一个 Ajax 交互从一个称为 XMLHttpRequest 的 JavaScript 对象开始。如同 名字所暗示的， 它允许一个客户端脚本来执行 HTTP 请求， 并且将会解析一个 XML 格式的服务器响应。 Ajax 处理过程中的第一步是创建一个 XMLHttpRequest 实例。 使用 HTTP 方法（GET 或 POST） 来处理请求， 并将目标 URL 设置到 XMLHttpRequest 对象上。 http://www.mscto.com 当你发送 HTTP 请求，你不希望浏览器挂起并等待服务器的响应，取而代之 的是，你希望通过页面继续响应用户的界面交互，并在服务器响应真正到达 后 处理它们。要完成它，你可以向 XMLHttpRequest 注册一个回调函数，并异步地 派发 XMLHttpRequest 请求。控制权马上就被返回到浏 览器，当服务器响应到达 时，回调函数将会被调用。 [AJAX 实际应用] [AJAX 实际应用] 1. 初始化 Ajax Ajax 实际上就是调用了 XMLHttpRequest 对象，那么首先我们的就必须调用 这个对象，我们构建一个初始化 Ajax 的函数： /** * 初始化一个 xmlhttp 对象 */

function InitAjax() { var ajax=false;

     try { ajax = new ActiveXObject("Msxml2.XMLHTTP"); }

     catch (e) { try { ajax = new ActiveXObject("Microsoft.XMLHTTP"); }

     catch (E) {
    ajax = false; } }

     if (!ajax && typeof XMLHttpRequest!='undefined')

     { ajax = new XMLHttpRequest(); }

     return ajax;

    }

    你 也许会说，这个代码因为要调用 XMLHTTP 组件，是不是只有 IE 浏览器能 使，不是的经我试验，Firefox 也是能使用的。 那么我们在执行任何 Ajax 操作之前，都必须先调用我们的 InitAjax()函数 来实例化一个 Ajax 对象。 2. 使用 Get 方式 现在我们第一步来执行一个 Get 请求，加入我们需要获取 /show.php?id=1 的数据，那么我们应该怎么做呢？ 假设有一个链接：＜a href="/show.php?id=1"＞新闻 1＜/a＞，我点该链 接的时候，不想任何刷新就能够看到链接的内容，那么我们该怎么做呢？ //将链接改为： ＜a href="http://cms.ddvip.com/index.php#" onClick="getNews(1)"＞新闻 1＜/a＞ //并且设置一个接收新闻的层，并且设置为不显示： ＜div id="show_news"＞＜/div＞ 同时构造相应的 JavaScript 函数：

     function getNews(newsID) {

    //如果没有把参数 newsID 传进来

    if (typeof(newsID) == 'undefined') {

    return false;

    }

    //需要进行 Ajax 的 URL 地址

    var url = "/show.php?id="+ newsID;

     //获取新闻显示层的位置

    var show = document.getElementById("show_news");

    //实例化 Ajax 对象

    var ajax = InitAjax();

    //使用 Get 方式进行请求
    ajax.open("GET", url, true);

    //获取执行状态

    ajax.onreadystatechange = function() {

    //如果执行是状态正常，那么就把返回的内容赋值给上面指定的层

    if (ajax.readyState == 4 && ajax.status == 200) {

        show.innerHTML = ajax.responseText;

     }

}

//发送空

ajax.send(null);

} 那么当，当用户点击“新闻 1”这个链接的时候，在下面对应的层将显示获 取的内容， 而且页面没有任何刷新。 当然， 我们上面省略了 show.php 这个文件， 我们只是假设 show.php 文件存在，并且能够正常工作的从数据库中把 id 为 1 的新闻提取出来。 这种方式适应于页面中任何元素，包括表单等等，其实在应用中，对表单的 操作是比较多的，针对表单，更多使用的是 POST 方式，这个下面将讲述。 3. 使用 POST 方式 其实 POST 方式跟 Get 方式是比较类似的， 只是在执行 Ajax 的时候稍有不同， 我们简单讲述一下。 假设有一个用户输入资料的表单， 我们在无刷新的情况下把用户资料保存到 数据库中，同时给用户一个成功的提示。 软件开发网 //构建一个表单，表单中不需要 action、method 之类的属性，全部由 ajax 来搞定了。 ＜form name="user_info"＞ 姓名：＜input type="text" name="user_name" /＞＜br /＞ 年龄：＜input type="text" name="user_age" /＞＜br /＞ 性别：＜input type="text" name="user_sex" /＞＜br /＞ ＜input type="button" value="提交表单" onClick="saveUserInfo()"＞ ＜/form＞ //构建一个接受返回信息的层： ＜div id="msg"＞＜/div＞ 我们看到上面的 form 表单里没有需要提交目标等信息，并且提交按钮的类 型也只是 button，那么所有操作都是靠 onClick 事件中的 saveUserInfo()函数 来执行了。我们描述一下这个函数：
    软件开发网 function saveUserInfo() { //获取接受返回信息层 var msg = document.getElementById("msg"); //获取表单对象和用户信息值 var f = document.user_info; var userName = f.user_name.value; var userAge = f.user_age.value; var userSex = f.user_sex.value; //接收表单的 URL 地址 var url = "/save_info.php"; //需要 POST 的值，把每个变量都通过&来联接 var postStr = "user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex; //实例化 Ajax var ajax = InitAjax(); //通过 Post 方式打开连接 ajax.open("POST", url, true); //定义传输的文件 HTTP 头信息 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencod ed"); //发送 POST 数据 ajax.send(postStr); //获取执行状态 ajax.onreadystatechange = function() { //如果执行状态成功，那么就把返回信息写到指定的层里 if (ajax.readyState == 4 && ajax.status == 200) {
    msg.innerHTML = ajax.responseText; } } } 大致使用 POST 方式的过程就是这样，当然，实际开发情况可能会更复杂， 这就需要开发者去慢慢琢磨。 4. 异步回调（伪 Ajax 方式） 一般情况下，使用 Get、Post 方式的 Ajax 我们都能够解决目前问题，只是 应用复杂程度，当然，在开发中我们也许会碰到无法使用 Ajax 的时候，但是我 们又需要模拟 Ajax 的效果，那么就可以使用伪 Ajax 的方式来实现我们的需求。
    伪 Ajax 大致原理就是说我们还是普通的表单提交，或者别的什么的，但是 我们却是把提交的值目标是一个浮动框架，这样页面就不刷新了，但是呢， 我 们又需要看到我们的执行结果，当然可以使用 JavaScript 来模拟提示信息，但 是，这不是真实的，所以我们就需要我们的执行结果来异步回调，告诉我 们执 行结果是怎么样的。 假设我们的需求是需要上传一张图片，并且，需要知道图片上传后的状态， 比如，是否上传成功、文件格式是否正确、文件大小是否正确等等。那么我们就 需要我们的目标窗口把执行结果返回来给我们的窗口， 这样就能够顺利的模拟一 次 Ajax 调用的过程。 以下代码稍微多一点， 并且涉及 Smarty 模板技术，如果不太了解，请阅读 相关技术资料。 上传文件：upload.html //上传表单，指定 target 属性为浮动框架 iframe1 ＜form action="/upload.php" method="post" enctype="multipart/form-data" name="upload_img" target="iframe1"＞ 选择要上传的图片：＜input type="file" name="image"＞＜br /＞ ＜input type="submit" value="上传图片"＞ ＜/form＞ //显示提示信息的层 ＜div id="message" style="display:none"＞＜/div＞ //用来做目标窗口的浮动框架 ＜iframe name="iframe1" width="0" height="0" scrolling="no"＞＜/iframe ＞ http://www.mscto.com 处理上传的 PHP 文件：upload.php ＜?php /* 定义常量 */ //定义允许上传的 MIME 格式 define("UPLOAD_IMAGE_MIME", "image/pjpeg,image/jpg,image/jpeg,image/gif,image/x-png,image/png"); //图片允许大小，字节 define("UPLOAD_IMAGE_SIZE", 102400); //图片大小用 KB 为单位来表示 define("UPLOAD_IMAGE_SIZE_KB", 100); //图片上传的路径 define("UPLOAD_IMAGE_PATH", "./upload/"); //获取允许的图像格式 $mime = explode(",", USER_FACE_MIME); $is_vaild = 0;
    //遍历所有允许格式 foreach ($mime as $type) { if ($_FILES['image']['type'] == $type) { $is_vaild = 1; } } //如果格式正确，并且没有超过大小就上传上去 if ($is_vaild && $_FILES['image']['size']＜=USER_FACE_SIZE && $_FILES['image']['size']＞0) { if (move_uploaded_file($_FILES['image']['tmp_name'], USER_IMAGE_PATH . $_FILES['image']['name'])) { $upload_msg ="上传图片成功！"; } else { $upload_msg = "上传图片文件失败"; } } else { $upload_msg = "上传图片失败， 可能是文件超过". USER_FACE_SIZE_KB ."KB、 或者图片文件为空、或文件格式不正确"; } //解析模板文件 $smarty-＞assign("upload_msg", $upload_msg); $smarty-＞display("upload.tpl"); ?＞ 模板文件：upload.tpl {if $upload_msg != ""} callbackMessage("{$upload_msg}"); {/if} //回调的 JavaScript 函数，用来在父窗口显示信息 function callbackMessage(msg) { //把父窗口显示消息的层打开 parent.document.getElementById("message").style.display = "block"; //把本窗口获取的消息写上去 parent.document.getElementById("message").innerHTML = msg; //并且设置为 3 秒后自动关闭父窗口的消息显示
    setTimeout("parent.document.getElementById('message').style.display = 'none'", 3000);
    } 使用异步回调的方式过程有点复杂，但是基本实现了 Ajax、以及信息提示 的功能， 如果接受模板的信息提示比较多， 那么还可以通过设置层的方式来处理， 这个随机应变吧。本文由dchua123贡献
    ppt文档可能在WAP端浏览体验不佳。建议您优先选择TXT，或下载源文件到本机查看。
    AJAX:理论篇
    AJAX的基本概念 的基本概念
    AJAX介绍 介绍 Ajax(Asynchronous JavaScript and XML)
    实现了浏览器异步读取服务器上XML内容的技术, Ajax 是异步 JavaScript 和 XML 的组合. Ajax 允许 Web 开发人员创建交互的 Web 页面,同时避免必须等候页面载入这一瓶颈. 通过 Ajax 创建的应用程序,只需点击按钮,就可以用全新的内容替换 Web 页面某一区域的内容. 它的精彩之处在于不必等候页面装入,只有这一个区域的内容需要载入. 以 Google Maps 为例:可以点击和四处移动地图,却不必等候页面载入. 特点: 特点: 和服务器端语言无关.任何服务器语言,均可使用AJAX. 基于Javascript和Xml. 更加人性化的客户体验. 应用: 应用: 如:用户名重复检查,验证码重载.
    AJAX原理 原理
    Ajax的核心是JavaScript对象 XmlHttpRequest. 该对象在Internet Explorer 5中首次引 入,它是一种支持异步请求的技术. 简而言之,XmlHttpRequest使您可 以使用JavaScript向服务器提出请求 并处理响应,而不阻塞用户.
    利用ajax,我们可以针对一次请求只 刷新局部的页面,这样可以大大提 高web程序对用户的响应速度,增强 交互性.下图是ajax的一个简单的原 理图.
    执行原理: 执行原理: 通过XmlHttpRequest来发送信息, 接收信息,从而实现了异步通信.
    XmlHttpRequest
    微软在其Internet Explorer(IE) 5中作为一个ActiveX对象形式引入了XMLHttpRequest对象.其他的作为一个本地 JavaScript对象来实现的.微软已经在其IE 7中把XMLHttpRequest实现为一个窗口对象属性.幸运的是,尽管其 实现(因而也影响到调用方式)细节不同,但是,所有的浏览器实现都具有类似的功能,并且实质上是相同方法. 目前,W3C组织正在努力进行XMLHttpRequest对象的标准化,并且已经发行了有关该W3C规范的一个草案.
    属性: 属性:
    readyState:通信的状态 onreadystatechange:当readstate改变时,会激发此事件. responseText:服务器返回的文档,以text/html格式. responseXML:服务器返回的文档,以text/xml格式. status:描述了HTTP状态代码,而且其类型为short.
    方法: 方法:
    open() 初始化一个XMLHttpRequest对象 send() 发送数据 setRequestHeader() 设置请求的头部信息 getResponseHeader() 方法用于检索响应的头部值
    readyState属性 属性
    readyState属性 属性 当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历若干种状态:一直等待直到请求 被处理;然后,它才接收一个响应.这样以来,脚本才正确响应各种状态-XMLHttpRequest对象 暴露一个描述对象的当前状态的readyState属性, ReadyState取值 取值 说明
    0
    描述一种"未初始化"状态;此时,已经创建一个 XMLHttpRequest对象,但是还没有初始化. "连接"状态;此时,代码已经调用了XMLHttpRequest open()方 法并且XMLHttpRequest已经准备好把一个请求发送到服务器. "发送"状态;此时,已经通过send()方法把一个请求发送到服 务器端,但是还没有收到一个响应. 正在接收"状态;此时,已经接收到HTTP响应头部信息,但是 消息体部分还没有完全接收结束. 描述一种"已加载"状态;此时,响应已经被完全接收.
    1
    2
    3
    4
    onreadystatechange属性 属性
    onreadystatechange属性 属性
    当readyState状态改变时,会激发此属性所指定的Javascript方法.
    如: ajax = new new XMLHttpRequest(): ajax. Onreadystatechange=myshow; Function myshow() { alert("方法被激活,当前状态"+ajax.readyState); }
    一般用于,当服务器处理完请求之后,要显示回传信息,用它来指定相应的方法来显示. responseText表示服务器返回的信息,以text/html格式. responseXML表示服务器返回的信息,以text/xml格式
    State属性 属性
    state属性 属性
    描述了HTTP状态代码,而且其类型为short,这个页面指处理请求的服务器端页面. 如:mailsave.php
    states取值 取值
    100
    说明
    Continue Switching protocols 数据交换 OK,完成状态 未找到页面 内部程序错误.
    101
    200
    404 500 其它略
    open()方法 方法
    open(method,pageurl,boolean async,[username],[password]) , ,
    用于初始化一个XMLHttpRequest对象. 其中, method参数是必须提供的-用于指定你想用来发送请求的HTTP方法(GET,POST,PUT, DELETE或HEAD).为了把数据发送到服务器,应该使用POST方法;为了从服务器端检索数据, 应该使用GET方法. pageurl参数用于指定XMLHttpRequest对象把请求发送到的服务器相应的URL. async参数指定是否请求是异步的-缺省值为true.为了发送一个同步请求,需要把这个参数设置 为false. 对于要求认证的服务器,你可以提供可选的用户名和口令参数,一般省略.
    在调用open()方法后,XMLHttpRequest对象把它的readyState属性设置为1(打开)并且把 responseText,responseXML,status和statusText属性复位到它们的初始值.另外,它还复位请求 头部.注意,如果你调用open()方法并且此时readyState为4,则XMLHttpRequest对象将复位这些 值.
    send()方法 方法
    send(字符串 字符串) 字符串
    在通过调用open() 后,你需要把该请求发送到服务器.当readyState值为1时,你才可以调用send() 方法;否则的话,XMLHttpRequest对象将引发一个异常.该请求被使用提供给open()方法的参 数发送到服务器.当async参数为true时,send()方法立即返回,从而允许其它客户端脚本处理继 续.在调用send()方法后,XMLHttpRequest对象把readyState的值设置为2(发送).当服务器响应 时,在接收消息体之前,如果存在任何消息体的话,XMLHttpRequest对象将把readyState设置为 3(正在接收中).当请求完成加载时,它把readyState设置为4(已加载).对于一个HEAD类型的请 求,它将在把readyState值设置为3后再立即把它设置为4. 对于GET方法: 方法: 对于 方法 一般不需发送数据,所以: send(null); 对于POST方法: 方法: 对于 方法 send("name=你好&age=20&page=5");
    其它方法
    setRequestHeader()方法 方法
    该setRequestHeader(DOMString header,DOMString value)方法用来设置请求的头部信息.当 readyState值为1时,你可以在调用open()方法后调用这个方法;否则,你将得到一个异常.
    getResponseHeader()方法 方法
    getResponseHeader(DOMString header,value)方法用于检索响应的头部值.仅当readyState值 是3或4(换句话说,在响应头部可用以后)时,才可以调用这个方法;否则,该方法返回一个空字 符串.
    getAllResponseHeaders()方法 方法
    该getAllResponseHeaders()方法以一个字符串形式返回所有的响应头部(每一个头部占单独 的一行).如果readyState的值不是3或4,则该方法返回null.
    AJAX:实战篇
    AJAX 实战与应用
    Jwork框架的 框架的ajax 框架的
    我们知道,web编程,最主要的就是实现客户端(IE)和服务器(Apache)的接收和发送,这是 做web开发的基础.其它的所有应用都是建立在这个基础之上的. 而AJAX,最主要的"亮点"就是异步通信,即实现了页面的不刷新.通过Javascrip实现了局部 更新.所以,AJAX与服务器端的交流方式,也主要是GET和POST.
    Jwork框架,是新东方一搏PHP01版全体师生经验的结晶,它为PHP的开发提供了"中国式"框 架, 易用性框架.
    Jwork框架的 框架的Ajax,完全采用 实现, 等所有web开 框架的 ,完全采用javascript实现,从而可以运用到 实现 从而可以运用到php,jsp,asp,.net等所有 , , , 等所有 开 发语言当中. 发语言当中.
    Jwork Ajax的特点: 的特点: 的特点 1,支持GET和POST提交数据方式. 2,支持主流浏览器. 3,支持控件和DIV所有html元素的数据回显. 4,使用简单,一句话即可实现AJAX.
    jget方法 方法
    jget(url,output) 首先,你要注意,jget方法,是一个javascript的function(方法),它不是php的方法. Jget相当于就是表单的get方法,只不过这里是异步的实现.
    Url:表示你要提交请求的网址.网址中可带一个或多个参数. Output:表示服务器回调的值显示的位置.一般为input或div标签的id名.
    应用演示: 应用演示: 用户名是否重复和验证实现.
    jpost方法 方法
    jpost(url,input,output) jpost有三处参数: 有三处参数: 有三处参数 Url:表示你要提交请求的网址.网址中可带一个或多个参数. Input:表示通过表单POST方式提交的数据.形式为:name=ccopen&id=20 Output:表示服务器回调的值显示的位置.一般为input或div标签的id名.