Ajax中的

AJAX : Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（实际上是又开启了一个新的请求的线程向服务器，与当前网页的线程一起执行），这就是异步，为用户带来了流畅的体验。

核心：XMLHttpRquest

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。XMLHttpRequest 用于在后台与服务器交换数据，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

需要的技术：

js：动态操作网页

css：选择和设置标签

xml，json：当从服务器返回的数据很庞大时，将封装在xml文件中。json提供对xml文件的解析技术。

创建XMLHttpRquest对象

 var xhr;
	if (window.XMLHttpRequest)
 	 {// code for IE7+,Firefox,Chrome,Opera,Safari内建了xhr对象
 	 xhr=new XMLHttpRequest();
  	 }else
 	 {// code for IE6,IE5不内建xhr对象
  	xhr=new ActiveXObject("Microsoft.XMLHTTP");
  	 }

一个ajax的例子：用户注册页面，当输入用户名后，即显示是否已存在

<%@ 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 type="text/javascript" src="js/xhr.js"></script>
  </head>
  
  <body>
    <form method="get">
    	<input type = "text" name="name" onblur="_f()" /><label></label>	
    </form>
   
  </body>
  <script>
   	 
  	 function _f(){
  	 var name = "fafas";
  	
  	 xhr.open("post","AjaxTest?"+new Date().getTime()+"&name="+name);
  	 //xhr.open("post","AjaxTest?"+new Date().getTime()+"&name=hgd");两种都行
  	 
  	xhr.onreadystatechange = d;
  	//表示一個請求從未發出到相應完成的狀態，被分為5個階段。將會觸發4次，因為默認就是0狀態，0-1 1-2 2-3 3-4 共4次。w3c還寫5次
  	//這裡實際上又開了一个线程去发送请求，另一个线程继续往下运行js代码，监听请求状态。这就是异步。
  	xhr.send(null);
  	}
  	
	function d (){
		if(xhr.readyState == 4)
		{
		  if (xhr.status == 200)
			document.getElementsByTagName("label")[0].innerHTML = xhr.responseText;
			var data = xhr.responseText;
			alert(data);
			
		}
	}
  </script> 
</html>

Ajax中的

相关文章