Ajax要点总结和编程示例

前端之家收集整理的这篇文章主要介绍了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',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" onblur="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://www.jb51.cc/article/p-udssymrb-cb.html

原文链接:https://www.f2er.com/ajax/162263.html

猜你在找的Ajax相关文章