Ajax要点总结和编程示例

1、ajax是什么?

    (asynchronous javascript and xml 异步的javascript和xml)
        ajax是一种用来改善用户体验的技术,其实质是利用浏览器提供的一个特殊的对象(XMLHttpRequest对象,一般称之为ajax对象)异步地(当ajax对象向服务器发请求时,浏览器不会销毁当前页面,用户仍然可以对当前页面做其它的操作)向服务器发送请求。服务器返回的数据不再是一个完整的新的页面,而是部分数据,利用这些数据,更新当前页面。整个过程,页面无刷新,不打断用户的操作。

2、如何获得ajax对象?

        XMLHttpRequest没有标准化,要区分浏览器。
function getXhr(){
            var xhr = null;
            if(window.XMLHttpRequest){
                //非ie浏览器
                xhr = new XMLHttpRequest();
            }else{
                //ie浏览器
                xhr = new ActiveXObject('MicroSoft.XMLHttp');
            }
            return xhr;
        }

3、ajax对象的重要的属性

    1)onreadystatechange:绑订事件处理函数,当ajax对象的readyState值发生了改变,就会产生readystatechange事件。
    2)responseText:获得服务器返回的文本。
    3)responseXML:获得服务器返回的xml文档。
    4)status:状态码
    5)readyState:有5个值,分别是0,1,2,3,4,表示ajax对象与服务器通信的状态。比如,当值为4时,表示ajax对象获得了服务器返回的所有的数据。

4、编程步骤

    step1,获得ajax对象。
    比如:
            var xhr = getXhr();
    step2,使用ajax对象发请求。
        1)发送get请求
            xhr.open('get','check_username.do?username=tom',true);
            xhr.onreadystatechange=f1;
            xhr.send(null);
        2)发送post请求
            xhr.open('post','check_username.do',true);
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
            xhr.onreadystatechange=f1;
            xhr.send('username=tom');
        注意:
                因为按照http协议要求,发送post请求必须添加一个content_type消息头。ajax对象默认不会添加这个消息,所需要调用setRequestHeader方法的添加一个"content-type"消息头。
                true:发送异步请求(ajax对象发请求时,浏览器不会销毁当前页面,用户仍然可以做其它操作)。
                false:发送同步请求(ajax对象发请求时,浏览器不会销毁当前页面,浏览器会锁定当前页面,用户不能操作当前页面)。
    step3,编写服务器端的处理代码,一般不再需要返回一个完整的页面,只需要返回部分数据。
    step4,编写事件处理函数
                function f1(){
                    if(xhr.readyState == 4){
                        var txt = xhr.responseText;
                        更新当前页面
                    }
                }   

5、实例(分别使用get请求和post请求方式,验证用户名是否存在)

项目结构图:


准备工作(使用prototype.js和自定义的my.js)

prototype.js:在对常用的JavaScript语句进行封装的框架,可简化代码。在这里下载。

my.js:用户获取ajax对象,通用性代码提取到一个js文件中

/*获得ajax对象*/
function getXhr() {
	var xhr = null;
	if (window.XMLHttpRequest) {
		// 非ie浏览器
		xhr = new XMLHttpRequest();
	} else {
		// ie浏览器
		xhr = new ActiveXObject('MicroSoft.XMLHttp');
	}
	return xhr;
}
register.jsp:

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.tips {
	color: red;
}
</style>
<script type="text/javascript" src="js/my.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript">
	function check_username() {
		//1、获得ajax对象
		var xhr = getXhr();
		//2、发请求
		var url = 'check_username.do?username=' + $F('username');
		xhr.open('get', encodeURI(url), true);
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4) {
				if (xhr.status == 200) {//服务器正常处理了请求
					//必须要等到ajax对象获取到了服务器返回的所有数据时才执行
					var txt = xhr.responseText;
					//alert(txt);
					//利用服务器返回的数据更新当前页面
					$('username_msg').innerHTML = txt;
				} else {
					$('username_msg').innerHTML = '验证出错..';
				}
			}
		};
		$('username_msg').innerHTML = "正在检查...";
		xhr.send(null);
	}

	function check_username_post() {
		//1、获得ajax对象
		var xhr = getXhr();
		//2、发请求
		xhr.open('post', 'check_username.do', true);
		xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4) {
				var txt = xhr.responseText;
				$('username_msg').innerHTML = txt;
			}
		};
		xhr.send('username=' + $F('username'));
	}
