Ajax中的

旧城等待， 2022-07-15 12:27 143阅读 0赞

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">
    	
    	<script type="text/javascript" src="js/xhr.js"></script>
      </head>
      
      <body>
        <form method="get">
        	<input type = "text" name="name" οnblur="_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>