Ajax详解

一、Ajax概述

1.什么是同步，什么是异步

同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态。
异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死。

2.Ajax介绍

Ajax=Asynchronous JavaScript and XML（异步的JavaScript和XML），不是新的编程语言，而是一种使用现有标准的新方法。可以是使网页实现异步更新，就是不重新加载整个网页的情况下，对网页的某部分进行更新（局部刷新）。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页页面。

3.Ajax的运行原理

页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以任意进行操作，不会卡死，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面的功能。
注意：Ajax技术是js内核中的一部分。浏览器有JS引擎、CSS引擎、HTML引擎、AJAX引擎，浏览器可以将这些解析出来从而展示给用户更直观的体验。网页所有的异步访问都是基于Ajax引擎实现的。

二、JS原生的Ajax技术

js原生的Ajax技术，其实就是通过js获取浏览器内置的Ajax引擎对象（XMLHttpRequest）进行操作的。XMLHttpRequest 对象用于和服务器交换数据。

1.Get方式请求

如果是get方式请求服务器，需要向服务器提交的数据要写在url后面：

function getAjaxMethod(){
		//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
		var xmlHttp = new XMLHttpRequest();
		//2、绑定监听 ---- 监听服务器是否已经返回响应数据
		xmlHttp.onreadystatechange = function(){
		
			if(xmlHttp.readyState==4&&xmlHttp.status==200){
				//5、接受服务器返回数据，并进行处理
				var res = xmlHttp.responseText;
				document.getElementById("span1").innerHTML = res;
			}
		}
		//3、绑定地址
		xmlHttp.open("GET","/myWeb/ajaxServlet?name=ming",true);
		//4、发送请求
		xmlHttp.send();
		
	}

2.Post方式请求

如果使用Post方式请求服务器，要使用setRequestHeader()方法来添加HTTP头，然后在send()方法中添加要上传的数据。

function postAjaxMethod(){
		//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
		var xmlHttp = new XMLHttpRequest();
		//2、绑定监听 ---- 监听服务器是否已经返回响应数据
		xmlHttp.onreadystatechange = function(){
			if(xmlHttp.readyState==4&&xmlHttp.status==200){
				//5、接受响应数据
				var res = xmlHttp.responseText;
				document.getElementById("span2").innerHTML = res;
			}
		}
		//3、绑定地址
		xmlHttp.open("POST","/myWeb/ajaxServlet",true);
		//4、发送请求
		xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlHttp.send("name=ming");
		
	}

注意：关于JS原生的Ajax方法，需要了解具体详情（同步与异步的切换、服务器端响应的数据类型、XMLHttpRequest对象浏览器的兼容性等），请查看W3school网站。

三、Jquery的Ajax技术

Jquery是一个优秀的Js框架，对js进行了封装，自然对js原生的ajax也进行了封装，封装后的ajax的操作方法更简洁，功能也更强大，与ajax操作相关的jquery方法最常用的有三种：$.ajax()、$.get()、$.post()（在jquery中，$符号代表Jquery）。

1. $.get()

例子：

//get异步访问
		$.get(
			"/myWeb/ajaxServlet2", //url地址
			{"name":"张三","age":25}, //请求参数
			function(data){ //执行成功后的回调函数，可以为匿名函数，也可以指定函数名
				//{\"name\":\"tom\",\"age\":21}
				alert(data.name);
			},
			"json"
		);

2. $.post()

例子：

//post异步访问
		$.post(
			"/myWeb/ajaxServlet2", //url地址
			{"name":"李四","age":25}, //请求参数
			function(data){ //执行成功后的回调函数
				alert(data.name);
			},
			"json"
		);

$.get()与$.post()方法的参数类型都一样，具体如下：

参数	详细
第一个参数url	url地址
第二个参数data（可选）	请求参数，待发送Key/value参数（json）
第一个参数callback（可选）	载入成功回调函数，可以为匿名函数，也可以指定函数名
第一个参数type（可选）	指定服务器返回数据类型（xml, html, script, json, text, _default）

3. $.ajax()

$ajax()方法最常用，例子：

$.ajax({
			url:"/myWeb/ajaxServlet2",
			async:true,
			type:"POST",
			data:{"name":"lucy","age":18},
			success:function(data){
				alert(data.name);
			},
			error:function(){
				alert("请求失败");
			},
			dataType:"json"
		});

关于$ajax()方法的常用参数参照下表，最全面的参数请参考W3school网站

参数	描述
url	类型：String 默认值: 当前页地址。发送请求的地址。
async	类型：Boolean 默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
type	类型：String 默认值: “GET”)。请求方式 (“POST” 或 “GET”)， 默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
data	类型：String 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 ‘&foo=bar1&foo=bar2’。
success	类型：Function 请求成功后的回调函数。 参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
error	类型：Function 默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。
dataType	类型：String 预期服务器返回的数据类型。具体参数请参考下表

dataType的可选值及其描述：

参数	描述
xml	返回 XML 文档，可用 jQuery 处理。
html	返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
script	返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
json	返回 JSON 数据
jsonp	JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
text	返回纯文本字符串