Ajax 基本用法

ajax

1.是什么？

       AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术 ， 它并不是一种新的技术
 ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。

• 使用CSS和XHTML来表示。
• 使用DOM模型来交互和动态显示。
• 使用XMLHttpRequest来和服务器进行异步通信。
• 使用javascript来绑定和调用。

在上面几中技术中，除了XmlHttpRequest对象以外，其它所有的技术都是基于web标准并且已经得到了广泛使用，XMLHttpRequest虽然目前还没有被W3C所采纳，但是它已经是一个事实的标准，因为目前几乎所有的主流浏览器都支持它。

 

2.有什么用？

        传统的网页，如果需要更新内容，必须加载整个网页。 如果只需要对网页上的某个内容进行局部刷新， 那么就需要使用到Ajax了。 它可以让我们无需重新加载全部网页内容，即可完成对某个部分的内容执行刷新 。 最典型的的例子， 莫过于大家在注册网站的时候， 输入的用户名，会自动的提示我们，该用户已被注册。

 

3.内部原理

       Ajax 并不是一项新技术。而是包装了现有的技术，然后使用他们来完成工作而已。 

那么现在给大家举个例子， 还是以咱们的判断用户名是否已被注册为例。  

     传统方式：

1.  输入用户名，
2. 点击一个按钮，校验。
3. 把数据提交给服务器
4. 服务器在后台帮助我们完成校验，并且反馈信息。
5. 我们在浏览器上提示用户，给出结果

     Ajax方式：

        ajax方式与前面的方式其实从要做的事情来说，是一样的。 ajax也没有牛到，不用去访问服务器就知道你的用户名是否已被       占用。那么它是如何工作的呢?

1.  通过JS 获取咱们的输入框文本内容 document.getElementById("username").value
2.  通过XmlHttpRequest 去执行请求。 XmlHttpRequest 其实就是 XML + http + Request 的组合。
3.  请求结束后，收到结果， 再使用 js 去完成提示。 
4. 可以在顺便配合 css 样式来增加提示效果。

 

       xmlHttp对象创建方法:

//xmlHttp对象创建方法
		function ajaxFunction(){
			   var xmlHttp;
			   try{ // Firefox, Opera 8.0+, Safari
			        xmlHttp=new XMLHttpRequest();
			    }catch (e){
				   try{// Internet Explorer
				         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
				      }catch (e){
					      try{
					         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
					      }catch (e){}
				      }
			    }
	
				return xmlHttp;
			}

请求状态监听函数：

  
			    /*readyState:
			    	     0: 请求未初始化
						1: 服务器连接已建立
						2: 请求已接收
						3: 请求处理中
						4: 请求已完成，且响应已就绪
			      status:
			    	  200: "OK"
			    	  404: 未找到页面
				*/
				//每当 readyState 改变时，就会触发 onreadystatechange 事件，类似于注册监听
	     	   request.onreadystatechange = function(){
			    
			     //请求完成，并且响应就绪，并且返回的状态码为200
	    		   if(request.readyState == 4 && request.status == 200){
	    			   alert(request.responseText);
	    		   }
	    	   }

 

 

4.简单样例：get&post 

get.jsp

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


	
	
	
	
	
	
	    
ajaxGet异步请求
	    

	    
	    
	

post.jsp

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


	
	
	
	
	
	
	    
ajaxPost异步请求
	    

	    
	    
	

AjaxGetServlet.java

package ajaxServlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class AjaxServlet
 */
public class AjaxServlet extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//编码
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=utf-8");
		
		String name = request.getParameter("name");
		String age = request.getParameter("age");
		
		//get请求解决中文乱码
		//name = new String(name.getBytes("iso-8859-1"),"utf-8");
		
		response.getWriter().write(name + ":" +age + "又回来了!");
		
		
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}