Ajax要点总结和编程示例

发布时间：2020-12-16 01:40:29 所属栏目：百科来源：网络整理

导读：1、ajax是什么? (asynchronous javascript and xml 异步的javascript和xml) ajax是一种用来改善用户体验的技术，其实质是利用浏览器提供的一个特殊的对象(XMLHttpRequest对象，一般称之为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.52php.cn/article/p-udssymrb-cb.html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!