AJAX

简介

AJAX 是异步 JavaScript 及 XML（Asynchronous JavaScript and XML）的缩写。AJAX 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术，一种独立于 Web 服务器软件的浏览器技术。但同时，AJAX不是一种单独的技术，实际上它是几种技术的结合使用。

通过 AJAX，JavaScript 可使用 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象， JavaScript 可在不重载页面的情况与 Web 服务器使用异步数据传输（HTTP 请求）交换数据，这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX 可使因特网应用程序更小、更快，更友好。

11.2 基本原理和技术

AJAX 基于下列 Web 标准：

JavaScript
XML
HTML
CSS

11.2.1 AJAX 使用 Http 请求

在传统的 JavaScript 编程中，假如您希望从服务器上的文件或数据库中得到任何的信息，或者向服务器发送信息的话，就必须利用一个 HTML 表单向服务器 GET 或 POST 数据。而用户则需要单击“提交”按钮来发送/获取信息，等待服务器的响应，然后一张新的页面会加载结果。

由于每当用户提交输入后服务器都会返回一张新的页面，传统的 web 应用程序变得运行缓慢，且越来越不友好。

图 11.1 AJAX与传统Web应用的区别

通过利用 AJAX，JavaScript 会通过 JavaScript 的 XMLHttpRequest 对象，直接与服务器来通信。

通过使用 HTTP 请求，web 页可向服务器进行请求，并得到来自服务器的响应，而不加载页面。用户可以停留在同一个页面，他或她不会注意到脚本在后台请求过页面，或向服务器发送过数据。

11.2.2 第一个AJAX应用程序

为了理解 AJAX 的工作原理，我们将创建一个小型的 AJAX 应用程序。

首先，我们需要一个带有两个文本框的 HTML 表单：用户名和时间。用户名文本框由用户填写，而时间文本框使用 AJAX 进行填写。

此HTML 文件名为 "testAjax.htm"（请注意这个 HTML 表单没有提交按钮！）：

<html>

<body>

用户:<input type="text" name="username"/>

时间:<input type="text" name="time"/>

</form>

</body>

</html>

表 11.1

AJAX 的要点是 XMLHttpRequest 对象。不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。IE 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。

如需针对不同的浏览器来创建此对象，我们要使用一条 "try and catch" 语句。您可以在我们的 JavaScript 教程中阅读更多有关 try 和 catch 语句的内容。

让我们用这段创建 XMLHttpRequest 对象的 JavaScript 来更新一下我们的 "exam.htm" 文件：

<html>

<body>

