深入理解Ajax及其在网页开发中的应用-优快云博客

本文链接：https://blog.youkuaiyun.com/linjinhuo/article/details/42612843

一、什么是Ajax

百度了一下什么是ajax 大致是这么说的。

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

ajax的作用：通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

Ajax 的核心是 JavaScript 对象 XmlHttpRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest 使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。

Ajax浏览器支持:

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

Ajax原理

二、Ajax使用

XmlHttp属性:

onreadystatechange	指定当readyState属性改变时事件处理句柄.
readyState	返回当前请求的状态
responseText	存储从服务器返回的数据。
responseXML	将响应信息格式化为XML document对象并返回
status	返回当前请求的http状态码

readyState 属性可能的值

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

XmlHttp方法

abort	取消当前请求
open	创建一个新的http请求，并指定此请求的方法、URL、以及验证信息
send	发送请求到HTTP服务器并接收响应
setRequestHeader	单独指定请求的某个http头（post方式时使用）

三、Ajax示例

写了例子来演示ajax，用Tomcat6.0作为服务器，Servlet作为业务控制器。该例子模拟注册时输入的用户名验证提示功能。

1.注册页面 reg.jsp

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




   
   
Insert title here
<script type="text/javascript">
	function checkuser() {
		//1. 首先声明一个保存 XMLHttpRequest 对象的 xmlHttp 变量。
		var xmlhttp = null;
		var name = document.getElementById("username");
		var username = name.value
		if (username) {
			if (window.XMLHttpRequest) {
				// 其他浏览器 xmlhttp实现方法  Firefox, Opera, IE7,等等
				xmlhttp = new XMLHttpRequest();
			} else if (window.ActiveXObject) {
				//基于IE浏览器的
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}

			if (xmlhttp != null) {
				// 2.创建一个请求
				var method = "GET";
				// 为了解决get请求方式的中文乱码问题 进行编码 并且tomcat配置才能自动解码
				//username = encodeURI(username);

				// 请求路径  为了防止ajax”假死"（连续发送相同的请求 ) 在请求路径后面加上随机数 
				var url = "ControllerTest?username=" + username + "&num="
						+ Math.random();
				xmlhttp.open(method, url);
				// 3.绑定事件处理函数 
				xmlhttp.onreadystatechange = function() {
					// 测试响应是否已完成  处理readystate状态改变
					if (xmlhttp.readyState == 4) {

						if (xmlhttp.status == 200) {
							var text = xmlhttp.responseText;
							document.getElementById("tip").innerHTML = text;
						} else {
							document.getElementById("tip").innerHTML = "服务器异常请联系管理员";
						}
					} else {
						// 网络延迟处理 （服务端可以设置断点模拟）
						document.getElementById("tip").innerHTML = "正在验证该用户名是否重复";
					}

				}
				// 4.发送请求
				xmlhttp.send(null);

			} else {
				alert("你的浏览器不支持 XMLHTTP!");
			}
		} else {
			return;
		}

	}
</script>



	
   
   
		
    
    用户名：  
密码： 
确认密码： 
邮箱：

2.后台业务控制器ControllerTest.java

package com.test;

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;

/**
 * 模拟业务控制器
 * @author Administrator
 *
 */
public class ControllerTest extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		// request.setCharacterEncoding("UTF-8"); 对get提交方式无效
		String username = request.getParameter("username");
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/html; charset=UTF-8");
		PrintWriter out = response.getWriter();
		if ("smith".equals(username)) {
			out.print("用户名已经存在！");
		} else {
			out.print("用户名" + username + "可以使用！");
		}

	}

	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {

	}

}

3.配置文件 web.xml


     
     

     
     
  
      
      
       
       Ajax
      
      
  
      
      
    
       
       
        
        reg.jsp
       
       
    
       
       
        
        index.htm
       
       
    
       
       
        
        index.jsp
       
       
    
       
       
        
        default.html
       
       
    
       
       
        
        default.htm
       
       
    
       
       
        
        default.jsp
       
       
  
      
      
  
      
      
    
       
       
    
       
       
        
        ControllerTest
       
       
    
       
       
        
        ControllerTest
       
       
    
       
       
        
        com.test.ControllerTest
       
       
  
      
      
  
      
      
    
       
       
        
        ControllerTest
       
       
    
       
       
        
        /ControllerTest

运行结果截图