`
mars李
  • 浏览: 50233 次
  • 性别: Icon_minigender_1
  • 来自: 柳州
社区版块
存档分类
最新评论

AJAX开发简略(第二部分)

    博客分类:
  • AJAX
阅读更多
七、AJAX开发
  到这里,已经可以清楚的知道AJAX是什么,AJAX能做什么,AJAX什么地方不好。如果你觉得AJAX真的能给你的开发工作带来改进的话,那么继续看看怎么使用AJAX吧。

7.1、AJAX应用到的技术
  AJAX涉及到的7项技术中,个人认为Javascript、XMLHttpRequest、DOM、XML比较有用。

A、XMLHttpRequest对象
  XMLHttpRequest是XMLHTTP组件的对象,通过这个对象,AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换,而不用每次都刷新界面,也不用每次将数据处理的工作都交给服务器来做;这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。

  IE5.0开始,开发人员可以在Web页面内部使用XMLHTTP ActiveX组件扩展自身的功能,不用从当前的Web页面导航就可以直接传输数据到服务器或者从服务器接收数据。,Mozilla1.0以及NetScape7则是创建继承XML的代理类XMLHttpRequest;对于大多数情况,XMLHttpRequest对象和XMLHTTP组件很相似,方法和属性类似,只是部分属性不同。

XMLHttpRequest 对象初始化:
<script language=”javascript”>
var http_request = false;
//IE 浏览器
http_request = new ActiveXObject("Msxml2.XMLHTTP");
http_request = new ActiveXObject("Microsoft.XMLHTTP");
//Mozilla 浏览器
http_request = new XMLHttpRequest();
</script>


  XMLHttpRequest对象的方法:

方法
描述

abort()
停止当前请求

getAllResponseHeaders()
作为字符串返回完整的headers

getResponseHeader("headerLabel")
作为字符串返回单个的header标签

open("method","URL"[,asyncFlag[,"userName"[, "password"]]])
设置未决的请求的目标URL,方法,和其他参数

send(content)
发送请求

setRequestHeader("label", "value")
设置header并和请求一起发送


  XMLHttpRequest对象的属性:

属性
描述

onreadystatechange
状态改变的事件触发器

readyState
对象状态(integer):


0 = 未初始化
1 = 读取中
2 = 已读取
3 = 交互中
4 = 完成

responseText
服务器进程返回数据的文本版本

responseXML
服务器进程返回数据的兼容DOM的XML文档对象

status
服务器返回的状态码, 如:404 = "文件未找到" 、200 ="成功"

statusText
服务器返回的状态文本信息



B、Javascript
  Javascript一直被定位为客户端的脚本语言,应用最多的地方是表单数据的校验。现在,可以通过Javascript操作XMLHttpRequest,来跟数据库打交道。

C、DOM
  DOM(Document Object Model)是提供给HTML和XML使用的一组API,提供了文件的表述结构,并可以利用它改变其中的内容和可见物。脚本语言通过DOM才可以跟页面进行交互。Web开发人员可操作及建立文件的属性、方法以及事件都以对象来展现。比如,document就代表页面对象本身。

D、XML
  通过XML(Extensible Markup Language),可以规范的定义结构化数据,是网上传输的数据和文档符合统一的标准。用XML表述的数据和文档,可以很容易的让所有程序共享。

7.2、AJAX开发框架
  这里,我们通过一步步的解析,来形成一个发送和接收XMLHttpRequest请求的程序框架。AJAX实质上也是遵循Request/Server模式,所以这个框架基本的流程也是:对象初始化à发送请求à服务器接收à服务器返回à客户端接收à修改客户端页面内容。只不过这个过程是异步的。

A、初始化对象并发出XMLHttpRequest请求
  为了让Javascript可以向服务器发送HTTP请求,必须使用XMLHttpRequest对象。使用之前,要先将XMLHttpRequest对象实例化。之前说过,各个浏览器对这个实例化过程实现不同。IE以ActiveX控件的形式提供,而Mozilla等浏览器则直接以XMLHttpRequest类的形式提供。为了让编写的程序能够跨浏览器运行,要这样写:

if (window.XMLHttpRequest) { // Mozilla, Safari, ...

http_request = new XMLHttpRequest();

}

else if (window.ActiveXObject) { // IE

http_request = new ActiveXObject("Microsoft.XMLHTTP");

}

  有些版本的Mozilla浏览器处理服务器返回的未包含XML mime-type头部信息的内容时会出错。因此,要确保返回的内容包含text/xml信息。

http_request = new XMLHttpRequest();

http_request.overrideMimeType('text/xml');

B、指定响应处理函数
  接下来要指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性就可以了。比如:

http_request.onreadystatechange = processRequest;

  需要指出的时,这个函数名称不加括号,不指定参数。也可以用Javascript即时定义函数的方式定义响应函数。比如:

http_request.onreadystatechange = function() { };

C、发出HTTP请求

  指定响应处理函数之后,就可以向服务器发出HTTP请求了。这一步调用XMLHttpRequest对象的open和send方法。

http_request.open('GET', 'http://www.example.org/some.file', true);

http_request.send(null);

  open的第一个参数是HTTP请求的方法,为Get、Post或者Head。

  open的第二个参数是目标URL。基于安全考虑,这个URL只能是同网域的,否则会提示“没有权限”的错误。这个URL可以是任何的URL,包括需要服务器解释执行的页面,不仅仅是静态页面。目标URL处理请求XMLHttpRequest请求则跟处理普通的HTTP请求一样,比如JSP可以用request.getParameter(“”)或者request.getAttribute(“”)来取得URL参数值。

open的第三个参数只是指定在等待服务器返回信息的时间内是否继续执行下面的代码。如果为True,则不会继续执行,直到服务器返回信息。默认为True。

  按照顺序,open调用完毕之后要调用send方法。send的参数如果是以Post方式发出的话,可以是任何想传给服务器的内容。不过,跟form一样,如果要传文件或者Post内容给服务器,必须先调用setRequestHeader方法,修改MIME类别。如下:

http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

  这时资料则以查询字符串的形式列出,作为sned的参数,例如:

name=value&anothername=othervalue&so=on

D、处理服务器返回的信息
  在第二步我们已经指定了响应处理函数,这一步,来看看这个响应处理函数都应该做什么。

  首先,它要检查XMLHttpRequest对象的readyState值,判断请求目前的状态。参照前文的属性表可以知道,readyState值为4的时候,代表服务器已经传回所有的信息,可以开始处理信息并更新页面内容了。如下:

if (http_request.readyState == 4) {

// 信息已经返回,可以开始处理

} else {

// 信息还没有返回,等待

}

  服务器返回信息后,还需要判断返回的HTTP状态码,确定返回的页面没有错误。所有的状态码都可以在W3C的官方网站上查到。其中,200代表页面正常。

if (http_request.status == 200) {

// 页面正常,可以开始处理信息

} else {

// 页面有问题

}

  XMLHttpRequest对成功返回的信息有两种处理方式:
  responseText:将传回的信息当字符串使用;
  responseXML:将传回的信息当XML文档使用,可以用DOM处理。

E、一个初步的开发框架
  总结上面的步骤,我们整理出一个初步的可用的开发框架,供以后调用;这里,将服务器返回的信息用window.alert以字符串的形式显示出来:

<script language="javascript">
var http_request = false;
function send_request(url) {//初始化、指定处理函数、发送请求的函数
http_request = false;
//开始初始化XMLHttpRequest 对象
if(window.XMLHttpRequest) { //Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//设置MiME 类别
http_request.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) { // IE 浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 异常,创建对象实例失败
window.alert("不能创建XMLHttpRequest 对象实例.");
return false;
}
http_request.onreadystatechange = processRequest;
// 确定发送请求的方式和URL 以及是否同步执行下段代码
http_request.open("GET", url, true);
http_request.send(null);
}
// 处理返回信息的函数
function processRequest() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回,开始处理信息
alert(http_request.responseText);
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
</script>


7.3、简单的示例
  接下来,我们利用上面的开发框架来做两个简单的应用。

A、数据校验
  在用户注册的表单中,经常碰到要检验待注册的用户名是否唯一。传统的做法是采用window.open的弹出窗口,或者window. showModalDialog的对话框。不过,这两个都需要打开窗口。采用AJAX后,采用异步方式直接将参数提交到服务器,用window.alert将服务器返回的校验信息显示出来。代码如下:

  在之间增加一段form表单代码:
<form name="form1" action="" method="post">
用户名:<input type="text" name="username" value=""> 
<input type="button" name="check" value="唯一性检查" onClick="userCheck()">
<input type="submit" name="submit" value="提交">
</form>

  在开发框架的基础上再增加一个调用函数:

function userCheck() {

var f = document.form1;

var username = f.username.value;
分享到:
评论

相关推荐

    AJAX开发简略 (第一部分).pdf

    ### AJAX开发简略知识点概述 #### 一、引言 在传统的Web开发中,每当用户与网站进行交互时,如提交表单或点击链接,浏览器都会发送一个完整的HTTP请求到服务器,并等待服务器返回一个新的HTML页面。这个过程不仅...

    AJAX开发简略 (第二部分).mht

    AJAX开发简略 (第二部分).mht

    AJAX开发简略(第一版)

    **AJAX开发简略(第一版)** AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,提升了用户体验。...

    AJAX开发简略 (第二部分)

    【AJAX开发简略 (第二部分)】 在深入理解了AJAX的概念、作用及其潜在问题之后,如果决定将其应用于实际的开发工作中,就需要掌握如何有效使用AJAX的关键技术。AJAX涉及的技术主要包括JavaScript、XMLHttpRequest、...

    ajax开发简略

    1. **创建XMLHttpRequest对象**:在JavaScript中,Ajax的第一步是创建一个XMLHttpRequest对象。这个对象是所有Ajax交互的基础,它允许客户端与服务器进行通信。 2. **建立连接**:一旦有了XMLHttpRequest对象,就...

    ajax开发简略(第二部分)

    实习老师传的ajax学习资料 分享一下 描述完毕

    AJAX开发简略PPT和相关AJAX开发例子代码下载.

    这个压缩包中的“AJAX开发简略[1]”可能包含了一个PPT文件,详细介绍了AJAX的基础概念和技术,以及一些示例代码,帮助开发者更好地理解和应用AJAX。学习这些内容,开发者可以创建更动态、响应更快的网页应用。

    AJAX开发简略 Ajax 学习

    **AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新。这种技术可以提升用户体验,因为用户不再...

    AJAX开发简略各种例题和文档

    本资源包“AJAX开发简略”提供了丰富的例题和文档,旨在帮助初学者快速理解和掌握AJAX的核心概念和应用。** ### 1. AJAX基础 - **XMLHttpRequest对象**:AJAX的核心是XMLHttpRequest对象,它允许JavaScript在后台与...

    AJAX开发简略含续.pdf

    - **级联菜单**:根据用户的第一个选择动态填充第二个选择的选项。 ##### 4. 文档对象模型(DOM) DOM将HTML文档视为一棵树,每个HTML元素都是树中的一个节点。通过DOM,可以轻松地访问和修改文档中的元素及其属性...

    AJAX开发简略

    **AJAX(Asynchronous JavaScript and XML)开发简略** AJAX,全称为异步JavaScript和XML,是一种在不重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现局部...

    AJAX从入门到精通

    两本书 一本为AJAX新手快车道(已经加了书签目录) 一本为AJAX开发简略(含续一) 都是PDF格式的 第一本用来入门,第二本用来提高,同时工作的时候可以参考 推荐用foxit reader打开

    基于PHP的陈老师云点播 php版.zip

    【描述】中的信息虽简略,但我们可以推测这个项目可能包含了以下几个关键部分: 1. **PHP基础**:首先,理解PHP的基本语法、变量、控制结构、函数等是必要的。PHP常用于开发Web应用,因为它可以方便地与HTML结合,...

    网上购物系统(JavaBean+Servlet+jsp).zip

    【标题】"网上购物系统(JavaBean+Servlet+jsp)"是一个基于Java技术栈开发的电子商务应用程序,它利用了JavaBean、Servlet和JSP(JavaServer Pages)这三种核心技术来实现前端用户界面、业务逻辑处理以及数据存储交互...

    team-proj-09

    JavaScript是Web开发中不可或缺的一部分,常用于前端交互、后端服务器以及移动应用开发。它具有动态类型、原型化继承、基于对象和事件驱动的特点,使得其在构建复杂、高性能的网络应用时非常灵活。 【描述】项目...

    web:StackSync网页

    【描述】中的“网路”一词,虽然简略,但提示我们StackSync可能与网络通信有关,特别是考虑到Web的上下文。"StackSync网页 测试1"表明这是一个测试版本,可能是开发过程中的一个迭代,用于验证和优化StackSync的功能...

Global site tag (gtag.js) - Google Analytics