详谈ajax原理及使用方式

一、AJAX

1 基本了解

ajax不是一个新的技术，它是对现有几种技术的一个整合的应用。
ajax叫异步的js和xml。

2、作用

异步刷新-局部刷新
视频网站。

3、ajax实现的基本原理

• 3.1 以前使用非ajax方式时的结构
  

• 3.2 ajax方式时结构的基本原理
  ajax方式-异步请求方式实现原理：在客户端通过js对象xhr向服务器发送请求，xhr也要接收服务器发送回来的响应（响应就是一段文本）。再通过js代码操作xhr对象获得的响应文本来实现页面的局部刷新。

1. 3.3 好处：（所有操作都是在不刷新窗口的情况下完成的）
   无刷新：不刷新整个页面，只刷新局部
   无刷新的好处
   只更新部分页面，有效利用带宽
   提供连续的用户体验

2. 4 与传统方式的对比：
   

二、AJAX工作流程

三、AJAX核心对象和方法

1. XMLHttpRequest --AJAX核心对象

提供异步发送请求的能力

1. open()方法
   参数method：设置HTTP请求方法；参数url：请求的URL地址；…
   其中：method参数值大小写不敏感，常用值有get、post等；

2. send()方法
   data为发送此请求时携带的参数。data参数值取决于open方法中的method参数，
   如果method值为“POST”，需要指定该参数。如果method值为“GET”，该参数为null

3. setRequestHeader(）方法
   参数header：要指定的HTTP头名称；参数value：对应的值。

2、事件：onreadystatechange：指定回调函数

此事件中的常用属性：

1. readyState：XMLHttpRequest的状态信息
   

2. status :HTTP的状态码
   

    就绪状态是4且状态码: 是200，表示正确完成
   

3.statusText： 返回当前请求的响应状态
4. responseText： 以文本形式获得响应的内容
5. responseXML： 将XML格式的响应内容解析成 DOM对象返回

四、使用AJAX的步骤

一：使用Ajax技术实现异步交互的步骤

1. 创建XMLHttpRequest对象
2. 通过XMLHttpRequest对象设置请求信息
3. 向服务器发送请求
4. 创建回调函数，根据响应状态动态更新页面
5. 编写服务器端处理客户端请求

二 案例：实现验证用户名是否可用：

function validate() {
		var name = $("#name").val();
		if (name == null || name == "") {
			$("#nameDiv").html("用户名不能为空！");
		} else {
			//1.创建XMLHttpRequest对象
			xmlHttpRequest = createXmlHttpRequest();
			//2.设置回调函数
			xmlHttpRequest.onreadystatechange = callBack;
			//3.初始化XMLHttpRequest组件
			var url = "userServlet?name=" + name+“&time="+Math.random();//服务器端URL地址,name为用户名文本框获取的值
			xmlHttpRequest.open("GET", url, true);
			//4.发送请求
			xmlHttpRequest.send(null);
			/* 使用POST方式发送请求
			var url = "userServlet";//服务器端URL地址
			xmlHttpRequest.open("POST", url, true);
			xmlHttpRequest.setRequestHeader("Content-Type",
					"application/x-www-form-urlencoded");
			var data ="name=" + name+“&time="+Math.random();//需要发送的数据信息,name为用户名文本框获取的值
			xmlHttpRequest.send(data);
            */
			//Ajax 回调函数
			function callBack() {
				if (xmlHttpRequest.readyState == 4
						&& xmlHttpRequest.status == 200) {
					var data = xmlHttpRequest.responseText;
					if (data == "true") {
						$("#nameDiv").html("用户名已被使用！");
					} else {
						$("#nameDiv").html("用户名可以使用！");
					}
				}
			}//end of callBack()
		}
	}//end of validate()

	/*
	 *创建XMLHttpRequest对象
	 */
	function createXmlHttpRequest() {
		if (window.XMLHttpRequest) {//返回值为true时说明是新版本IE或其他浏览器
			return new XMLHttpRequest();
		} else {//返回值为false时说明是老版本IE浏览器（IE5和IE6）
			return new ActiveXObject("Microsoft.XMLHTTP");
		}
	}

controller部分的代码：

// 设置响应的编码格式：
	response.setCharacterEncoding("UTF-8");
	response.setContentType("text/html; charset=UTF-8");
	// 获取输出流对象
	PrintWriter out = response.getWriter();
	out.print("返回的结果");
	out.flush();
	out.close();

五、使用JQuery实现AJAX

1. 语法：
   $.ajax{[settings]}
   
   

2. 代码：

$.ajax( {
     "url"            :  "url",                      // 要提交的URL路径
     "type"         :  "get",                     // 发送请求的方式
     "data"         :  data,                      // 要发送到服务器的数据
     "dataType" :  "text",                   // 指定传输的数据格式
     "success"  :  function(result) { // 请求成功后要执行的代码
	     },
      "error"       :  function() {           // 请求失败后要执行的代码
	     }
} );

3 实现用户名验证的jQuery:

$(document).ready(function() {
	$("#name").blur(function() {
		var name = this.value;
		if (name == null || name == "") {
			$("#nameDiv").html("用户名不能为空！");
		} else {
			$.ajax({
                "url"       : "userServlet",   //要提交的URL路径
                "type"      : "GET",           //发送请求的方式
                "data"      : "name="+name,    //要发送到服务器的数据
                "dataType"  : "text",          //指定返回的数据格式
                "success"   : callBack,        //响应成功后要执行的代码
                "error"     : function() {     //请求失败后要执行的代码
                    alert("用户名验证时出现错误，请稍后再试或与管理员联系！");
                }
            });

			//响应成功时的回调函数
			function callBack(data) {
				if (data == "true") {
					$("#nameDiv").html("用户名已被使用！");
				} else {
					$("#nameDiv").html("用户名可以使用！");
				}
			}//end of callBack()
		}
	});//end of blur()
});

jQuery中—“$ .get()”和“$ .post()”方法

1.$.get()

$.get( url [, data] [, success] [, dataType] );

与：等价

2.$.post()

$.post( url [, data] [, success] [, dataType] );

与：等价