</script>
</head>
<body>
	<form action="regist.do" method="post">
		<fieldset>
			<legend>注册</legend>
			用户名:<input id="username" name="username" οnblur="check_username_post();" /><span
				class="tips" id="username_msg"></span><br /> 
			真实姓名:<input name="name" /><br /> 
			<input type="submit" value="提交">
		</fieldset>
	</form>
</body>
</html>
ActionServlet.java:处理类

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ActionServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private PrintWriter out;

	protected void service(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		response.setCharacterEncoding("utf-8");
		out = response.getWriter();
		String uri = request.getRequestURI();
		String action = uri.substring(uri.lastIndexOf("/"),
				uri.lastIndexOf("."));
		if ("/check_username".equals(action)) {
			String username = request.getParameter("username");
			// 省略数据库查找并对比逻辑
			if (username.equals("zs")) {
				out.println("用户名已存在");
			} else {
				out.println("用户名可用");
			}
		}
		out.close();
	}
}
web.xml中配置:

<servlet>
	<servlet-name>ActionServlet</servlet-name>
	<servlet-class>web.ActionServlet</servlet-class>
</servlet>
<servlet-mapping>
	<servlet-name>ActionServlet</servlet-name>
	<url-pattern>*.do</url-pattern>
</servlet-mapping>
发布并访问http://localhost:8080/AjaxTest/register.jsp,运行效果如下:(用户名输入zs失去焦点后弹出“用户名已存在”,输入其他内容失去焦点后显示“用户名可用”)


6、编码问题

    1)发送get请求
        ie浏览器提供的ajax对象会对中文按照gbk进行编码,其它浏览器会对中文按照utf-8进行编码。容器(比如tomcat)默认情况下会使用iso-8859-1去解码。
        解决方式:
            step1,让容器按照指定的字符集去解码。修改tomcat的配置文件(conf/server.xml)
                <Connector  URIEncoding="utf-8">
            以上配置的作用是,容器对所有的get请求中的参数使用utf-8进行编码。(仅对get请求有效
            step2,使用encodeURI函数对中文进行编码。
    2)发送post请求
        所有浏览器内置的ajax对象都会使用utf-8进行编码。容器(比如tomcat)默认情况下会使用iso-8859-1去解码。
        解决方式:
            request.setCharacterEncoding("utf-8");

7、ajax编程中遇到的问题

    1)缓存问题
        当使用IE浏览器时,ajax对象会检查请求地址,如果地址没有变化,不会向服务器发请求。
    解决方式:
        在请求地址后面加一个随机数,比如:
        xhr.open('get','getNumber.do?'+Math.random(),true);

        或者,也可以改为用post方式发请求。
    2)当服务器进行一个比较耗时的操作,可以在 send方法执行前添加一个提示:
        比如:
            $('spanId').innerHTML = '正在验证...';
    3)当服务器执行时,出现了异常。
        可以通过读取状态码来获知服务器是否出现了异常。
        比如:
                if(xhr.status == 200){
                    正确
                }else{
                    错误处理...
                }

    4)同步请求(扩展)
        a.什么是同步请求?
        当ajax对象再向服务器发送请求时,浏览器会锁定当前页面,用户不能对当前页面做其他操作,必须等服务器的响应发送回来,浏览器才会向下继续执行。
        b.如何发送同步请求?
        xhr.open('get/post','...do',false);

8、ajax的优点

    (1)不打断用户的操作,页面无刷新。
    (2)按照需要获取数据,浏览器与服务器之间数据传输量大大减少,性能会提高。
    (3)是一种标准化的技术,不需要浏览器下载任何的插件(比如,Flex需要下载插件)。       

       

本文中描述的完整项目代码:

http://download.csdn.net/detail/daijin888888/9704211


转载请注明出处:

http://blog.csdn.net/daijin888888/article/details/51208570#t4

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值