Ajax与jQuery的介绍和简单使用（一）

认识Ajax

互联网的发展，基于B/S架构的Web应用程序越来越受推崇。但是b/s的架构的应用在界面效果及操控的方面比C/S的应用程序差很多，这也是Web应用程序普通存在一个问题。
Ajax就是为了弥补频发刷新界面导致浏览器一片空白的不足而诞生的。Ajax应用使用JavaScript异步发送请求，不用每次请求都重新加载页面，发送请求时可以继续其他的操作，在服务期响应完成后，再使用JavaScript将响应展示给用户。
使用Ajax技术，从用户发送请求到获得响应，当前用户界面在整个过程中不会受到干扰。而且我们可以在必要的时候只更新页面的一小部分，而不用刷新整个页面，即“无刷新”技术。这样就避免了重复加载。

问题：传统的Web开发技术和Ajax技术有什么区别？
解答：无论使用哪种技术开发，流程都是先由客户端发送HTTP请求，然后由服务器对请求生成响应。但传统的web开发技术和Ajax技术之间还是有不同很多差异的。
差异1：发送请求方式不同
传统的web程序通过浏览器发送请求，而ajax技术则是通过JavaScript的XMLHTTPRequest对象。
差异2：服务器响应不同
针对传统Web应用，服务器的响应是一个完整的页面，而采用Ajax技术后，服务器的响应只是需要的数据。
差异3：客户端处理的响应方式不同
传统的Web应用发送请求后，浏览器将等待服务器响应完成后重新加载整个页面。而采用Ajax技术后，浏览器不再空闲等待请求的响应，而只是通过JavaScript动态更新页面中需要更新的部分。

Ajax简介

Ajax技术可以通过JavaScript发送请求到服务器，在服务器响应结束后，可以根据返回的结果只更新局部的页面，提供连续的客户体验，那么什么是ajax呢？
Ajax（Asynchronous javaScript and XML）并不是一种全新的技术，而是有JavaScript.XML.CSS等几种现有技术整合而成的。Ajax的执行流程是，用户界面触发时间调用JavaScript，通过Ajax引擎–XMLHTTPRequest对象异步发送请求到服务器，服务器返回XML，JSON，或HTML等格式的数据，然后利用返回的数据使用DOM和CSS技术局部更新用户界面。图如下。

javaScript语言：Ajax技术的主要开发语言。
XML/JSON/HTML等：用来封装请求或响应的数据格式。
DOM(文档对象模型)：通过DOM属性或方法修改页面元素，实现局部刷新。
CSS:改变样式，美化页面效果，提升用户体验度。
Ajax引擎：即XMLHTTPRequest对象，以异步方式在客户端与服务器之间传递数据。
Ajax大多数的技术之前都已经使用过了，没接触过的只有XMLHTTPRequest和JSON格式。下面我们先来认识XMLHTTPRequest及其常用方法和属性。

XMLHttpRequest

XMLHttpRequest对象可以在不刷新当前页面的情况下向服务器端发送异步请求，并接收服务器端的响应结果，从而实现局部更新当前页面的功能。尽管名为XMLHttpRequest，但它并不限于和XML文档一起使用，它还可以接受JSON和HTML等格式的文档的数据。XMLHttpRequest得到了目前所有浏览器的比较好支持，但它的创建方式在不同浏览器下还具有一定的差别。

1.创建XMLHttpRequest对象

在老版本IE浏览器（IE5和IE6）中创建XMLHttpRequest对象的方式比较新的版本的IE（IE7）以上及其它大部分浏览器中创建方式是不同的。为了更好的兼容，就需要了解他们语法的 区别。

语法： 老版本：

XMLHttpRequest =new ActiveXObject("Microsoft.XMLHTTP");

新版本

XMLHttpRequest=new XMLHttpRequest();

2.XMLHttpRequest对象常用属性和方法

对于Ajax技术而言，主要就是XMLHttpRequest的使用。XMLHttpRequest的常用的方法和属性如下。
XMLHttpRequest 常用的方法

方法名称	说明
open(String method,String url,boolean async,String user,String password)	创建一个新的HTTP请求 参数method：设置HTTP请求方法，如POST GET等 ，对大小写不敏感 参数URL：请求URL地址 参数async：可选，指定请求是否为异步方法，默认为true 参数user：可选，如果服务器需要验证，此处需要指定用户名；否则，会弹出验证窗口 参数password：可选，验证信息中的密码，如果用户名为空，此值将被忽略
send(String data)	发送请求到服务器端 参数data：字符串，通过此请求发送的数据。此参数值取决于Open方法中的method参数。如果method值为“POST”，可以指定该参数。如果method值为“GET”，该参数为null
abort()	取消当前请求
setRequestHeader(String header,String value)	单独设置请求的某个HTTP头信息 参数header：要指定的HTTP头名称，参数value：要指定的HTT头名称所对应的值
getResponseHeader(String header)	从相应中获取指定的HTTP头信息 参数header：要获取的指定HTTP头
getAllResponseHeader（）	获得响应的所有HTTP头信息

