浅谈Ajax(转)

一、简介

AJAX(Asynchronous JavaScript And XML),指异步JavaScript及XML,它不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术,其本质就是JavaScript技术,与XML其实没有太大关系。

通过AJAX,可使用JavaScript的XMLHttpRequest对象来直接与服务器进行通信。通过这个对象,JavaScript可在不重载页面的情况与 Web 服务器交换数据

AJAX在浏览器与Web服务器之间使用异步数据传输(HTTP请求),这样就可使网页从服务器请求少量的信息,而不是整个页面,因而可使因特网应用程序更小、更快,更友好

【当然AJAX也支持同步数据传输,不过意义不大。之所以用AJAX,就是因为其异步传输的优点】。

二、使用方法

1. 创建Ajax引擎对象XMLHttpRequest

2. 调用open方法与Ajax引擎建立连接,并告诉Ajax引擎我们的请求方式为get,请求url及采用异步方式

3. 告诉Ajax引擎处理完后,如何把结果反馈给我们,我们通常指定一个方法句柄,那么Ajax就会调用我们指定的方法,从而就可以得到Ajax引擎返回的数据(这种方式一般称为回调机制)

4. 最后巧用send方法设置的参数发送给Ajax引擎

具体代码示例(验证修改密码与登录时session中原密码是否相等):

javascript脚本代码:

var xmlHttp;

function createXMLHttpRequest() {

if(window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest();

} else if(window.ActiveXObject) {

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

}

}

function validate() {

var oldPassword = document.getElementByIdx_x_x("oldPassword");

if(oldPassword.value.length != 0) {

createXMLHttpRequest();

var url = "../servlet/PasswordValidateServlet?oldPassword=" + oldPassword.value;

xmlHttp.open("GET", url, true);

//方法地址,处理完成后自动调用,即回调(调用隐含函数)

//这里利用的是隐含函数,该funtion()函数可独立出来。

//如新定义一个函数 function back(){ }

//之后与xmlHttp关联 xmlHttp.onreadystatechange=back;  注意这里back不要写成back()

xmlHttp.onreadystatechange=function() {

if(xmlHttp.readyState == 4) {

if(xmlHttp.status == 200) {

if (xmlHttp.responseText != "") {

document.getElementByIdx_x_x("oldPasswordSpan").innerHTML = "<font color=‘red‘>" + xmlHttp.responseText + "</font>";

} else {

document.getElementByIdx_x_x("oldPasswordSpan").innerHTML = "";

}

} else {

alert("请求失败!错误码=" + xmlHttp.status);

}

}

};

xmlHttp.send(null);

}else {

document.getElementByIdx_x_x("oldPasswordSpan").innerHTML = "";

}

}

html代码(其他代码略):

<td>

<input name="oldPassword" type="password" class="text1" id="oldPassword" size="25" onblur="validate()"><span id="oldPasswordSpan"></span>

</td>

java代码(也可以是其他语言,这里的代码是由服务器端执行的,所以服务端程序是由什么开发的就用什么语言写即可):

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.wang.drp.sysmgr.domain.User;

public class PasswordValidateServlet extends HttpServlet{

@Override

protected
void doGet(HttpServletRequest request, HttpServletResponse
response) throws ServletException, IOException {

//清理浏览器缓存

//如果没有这步,使用Ajax会产生一些莫名其妙的错误

response.setContentType("text/xml");

response.setHeader("Cache-Control","no-sotre");

response.setHeader("Pragma","no-cache");

response.setDateHeader("Expires",0);

response.setContentType("text/html; charset=GB18030");

User user =
(User)request.getSession().getAttribute("login_user");

String oldPassword = request.getParameter("oldPassword");

if (!oldPassword.equals(user.getPassword())) {

response.getWriter().println("输入密码与原密码不符!");

}

}

}

三、相关说明

1.
Ajax中XMLHttpRequest是最为关键的一个核心对象。

2.
XMLHttpRequest提供了readyState属性来对服务器响应进行判断。

readyState的取值如下:0 (初始化)、1 (正在装载)、2
(装载完毕)、3 (交互中)、4 (完成)

所以只有当readyState=4时,一个完整的服务器响应已经收到了,函数才可以处理该响应。

3. XMLHttpRequest的status属性:

由服务器返回的HTTP状态代码,如200表示成功,而404表示"Not
Found"错误。

4.
XMLHttpRequest的responseText属性:

目前为止从服务器接收到的响应体(不包括头部),或者如果还没有接收到数据的话,就是空字符串。而这个相应即对应response.getWriter()中输出的内容。

时间: 2024-11-06 21:03:41

浅谈Ajax(转)的相关文章

浅谈Ajax 异步的几点细节

