什么是Ajax+Ajax底层原理+如何使用原生JavaScript或JQuery发送Ajax请求

1、什么是Ajax?

Ajax（Asynchronous JavaScript and XML）并不是一种全新的技术，而是有JavaScript、XML、CSS等几种现有技术整合而成。它以异步的方式在客户端与服务器端之间传递数据，也是一种局部刷新技术。

2、原生JavaScript实现Ajax请求

1、认识XMLHttpRequest对象

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

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

2、发送Ajax GET请求并处理响应

例如：当我们使用文本框onBlur事件实现当文本框失去焦点的时候发送Ajax异步请求检查用户名是否存在
实现步骤
1、 创建XMLHttpRequest对象。可以通过window.XMLHttpRequest的返回值判断创建XMLHttpRequest对象的方式（也就是解决浏览器的兼容问题）
2、 设置回调函数。回调函数需要自己定义
3、 初始化XMLHttpRequest对象。通过open()方法设置请求路径和请求方式
4、 发送请求

//创建XMLHttpRequest对象
if(window.XMLHttpRequest){
	xmlHttpRequest = new XMLHttpRequest();
}else{
	xmlHttpRequest = new ActiveXObjec("Microsoft.XMLHTTP");
}

//设置回调函数
xmlHttpRequest.onreadystatechange=callBack;

//初始化XMLHttpRequest对象。通过open()方法设置请求路径和请求方式
var url = "userServlet?name="+name;//服务器端URL地址。name为从文本框中获取
xmlHttpRequest.open("GET",url,true);

//发送请求
xmlHttpRequest.send(null);//如果send()方法不设置参数值，在不同浏览器下可能存在兼容性问题
function callBack(){
	if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
		var data = xmlHttpRequest.responseText;
		if(data=="true"){
			$("#nameDiv").html("用户名已被使用！");
		}else{
			$("nameDiv").html("用户名可以使用！")；
		}
	}
}

执行检查功能的servlet代码如下：

public class UserServlet extends HttpServlet{
	public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
		String name = request.getParameter("name");
		boolean used = false;
		if("ajax".equals(name)){
			used=true;
		}else{
			used=false;
		}
		response.setContentType("text/html","utf-8");
		PrintWriter out = response.getWriter();
		out.print(used);
		out.flush();
		out.close();
	}
	public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
		request.setCharacterEncoding("utf-8");
		this.doGet(request,response);
	}
}

3、发送POST Ajax请求并处理响应

//创建XMLHttpRequest对象
if(window.XMLHttpRequest){
	xmlHttpRequest = new XMLHttpRequest();
}else{
	xmlHttpRequest = new ActiveXObjec("Microsoft.XMLHTTP");
}

//设置回调函数
xmlHttpRequest.onreadystatechange=callBack;

//初始化XMLHttpRequest对象。通过open()方法设置请求路径和请求方式
var url = "userServlet";//服务器端URL地址
xmlHttpRequest.open("POST",url,true);
xmlHttpRequest.setRequestHander("Content-type","application/x-www-form-urlencoded");//这里为固定写法

//发送请求
var data = "name"+name;//多个键值对使用&连接
xmlHttpRequest.send(data);//如果send()方法不设置参数值，在不同浏览器下可能存在兼容性问题
function callBack(){
	if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
		var data = xmlHttpRequest.responseText;
		if(data=="true"){
			$("#nameDiv").html("用户名已被使用！");
		}else{
			$("nameDiv").html("用户名可以使用！");
		}
	}
}

3、使用jQuery发送Ajax 请求

参数	类型	说明
url	String	发送请求的地址
type	String	数据请求的方式，post 或者 get，默认是get，1.9.0版本之后可以使用method代替type
data	PlainObject或String或Array	发送到服务器的数据，如果不是字符串则自动转换为字符串格式，如果是get请求方式，那么，该字符串将附在url的后面
dataType	String	服务器返回的数据类型，如果没有指定，那么jquery将自动根据HTTP包的MIME的信息自动的判断。服务器返回的数据自动根据自动判断的结果进行解析，传递给回调函数 其可用类型为： html:返回纯文本的HTML信息， 包含的Script标记会在插入页面时被执行。 script:返回纯文本的javaScript代码 text:返回纯文本字符串 xml:返回可被jQuery处理的xml文档 json: 发挥json格式的数据
beforeSend	Function(jqXHR jqxhr,PlainObject settings)	发送请求前调用的函数，可用于设置请求头等，返回false将终止请求 参数 jqxhr:可选，jqXHR是XMLHttpRequest的超集 参数 settings:可选，当前ajax()方法的settings对象
success	Function(任意对象 result,String textStatus,jqXHR jqxhr)	请求成功后调用的回调函数 result: 可选，表示由服务器返回的数据 textStatus: 可选，表示描述请求状态的字符串 jqxhr: 可选
error	Function(jqXHR jqxhr, String textStatus, String errorThrown)	请求失败后调用的回调函数 jqxhr: 可选 textStatus: 可选，描述错误信息 errorThrown: 可选，表示用文本描述的HTTP状态
complete	Function(jqXHR jqxhr,String textStatus)	请求完成后调用的回调函数 jqxhr: 可选 textStatus: 可选，描述请求状态的字符串
timeout	Number	请求超时的时间
global	Boolean	是否响应全局事件，默认为true
async	Boolean	是否为异步请求，默认为true
cache	Boolean	是否进行页面缓存，默认为true

---

$.ajax({
	"url" : "userServlet",
	"type":"GET",
	"data":"name"+name,
	"dataType":"text",
	"success":callBack,
	"error":function(){
		alert("用户名验证错误！！！");
	}
});

//响应成功时的回调函数
function callBack(data){  //传入参数data表示响应结果
	if(data == "true"){
		$("#nameDiv").html("用户名已被使用！");
	}else{
		$("nameDiv").html("用户名可以使用！");
	}
}

#{}与${}的区别