XMLHttpRequest常用属性

属性名称	说明
onreadystatechage	设置回调函数
readyState	返回请求的当前状态 常用值：0-未初始化 1-开始发送请求 2-请求发送完成 3-开始读取响应 4-读取响应结束
status	返回当前请求的HTTP状态码 常用值：200-正确返回 404-找不到访问对象
statusText	返回当前请求的响应行状态
responseText	以文本形式获取响应值
responseXML	以XML形式获取响应值，并解析成DOM对象返回

提示： 由于XMLHttpRequest的常用属性和方法内容比较多，记住常用的属性和方法即可，其他的参数可在需要时查阅相关资料。
下面介绍如何使用。
实现Ajax的过程分为发送请求和处理响应两个步骤，发送请求可以分为两种方式即GET方式和POST方式；处理响应也分两种方式，即处理文本响应和处理XML响应，这里以处理文本响应为例进行。

使用Ajax发送Get请求即处理响应

使用Ajax技术实现下列功能。
在用户名验证页面，当用户名文本框焦点时，发送请求到服务器，判断用户名是否存在。如果已经存在则提示“用户名已被使用”。在完成这个功能中页面不会刷新。

代码—

//1.创建xmlHttpRequest对象
if(window.XMLHttpRequest){//返回值为true时说明是新版本或者其他浏览器
	xmlHttpRequest=new XMLHttpRequest();
}else{//返回false则表示是老版本的ie
	XMLHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.设置回调函数
xmlHttpRequest.onreadystatechange=callBack;
//3.初始化xmlHttpRequest组件
var url="userServlet?name="+name;//服务器端URL地址，name为用户名文本框获取的值
//4.发送请求
xmlHttpRequest.send(null);
//回调函数callBack()中处理服务器响应的关键代码
function callBack(){
	if(xmlHttpRequest.readyState==4 $$ xmlHttpRequest.status == 200){
		var data=xmlHttpRequest.responseText;
		if(data == 'true'){
			$("#nameid").html("用户名已经被使用！");//nameid为显示的消息
		}else{
			$("#nameid").html("用户名可以使用！");/
		}
	}
}

在Servlet中·的代码如下：

doGet(HttpServletRequest request,HttpServletResponse response)throws Exception{
	String name=request.getParameter("name");
	boolean used =false;
	if("ajax".equals(name)){
		used=true;
	}else{
		used=false;
	}
	response.setContentType("text/html;charset=UTF-8");
	PrintWriter out = response.getWriter();
	out.print(used);
	out.flush();
	out.close();
}

在上面的示例中就是基本步骤。

使用Ajax 发送POST请求及处理响应

刚才实现了GET方式发送请求及处理文本方式响应，接下来我们来看一下POST方式的实现。实际上POST方式的实现跟GET方式类似，基本步骤相同，关键代码如下。

//1.创建xmlHttpRequest对象
if(window.XMLHttpRequest){//返回值为true时说明是新版本或者其他浏览器
	xmlHttpRequest=new XMLHttpRequest();
}else{//返回false则表示是老版本的ie
	XMLHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.设置回调函数
xmlHttpRequest.onreadystatechange=callBack;
//3.初始XMLHttpRequest对象
var url="userServlet";//服务器端URL地址
xmlHttpRequest.open("POST",url,true);
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.发送请求
var data ="name"+name;//需要发送的数据信息，name为用户名文本框取得值
xmlHttpRequest.send(data);

function callBack(){
	if(xmlHttpRequest.readyState==4 $$ xmlHttpRequest.status == 200){
		var data=xmlHttpRequest.responseText;
			//省略将服务器返回的文本数据显示到页面的代码
		}
	}

对比使用Ajax发送GET请求与发送POSt请求的关键代码，可以发现它们的不同之处主要在下面。

发送方式	步骤三：初始化XMLHTTPRequest对象	步骤四
GET	指定XMLHttpRequest 对象的open()方法中的method参数为“GET”	指定XMLHttpRequest 对象的send()方法中的data参数为‘null’
POST	（1）指定XMLHTTPRequest对象的open（）方法中method参数为“POST” （2）指定XMLHTTPRequest对象要请求的HTTP头信息，该HTTP请求头信息为固定写法	可以指定XMLHttpRequest对象的send()方法中的data参数的值，即该请求需要携带的具体数据。多个名/值对使用&连接

需要注意的是，采用GET方式发送请求时，通常会将需要携带的参数附加在URL路径后面一起发送，XMLHTTPRequest.send()方法不能传递参数，data参数设置为null即可；而采用POST方式发送请求时，则可以在XMLHTTPRequest.send()方法中指定传递的参数。