Ajax的核心是XMLHttpRequest对象,所有的东西都是通过它来实现的.今天就来创建一个XMLHttpRequest对象.并用它来生成一次请求,并处理响应.
正确创建XMLHttpRequest对象
由于浏览器的差异,创建这个对象需要通过浏览器能力的检测.从而相应的实例化这个对象.通常我们是通过构造函数来实例化一个XMLHttpRequest对象.这样做的好处是可以复用.因为我们一般不可能只是创建一个.而通常是创建多个.
function createXmlHttpObject(){ var xmlHttp = null; try{ xmlHttp = new XMLHttpRequest(); }catch(e){ try{ xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; }
生成一次请求.
有了上面的函数.利用它创建一个对象.并用open()和send()方法生成一次请求.最好我们将这个请求也写到一个函数里面.因为请求是在需要的时候再发出.比如点击链接或者按下键盘按钮等.所以我们可以这样做:
function myFirstRequest(){ xmlHttp=createXmlHttpObject(); //不支持则抛出错误的话 if (xmlHttp == null) { alert ("Oop! Browser does not support HTTP Request.") return; } //你要请求的URL,独立弄出来,你可能需要做些处理. var url; xmlHttp.onreadystatechange=function(){ //处理请求过程中的状态.包括返回数据的处理. } //以GET方式请求URL,参数true表示异步.(我强烈大家设置为true否则为阻塞模式) xmlHttp.open("GET", url, true); //GET方式发送null.POST方式则需要发送数据. xmlHttp.send(null); }
生成请求的框框大概就是这个样子了.
处理响应
上面的注释,’处理请求过程中的状态‘就是这里要介绍的内容.
onreadystatechange属性指定了一个方法(function)这个方法在请求的不同阶段将被几次调用.我们可以通过它来访问XMLHttpRequest对象中的属性来判断交换的状态和返回的数据.这些属性是:
readyState 是个表是下列状态的整数值:
0:尚未初始化.
1:载入中
2:载入完成
3:交互
4:完成
status是一个表示请求状态的数字代码:这个是由服务器生成的http协议状态.比如我们常看到的200表示’OK’,404表示’没有找到’等.
statusText是与状态代码相关的一条信息.
知道了上面的信息.就可以分开做判断,最后对返回数据做些处理.
下面是一个常用的onreadystatechange方法.
xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState==4 && xmlHttp.status==200){ //服务器正常.并返回的需要的数据.我们在这里 //对responseText做处理. } else { //载入中.或者其他情况. } }
当然你也看到了.上面的例子并不完整.他没有细分readyState的各个阶段.所以还有一个比较常用的.用switch语句.或者依然用if语句做些细致的判断.简单的句子.这里不重复了.
到这里你大概已经基本Ajax请求的处理方法了.接下来我写个很简单的例子.(基于PHP).你也可以搭建一个PHP环境.实验一下这个例子:
服务器端的代码:
<?php if(isset($_GET['name'])){ if(''==$_GET['name']){ echo '请输入名字'; }else{ echo 'Name: '.$_GET['name']; } }else{ echo 'This is a server file'; } ?>
用户端代码:
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Ajax (GET)</title> <script language="javascript"> (function(){ if(!window.YHLJS) window['YHLJS']={}; function createXmlHttpObject(){ var xmlHttp = null; try{ xmlHttp = new XMLHttpRequest(); }catch(e){ try{ xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } function myFirstRequest(){ xmlHttp=createXmlHttpObject(); //不支持则抛出错误的话 if (xmlHttp == null) { alert ("Oop! Browser does not support HTTP Request.") return; } var url; var data=document.getElementById('name').value; //alert(data); url='server.php?name='+data; xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState==4 && xmlHttp.status==200){ alert(xmlHttp.responseText); document.body.style.cursor = 'auto'; } else { document.body.style.cursor = 'wait'; } } //以GET方式请求URL,参数true表示异步.(我强烈大家设置为true否则为阻塞模式) xmlHttp.open('GET', url, true); //GET方式发送null.POST方式则需要发送数据. xmlHttp.send(null); } window['YHLJS']['myFirstRequest']=myFirstRequest; })(); <form id="send" method="post" action="" onsubmit="YHLJS.myFirstRequest();return false"> <div> <label>您的名字:<input type="text" name="name" id="name" tabindex="1" value="" /> </label> <input type="submit" name="post_submit" id="post_submit" value="提交" tabindex="1" /> </div> </form> </div> </body> </html>
相关推荐
今天学习了点关于XMLHttpRequest对象的一些方法和属性,有点体会,在这里也想记录起来。 1、何为XMLHttpRequest 定义:XMLHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及...
我以前接触Ajax的时候,只是用Jquery的api来实现Ajax效果,对其并没有细细研究,最近在学习Ajax的原理,会不定时的发布关于Ajax的文章,希望大家关注! Ajax原理: 在页面不刷新的情况下,利用XMLHttpRequest发送...
其中客户的XMLHttpRequest对象的封装,就足以让人大饱眼福,在一般的浏览器其都能够运行AJAX。下面我们来学习学习这个咚咚,希望能给更多的人带来帮助。 首先当然是要了解一下浏览器中的XMLHttp对象了: XMLHTTP方法...
摘要:本节补充ajax学习笔记1中 第二种方式:使用XMLHttpRequest对象的responseXML的方式来接受XML数据对象的DOM对象 在ajax学习笔记1中已经对准备工作和需要用到的知识做了比较详细的介绍,本节主要介绍需要修改的...
本文的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 —— 从总体...他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象。作者对ajax做了深入浅出讲解,很适合初学者学习,在这里和大家共同分享了。
主要介绍了AJAX XMLHttpRequest对象创建使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
AJAX,XMLHttpRequest对象,AJAX框架解说,学习文档+实例
ajax学习教材,适合初涉ajax的朋友,捧捧场吧
1、XmlHttpRequest对象的open方法允许程序员用一个ajax调用向服务器发送请求。 2、method表示请求类型。最常用的有get和post请求。如果不向服务器端发送数据,只是请求服务器端的数据,这个时候可以用get方法。...
自己在struts2中的写好了业务逻辑用response返回的内容却是... 您可能感兴趣的文章:ajax的responseText乱码的问题的解决方法jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXMLAjax request response 乱码解决
ajax课程讲议,完整的讲解ajax基本原理与应用。详细说明了XMLHttpRequest对象的使用方法。 配合源代码+是初学者最好的入门资料。 作者:于慧峰
第三天学习Ajax高级请求和响应;第四天利用DOM进行Web 响应。 本文的作者是一位Ajax 专家,他演示了这些技术如何协同工作—— 从总体概述到细节的讨论—— 使高效的Web 开发成为现实。他还揭开了Ajax 核心概念的...
本书重点介绍Ajax及相关的工具和技术,主要内容包括XMLHttpRequest对象及其属性和方法、发送请求和处理响应、构建完备的Ajax开发工具、使用JsUnit测试JavaScript、分析JavaScript调试工具和技术,以及Ajax开发模式和...
第3章 XMLHttpRequest对象 3.1.3 最简单的Ajax示例 第4章 DOM基础及高级DOM技术 柳州龙腾.xml XML-无限数据传输 Test4Document.htm 访问DOM对象的相关节点 Test4Document.htm 检测节点类型 Test4Attribute....
ajax学习笔记.AJAX 不是一种新的编程...通过 AJAX,您的 JavaScript 可使用 JavaScript的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象,您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据。
XMLHttpRequest 对象。 五年前,如果不知道 XML,您就是一只无人重视的丑小鸭。十八个月前,Ruby 成了关注的中心,不知道 Ruby 的程序员只能坐冷板凳了。今天,如果想跟上最新的技术时尚,那您的目标就是 Ajax。 ...
1.1.1 摘要 Ajax技术的核心是XMLHttpRequest对象(简称XHR),可以通过使用XHR对象获取到服务器的数据,然后再通过DOM将数据插入到页面中呈现。虽然名字中包含XML,但Ajax通讯与数据格式无关,所以我们的数据格式...
他还揭开了 Ajax 核心概念的神秘面纱,包括XMLHttpRequest 对象。 五年前,如果不知道 XML,您就是一只无人重视的丑小鸭。十八个月前,Ruby 成了关注的中心,不知道Ruby 的程序员只能坐冷板凳了。今天,如果想跟上...