1.浏览器执行到Ajax代码的这行语句的时候,发出了一个HTTP请求,欲想请求服务器上的数据.服务器此时开始I/O,所谓的I/O就是磁盘的读写,需要花费一些时间,所以不会立即产生下行的HTTP报文: 2. 由于Ajax是异步的,所以本地的JavaScript程序不会停止运行,页面就不会死等,(不会傻等HTTP报文的反馈)后面javascript语句将继续执行.进程不会阻塞: 3. 等服务器的I/O结束,将下行HTTP报文发送到本地.此时,回调函数执行(将使用DOM更改页面内容).

浅谈Ajax

最近又学习关于jquery中封装的Ajax的方法,越来越感觉到Ajax的好用,所以就想总结一下Ajax的强大之处. Ajax全称Asynchronous JavaScript and XML,顾名思义:异步的 JavaScript 和 XML,当然XML已经逐渐被Json所取代了.在2005年,Google通过其Google Suggest使Ajax变得流行起来.Google Suggest 使用Ajax创造出动态性极强的web界面:当您在谷歌的搜索框输入关键字时,JavaScript会把这些字

浅谈ajax中的GET和POST

Get方式:   用get方式可传送简单数据,但大小一般限制在1KB下,数据追加到url中发送(http的header传送),也就是说,浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面.另外最重要的一点是,它会被客户端的浏览器缓存起来,那么,别人就可以从浏览器的历史记录中,读取到此客户的数据,比如帐号和密码等.因此,在某些情况下,get方法会带来严重的安全性问题. Post方式:   当使用POST方式时,浏览器把各表单字段元素及其数据作为HTTP消息的实体内容发

浅谈ajax的优点与缺点

AJAX (Asynchronous Javascript and XML) 是一种交互式动态web应用开发技术,该技术能提供富用户体验. 完全的AJAX应用给人以桌面应用的感觉.正如其他任何技术,AJAX有它自己的优缺点.下面我列出了一些重要的场景,你在基于web的应用的开发中使用 时一定要注意. AJAX的优点        改善的用户体验- AJAX提供的更丰富的用户体验是其主要优点.AJAX允许网页持续更新,但只需要和服务 器交互很少的数据.这样,就能在不必整个更新网页的情况下更新网页的

浅谈JS之AJAX

0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HTTP和web服务器进行数据交换(用户不知道也感觉不出来,就跟桌面应用程序似的进行数据交互),它不会导致页面重新加载,这样才有更好的用户体验. Ajax是基于以下开放标准: javascript(DOM) css html xml(json) 通俗的说就是使用了javascript(DOM)的XMLH

.net中对象序列化技术浅谈

.net中对象序列化技术浅谈 2009-03-11 阅读2756评论2 序列化是将对象状态转换为可保持或传输的格式的过程.与序列化相对的是反序列化,它将流转换为对象.这两个过程结合起来,可以轻松地存储和传输数 据.例如,可以序列化一个对象,然后使用 HTTP 通过 Internet 在客户端和服务器之间传输该对象.反之,反序列化根据流重新构造对象.此外还可以将对象序列化后保存到本地,再次运行的时候可以从本地文件 中“恢复”对象到序列化之前的状态.在.net中有提供了几种序列化的方式:二进制序列化

单页应用SEO浅谈

单页应用SEO浅谈 前言 单页应用(Single Page Application)越来越受web开发者欢迎,单页应用的体验可以模拟原生应用,一次开发,多端兼容.单页应用并不是一个全新发明的技术,而是随着互联网的发展,满足用户体验的一种综合技术. SEO 一直以来,搜索引擎优化(SEO)是开发者容易忽略的部分.SEO是针对搜索(Google.百度.雅虎搜索等)在技术细节上的优化,例如语义.搜索关键词与内容相关性.收录量.搜索排名等.SEO也是同行.市场竞争常用的的营销手段.Google.百度的搜

浅谈移动前端的最佳实践(转)

前言 这几天,第三轮全站优化结束,测试项目在2G首屏载入速度取得了一些优化成绩,对比下来有10s左右的差距: 这次优化工作结束后,已经是第三次大规模折腾公司框架了,这里将一些自己知道的移动端的建议提出来分享下,希望对各位有用 文中有误请您提出,以免误人自误 技术选型 单页or多页 spa(single page application)也就是我们常常说的web应用程序webapp,被认为是业内的发展趋势,主要有两个优点: ① 用户体验好 ② 可以更好的降低服务器压力 但是单页有几个致命的缺点:

浅谈浏览器的兼容性

浏览器的兼容性浅谈 Css兼容性 <span>标签在IE下要放在前面,否则IE会有问题. IE6下没有min-width的概念,起默认的width就是min-width IE6下两个float之间会有3px的bug IE6图片的下方会有空隙 IE6下margin:0 auto不能剧中,解决:为其父容器设置text-align:center A标签的伪类一定要按LV H A的顺序写,否则ie6有错误 Javascript的兼容性 绑定事件不一样.标准的绑定事件为addEventListener,