初遇ajax（对高速了解ajax有帮助）
日期：2014-05-16 浏览次数：20763 次
初遇ajax（对快速了解ajax有帮助）
今天第一次接触Ajax，在没有接触Ajax之前感觉Ajax是个特别神秘且难学的大框架，可是一接触才知道，Ajax也不过如此嘛，对于我这么一个做后台的程序员来说，不需要往深研究Ajax，只需知道他的大致轮廓就可以了，Ajax的核心类是XMLHttpRequest。因为Ajax是客户端技术，所以不同客户端的浏览器对Ajax有不同的实现，下面我就分别对IE内核的浏览器和firefox内核的浏览器实现做一个比较，他们的区别不是很大，只是在创建XMLHttpRequest对象时，有小许的不同。在写代码之前，我有必要介绍一下，Ajax并不是一门语言，而是一门技术，他是在JavaScript语言支持的基础上写的Script。
下面我以一个小例子来说明一下Ajax的大致工作流程：
解释：当我输入完邮编后，焦点离开该文本框后，省份和城市将直接显示在下面的文本框中。
index.jsp文件内容如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script>
//向服务器端发送请求，并且解析接收到响应报文（Ajax）
/*1.获取并创建XMLHttpRequest*/
//声明XMLHttpRequest
var xhr;
function getZip(){
//创建XMLHttpRequest对象
//IE内核的浏览器（Mathon、IE）
if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//其他内核的浏览器(Firefox、NetScape)
else if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}
else{
alert("该浏览器不支持Ajax");
}
/*2.确定请求报文的基本内容（提交请求的方式、URI）*/
//请求报文提交请求的方式
var method = "GET";
//要访问的web资源的uri
var zipcode = document.getElementById("zipCode").value;
var uri = "zipServlet?zipcode="+zipcode;
//确认通信的方式
//type：表示客户端与服务器端的通信方式，true为异步方式，false为同步方式，默认为异步方式
var type = true;
/*3.与要请求的web资源所在的服务器建立连接*/
xhr.open(method,uri,type);
/*4.设置回调函数，监听通信过程*/
xhr.onreadystatechange = callback;
/*5.向服务器端发送请求*/
//提交请求的方式为GET,或者提交请求的方式为Post但不需要传递参数
xhr.send(null);
}
//回调函数，写处理响应的代码
function callback(){
//alert(xhr.readyState);
//判断是否获取到了完整响应报文
if(xhr.readyState==4){
//判断响应状态码，查看请求是否成功
if(xhr.status==200){
//获取响应报文中的内容
var message = xhr.responseText;//辽宁@沈阳
//拆分字符串
var info = message.split("@");//{辽宁，沈阳}
//将内容填充到文本框
document.getElementById("city").value = info[0];
document.getElementById("province").value = info[1];
}
}
}
</script>
</head>
<body>
<center>
输入地区数据<br/>
邮编：<input type="text" id="zipCode" onblur="getZip()"/><br/>
省份：<input type="text" id="province"/><br/>
城市：<input type="text" id="city"/><br/>
</center>
</body>
</html>
?web.xml文件内容如下：
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<servlet-na
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
