强烈推荐-ajax开发者必看的文章第1/3页

七、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将服务器返回的校验信息显示出来。代码如下:

  在<body></body>之间增加一段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;
if(username=="") {
window.alert("用户名不能为空。");
f.username.focus();
return false;
}
else {
send_request('sample1_2.jsp?username='+username);
}
}

  看看sample1_2.jsp做了什么:

<%@ page contentType="text/html; charset=gb2312" errorPage="" %>
<%
String username = request.getParameter("username");
if("educhina".equals(username)) out.print("用户名已经被注册,请更换一个用户名。");
else out.print("用户名尚未被使用,您可以继续。");
%>

  运行一下,嗯,没有弹出窗口,没有页面刷新,跟预想的效果一样。如果需要的话,可以在sample1_2.jsp中实现更复杂的功能。最后,只要将反馈信息打印出来就可以了。


B、级联菜单
  我们在第五部分提到利用AJAX改进级联菜单的设计。接下来,我们就演示一下如何“按需取数据”。

  首先,在<body></body>中间增加如下HTML代码:

<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20">
<a href="javascript:void(0)" onClick="showRoles('pos_1')">经理室</a>
</td>
</tr>
<tr style="display:none">
<td height="20" id="pos_1"> </td>
</tr>
<tr>
<td height="20">
<a href="javascript:void(0)" onClick="showRoles('pos_2')">开发部</a>
</td>
</tr>
<tr style="display:none ">
<td id="pos_2" height="20"> </td>
</tr>
</table>

  在框架的基础上增加一个响应函数showRoles(obj):

//显示部门下的岗位
function showRoles(obj) {
document.getElementById(obj).parentNode.style.display = "";
document.getElementById(obj).innerHTML = "正在读取数据..."
currentPos = obj;
send_request("sample2_2.jsp?playPos="+obj);
}

  修改框架的processRequest函数:

// 处理返回信息的函数
function processRequest() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回,开始处理信息
document.getElementById(currentPos).innerHTML = http_request.responseText;
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}

  最后就是smaple2_2.jsp了:

<%@ page contentType="text/html; charset=gb2312" errorPage="" %>
<%
String playPos = request.getParameter("playPos");
if("pos_1".equals(playPos))
out.print("  总经理<br>  副总经理");
else if("pos_2".equals(playPos))
out.println("  总工程师<br>  软件工程师");
%>

  运行一下看看效果:

7.4、文档对象模型(DOM)
  文档对象模型(DOM)是表示文档(比如HTML和XML)和访问、操作构成文档的各种元素的应用程序接口(API)。一般的,支持Javascript的所有浏览器都支持DOM。本文所涉及的DOM,是指W3C定义的标准的文档对象模型,它以树形结构表示HTML和XML文档,定义了遍历这个树和检查、修改树的节点的方法和属性。

当前1/3页 123下一页阅读全文

Tags:强烈推荐-ajax开发者必看的文章

相关文章

  • 2017-07-07如何手写Ajax实现异步刷新
  • 2016-11-11Ajax通过XML异步提交的方法实现从数据库获取省份和城市信息实现二
  • 2015-08-08Ajax实现弹出式无刷新城市选择功能代码
  • 2007-02-02一个AJAX自动完成功能的js封装源码[支持中文]
  • 2006-07-07Ajax技术(WEB无刷新提交数据)-
  • 2013-07-07ajax返回的json内容进行排序使用sort()方法实现
  • 2016-08-08Ajax结合php实现二级联动
  • 2017-03-03Ajax校验是否重复的实现代码
  • 2017-01-01ajax提交手机号去数据库验证并返回状态值
  • 2012-03-03多ajax请求的各类解决方案(同步, 队列, cancel请求)

最新评论

(0)