function ajaxFunction() {

//首先声明一个保存 XMLHttpRequest 对象的 xmlHttp 变量

var xmlHttp;

try {

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

} catch (e) {

// Internet Explorer

try {

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

} catch (e) {

try {

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

} catch (e) {

alert("您的浏览器不支持AJAX！");

return false;

}

/** 然后使用 XMLHttp=new XMLHttpRequest() 来创建此对象。

这条语句针对 Firefox、Opera 以及 Safari 浏览器。假如失败，则尝试针对 Internet Explorer 6.0+ 的 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")，假如也不成功，则尝试针对 Internet Explorer 5.5+ 的 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")。

假如这三种方法都不起作用，那么这个用户所使用的浏览器已经太过时了，他或她会看到一个声明此浏览器不支持 AJAX 的提示。**/

}

</script>

用户:<input type="text" name="username"/>

时间:<input type="text" name="time"/>

</form>

</body>

</html>

表 11.2

注意：上面这些浏览器定制的代码很长，也很复杂。不过，每当您希望创建 XMLHttpRequest 对象时，这些代码就能派上用场，因此您可以在任何需要使用的时间拷贝粘贴这些代码。上面这些代码兼容所有的主流浏览器：Internet Explorer、Opera、Firefox 以及 Safari。

11.2.3 更多有关 XMLHttpRequest 对象的知识

在向服务器发送数据之前，我们有必要解释一下 XMLHttpRequest 对象的三个重要的属性。

1. onreadystatechange 属性

onreadystatechange 属性存有处理服务器响应的函数。下面的代码定义一个空的函数，可同时对 onreadystatechange 属性进行设置：

xmlHttp.onreadystatechange=function(){ // 我们需要在这里写一些代码 }

表 11.3

2. readyState 属性

readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。

这是 readyState 属性可能的值：

状态	描述
0	请求未初始化（在调用 open() 之前）
1	请求已提出（调用 send() 之前）
2	请求已发送（这里通常可以从响应得到内容头部）
3	请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4	请求已完成（可以访问服务器响应并使用它）

表 11.4

我们要向这个 onreadystatechange 函数添加一条 If 语句，来测试我们的响应是否已完成（意味着可获得数据）：

xmlHttp.onreadystatechange=function() {

if(xmlHttp.readyState==4){

//从服务器的response获得数据 }

}

表 11.5

3. responseText 属性

可以通过 responseText 属性来取回由服务器返回的数据。

在我们的代码中，我们将把时间文本框的值设置为等于 responseText：

xmlHttp.onreadystatechange=function() {

if(xmlHttp.readyState==4) {

document.myForm.time.value=xmlHttp.responseText;

}

表 11.6

下一节，我们会介绍如何向服务器请求数据。

11.2.4 向服务器发送一个请求

要想把请求发送到服务器，我们就需要使用 open() 方法和 send() 方法。

open() 方法需要三个参数。第一个参数定义发送请求所使用的方法（GET 还是 POST）。第二个参数规定服务器端脚本的 URL。第三个方法规定应当对请求进行异步地处理。

send() 方法可将请求送往服务器。如果我们假设 HTML 文件和 JSP 文件位于相同的目录，那么代码是这样的：

xmlHttp.open("GET","time.jsp",true);

xmlHttp.send(null);

表 11.7

现在，我们必须决定何时执行 AJAX 函数。当用户在用户名文本框中键入某些内容时，我们会令函数“在幕后”执行。

<html>

<body>

function ajaxFunction() {

var xmlHttp;

try {

// 检查浏览器是否是Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

} catch (e) {

// 检查浏览器是否是Internet Explorer

try {

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

} catch (e){

try {

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

} catch (e) {

alert("您的浏览器不支持AJAX！");

return false;

}

xmlHttp.onreadystatechange=function() {

if(xmlHttp.readyState==4) {

document.myForm.time.value=xmlHttp.responseText;

}

xmlHttp.open("GET","time.jsp",true);

xmlHttp.send(null);

}

</script>

用户:<input type="text" name="username" onkeyup="ajaxFunction();"/>

时间:<input type="text" name="time"/>

</form>

</body>

</html>

例 11.1

下一节介绍 "time.jsp" 的程序，这样我们完整的 AJAX 应用程序就搞定了。

11.2.5 服务器端的脚本

现在，我们要创建可显示当前服务器时间的脚本。

responseText 属性会存储从服务器返回的数据。在这里，我们希望传回当前的时间。这是 "exam.jsp" 的代码：

<%@page import="java.text.SimpleDateFormat"%>

<%@ page contentType="text/html; charset=gb2312" %>

<%@ page import="java.util.Date" %>

Date d_Date = new Date();

SimpleDateFormat dateFormat = new SimpleDateFormat();

response.getWriter().write(dateFormat.format(d_Date));

例 11.1

运行AJAX 应用程序, 请在下面的文本框中键入一些文本，然后单击时间文本框。时间文本框可在不加载页面的情况下从 "exam.jsp" 获得服务器的时间。

图 11.2

11.3 高级应用

11.3.1 表单提示

在下面的 AJAX 例子中，我们会演示当用户向一个标准的 HTML 表单中输入数据时网页如何与 web 服务器进行通信。

图 11.3

这是一个简单的带有名为 text 输入域的jsp文件。点击表单的按钮会触发一个sendReq()函数。表单下面的段落包含了一个id为 "rst" 的 td，这个 td 充当了由 web 服务器所取回的数据的位置占位符。

当用户输入数据后，点击右边按钮时，名为 "sendReq()" 的函数就会被执行。

Jsp文件的代码：

<%@ page contentType="text/html; charset=UTF-8" %>

<html>

<head>

function sendReq() {

if (window.ActiveXObject) {

try {

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

} catch (e) {

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

}

if (!http_request) {

window.alert("xmlhttp not supported!");

return false;

}

http_request.onreadystatechange = processReq;

http_request.open("GET", "/ajax/user.action?uname=" + document.forms[0].uname.value, true);

http_request.send(null);

}

function processReq() {

if (http_request.readyState == 4) {

if (http_request.status == 200) {

var doc = http_request.responseXml;

document.getElementById("username").innerHTML = doc.getElementsByTagName("uname")[0].firstChild.nodeValue;

document.getElementById("usersex").innerHTML = doc.getElementsByTagName("sex")[0].firstChild.nodeValue;

} else {

alert("error status:" + http_request.status);

}

</script>

</head>

<body>

<h2>根据用户名检索详细信息</h2>

<table>

</table>

</form>

</body>

</html>

例 11.2

在上面的例子中，servlet是一个简单的名为 "XMLServlet.java" 的 servlet 文件。

下面我们列出了这个服务器页面代码的实例，使用servlet 来编写。

package com.etc.servlet;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpSession;

import org.dom4j.Document;

import org.dom4j.DocumentHelper;

import org.dom4j.Element;

public class XMLServlet extends HttpServlet {

@Override

protected void doGet(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {

//获取页面提交的参数：用户名

String user = request.getParameter("uname");

System.out.println(user);

if (user != null) {

response.setContentType("application/xml;charset=UTF-8");

//利用Dom4j创建XML Document对象

Document xml = createXMLFile();

String sxml = xml.asXML();

System.out.println(sxml);

response.getWriter().write(sxml);

}

/**创建XML Document对象

**@return Document

**/

public Document createXMLFile() {

Document document = DocumentHelper.createDocument();

Element userElement = document.addElement("user");

Element unameElement = userElement.addElement("uname");

unameElement.setText("张三");

Element sex = userElement.addElement("sex");

sex.setText("1");

return document;

}

@Override

protected void doPost(HttpServletRequest arg0, HttpServletResponse arg1)

throws ServletException, IOException {

doGet(arg0, arg1);

}

例 11.2

该servlet在接受到客户端传来的姓名输入后，生成一个XML文档，并将该XML文档返回给客户端。

图 11.4

11.4 总结

AJAX通过 JavaScript 的 XMLHttpRequest 对象，直接与服务器来通信, 获取/传输数据。
不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。IE 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象

15 AJAX的更多相关文章

django 笔记15 ajax系列
参考 http://www.cnblogs.com/wupeiqi/articles/5703697.html # 原生操作# jQuery操作# 伪Ajax操作# XMLHttpReques 伪aj ...
JavaScript 15 Ajax异步登陆
/** * Created by KING on 2017/11/28. */ var g_xhr_ui;var g_xhr_login;var g_id; $(document).ready(fun ...
Struts2-学习笔记系列(15)-ajax支持和JSON
7.1stream类型的result 使用stream就无需jsp页面,直接在action想浏览者生成指定的响应 @Override public java.lang.String execute() ...
IE9下Ajax缓存问题
使用jQuery的getJSON从后台定时获取数据并刷新界面,使用以下方法时,在Chrome,Firefox下没问题,但在IE9下却无法刷新数据 $.getJSON(webApp + "/G ...
ajax调用webservice 跨域问题
用js或者jquery跨域调用接口时对方的接口需要做jsonp处理,你的ajax jsonp调用才可以 egg 接口中已经做了jsonp处理,所以可以跨域调用 //$.ajax({ // url: ...
ajax异步请求/同源策略/跨域传值
基本概念 Ajax 全称是异步的 JavaScript 和 XML . 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进 ...
用户唯一性验证（ajax）
验证用户添加或者修改时用户名的唯一性: 验证时机:用户名改变时,表单提交时. 1.jsp页面:(前端) <%@ page contentType="text/html;charset= ...
C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口字符串的本质 AJAX原生JavaScript写法
C#构造方法(函数) 一.概括 1.通常创建一个对象的方法如图: 通过 Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...
IE9 下的ajax缓存问题的处理
使用jQuery的getJSON从后台定时获取数据并刷新界面,使用以下方法时,在Chrome,Firefox下没问题,但在IE9下却无法刷新数据 1 2 3 4 5 $.getJSON(webAp ...

随机推荐

install Django in mac
install Eclipse & Python(pydev) in mac install django in mac $ curl -O https://pypi.python.org/p ...
【hdu3966】Aragorn's Story
题意:给一棵树,并给定各个点权的值,然后有3种操作:I C1 C2 K: 把C1与C2的路径上的所有点权值加上KD C1 C2 K:把C1与C2的路径上的所有点权值减去KQ C:查询节点编号为C的权值 ...
sa分析
onCheckedChanged用于监控开启和关闭,其实是Switch,也是Toggle Buttons http://www.google.com/design/spec/components/sw ...
APDU报文【转】
本文转载自:http://www.cnbolgs.com/snail0404/p/5436348.html APDU # APDU # 定义:APDU(ApplicationProtocolDat ...
Analyzing with SonarScanner for MSBuild
https://docs.sonarqube.org/display/SCAN/Analyzing+with+SonarQube+Scanner+for+MSBuild Features The So ...
IDEA hadoop MapReduce 环境配置
1.下载,安装,配置好Hadoop 2.在IDEA中执行MapReduc 配置: 这里将JAR包加入: JAR包是:/usr/local2/hadoop/share/hadoop 目录下:直接右边+以 ...
P3043 [USACO12JAN]牛联盟Bovine Alliance(并查集)
P3043 [USACO12JAN]牛联盟Bovine Alliance 题目描述 Bessie and her bovine pals from nearby farms have finally ...
python re的使用
re 正则表达式操作本模块提供了类似于Perl的正则表达式匹配操作.要匹配的模式和字符串可以是Unicode字符串以及8位字符串. 正则表达式使用反斜杠字符('\')来表示特殊的形式或者来允许使用 ...
GitHub安装使用教程
由于重复率比较大,为了尊重他人的成果,先在此注明本文是在学习了以下博文之后的一些总结归纳,并且说明了一些本人实际使用GitHub遇到的问题,并给出了解决办法 .本人的操作系统是window10,所 ...
二分图最大匹配(匈牙利算法) POJ 3041 Asteroids
题目传送门 /* 题意:每次能消灭一行或一列的障碍物,要求最少的次数. 匈牙利算法:把行和列看做两个集合,当有障碍物连接时连一条边,问题转换为最小点覆盖数==二分图最大匹配数趣味入门:http:// ...

15 AJAX

AJAX

AJAX

简介

11.2 基本原理和技术

11.2.1 AJAX 使用 Http 请求

11.2.2 第一个AJAX应用程序

11.2.3 更多有关 XMLHttpRequest 对象的知识

11.2.4 向服务器发送一个请求

11.2.5 服务器端的脚本

11.3 高级应用

11.3.1 表单提示

11.4 总结

15 AJAX的更多相关文章

随机推荐

热门专题