相关推荐

  • 强烈推荐-ajax开发者必看的文章第1/3页

    七.AJAX开发 到这里,已经可以清楚的知道AJAX是什么,AJAX能做什么,AJAX什么地方不好.如果你觉得AJAX真的能给你的开发工作带来改进的话,那么继续看看怎么使用AJAX吧. 7.1.AJAX应用到的技术 AJAX涉及到的7项技术中,个人认为Javascript.XMLHttpRequest.DOM.XML比较有用. A.XMLHttpRequest对象 XMLHttpRequest是XMLHTTP组件的对象,通过这个对象,AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换,而

  • Javascript 基础---Ajax入门必看

    Ajax 是现代Web 应用程序开发的一项关键工具.它让你能向服务器异步发送和接收数据,然后用 Javascript 解析. Ajax 是 Asynchronous JavaScript and XML (异步JavaScript 与XML)的缩写. Ajax 核心规范的名称继承于用来建立和发起请求的 Javascript 对象:XMLHttpRequest .这个规范有两个等级.所有主流浏览器都实现了第一级,它代表了基础级别的功能.第二级扩展了最初的规范,纳入了额外的事件和一些功能来让它更容易

  • IDEA实用好用插件推荐及使用方法教程详解(必看)

    当前使用的IDEA版本是2020.1.随着IDEA版本的升级,有些插件不再支持,而有些插件变成了收费插件,这些插件将不再推荐.以下列举的,都是亲测可以在2020.1版本的IDEA中使用的插件. Translation 简介 翻译插件,支持google翻译.百度翻译.有道翻译. 使用 快捷键Ctrl + Shift + O Key promoter X 简介 Key Promoter X 是一个提示插件.在IDEA里使用鼠标操作时,会有这个操作的快捷键在界面的右下角进行告知.有个小缺点是有些没有快

  • 使用IntelliJ IDEA 配置安卓(Android)开发环境的教程详解(新手必看)

      上移动端的测试课,老师和同学们用的都是eclipse, 只有我一个人用的是idea(用了两款软件之后觉得IDEA更好),真的太难了,配置环境就只有一个人孤军奋战了,自己选择的路,爬都要爬完,害!   有大佬推荐我用Android studio,去了解了一下,这个软件也不错,考虑到已经用了IDEA那就用吧. 操作环境和基本配置 操作环境:Win 10 基本环境配置:Java 1.8 基本工具:IDEA(自行下载安装购买,支持正版!) 一.jdk的下载安装与配置 1.1下载安装 jdk的官网下载

  • Python 开发工具PyCharm安装教程图文详解(新手必看)

    PyCharm是由JetBrains打造的一款Python IDE,VS2010的重构插件Resharper就是出自JetBrains之手. 同时支持Google App Engine,PyCharm支持IronPython.这些功能在先进代码分析程序的支持下,使 PyCharm 成为 Python 专业开发人员和刚起步人员使用的有力工具. PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试.语法高亮.Project管理.代码跳

  • Intellij IDEA 阅读源码的 4 个绝技(必看)

    前段时间分享了<阅读跟踪 Java 源码的几个小技巧>是基于 Eclipse 版本的,看大家的留言都是想要 IDEA 版本的源码阅读技巧. 所以,为了满足众多 IDEA 粉丝的要求,栈长我特意做一期 IDEA 版的. 1.定位到方法实现类 public static Object getBean(String name) { return applicationContext.getBean(name); } 如以上代码,IDEA 如何跳转到 getBean 方法的实现类? 在 IDEA 中,

  • 小白安装登录mysql-8.0.19-winx64的教程图解(新手必看)

    一.下载安装包(64位) MySQL官网下载链接:https://www.mysql.com/cn/ 点击下载 下拉网页找到下图链接 点击上述链接,找到下图链接 选择如图版本点击下载. 二.安装MySQL数据库 解压安装包,这里我将安装包解压在D盘下的MySQL文件夹下 配置环境变量 (1)右击我的电脑-->属性-->高级系统设置-->环境变量.(2)系统变量选择新建. (3)输入下图内容(变量值根据自己安装包解压路径变化). (4)在系统变量里面找到Path,选择编辑. (5)点击新建

  • tensorflow基于CNN实战mnist手写识别(小白必看)

    很荣幸您能看到这篇文章,相信通过标题打开这篇文章的都是对tensorflow感兴趣的,特别是对卷积神经网络在mnist手写识别这个实例感兴趣.不管你是什么基础,我相信,你在看完这篇文章后,都能够完全理解这个实例.这对于神经网络入门的小白来说,简直是再好不过了. 通过这篇文章,你能够学习到 tensorflow一些方法的用法 mnist数据集的使用方法以及下载 CNN卷积神经网络具体python代码实现 CNN卷积神经网络原理 模型训练.模型的保存和载入 Tensorflow实战mnist手写数字

  • Java8中的默认方法(面试者必看)

    背景 在Java8之前,定义在接口中的所有方法都需要在接口实现类中提供一个实现,如果接口的提供者需要升级接口,添加新的方法,那么所有的实现类都需要把这个新增的方法实现一遍,如果说所有的实现类能够自己控制的话,那么还能接受,但是现实情况是实现类可能不受自己控制.比如说Java中的集合框架中的List接口添加一个方法,那么Apache Commons这种框架就会很难受,必须修改所有实现了List的实现类 现在的接口有哪些不便 向已经发布的接口中添加新的方法是问题的根源,一旦接口发生变化,接口的实现者

  • FFmpeg视频处理入门教程(新手必看)

    目录 一.概念 1.1 容器 1.2 编码格式 1.3 编码器 二.FFmpeg 的使用格式 三.常用命令行参数 四.常见用法 4.1 查看文件信息 4.2 转换编码格式 4.3 转换容器格式 4.4 调整码率 4.5 改变分辨率(transsizing) 4.6 提取音频 4.7 添加音轨 4.8 截图 4.9 裁剪 4.10 为音频添加封面 五.参考链接 FFmpeg是视频处理最常用的开源软件. 它功能强大,用途广泛,大量用于视频网站和商业软件(比如 Youtube 和 iTunes),也是

随机推荐