Ajax基础知识_一文详解

1：全局刷新和局部刷新

全局刷新：整个浏览器被新的数据覆盖，在网络中传输大量的数据。浏览器需要加载，渲染页面。

局部刷新：在浏览器的内部，发送请求，获取数据，改变页面中的部分内容。
在其余的页面无需加载和渲染，网络中数据传输量少，给用户的 感觉好。

Ajax是用来做局部刷新的。局部刷新使用的核心对象是：异步对象（XMLHttpRequest）这个异步对象是存在浏览器的内存中的，使用javaScript语法创建和使用XMLHttpRequest对象。

2：Ajax的应用场景

1：页面上拉加载更多数据
2：列表数据无刷新分页
3：表单离开焦点数据验证
4：搜索框提示文字下拉列表
等等。。。。

3：ajax：Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

Asynchronous：异步的意思
JavaScript：javaScript脚本，在浏览器中执行
and：和
xml：是一种数据格式

ajax是一种做局部刷新的新方法（2003年左右），不是一种语言，ajax包含的技术主要有javaScript，dom，css，xml等等。核心是javaScript和xml。

javaScript：负责创建异步对象，发送请求，更新页面的dom对象。
XML：网络中的传输的数据格式。使用json替换了XML。

4：ajax中使用XMLHttpRequest对象

1）：创建异步对象：
var xmlHttp = new XMLHttpRequest();

2）：给异步对象绑定事件。
onreadystatechange：当异步对象发起请求，获取了数据都会触发这个事件。这个事件需要指定一个函数，在函数中处理状态的变化。
例如：

xmlHttp.onreadystatechange = function(){
//处理请求的状态变化
if(xmlHttp.readystate == 4 && xmlHttp.status == 200){
//此时可以处理服务器端的数据，更新当前页面。
var data = xmlHttp.responseText;
document.getElementById(“name”).value = data;
}
}

3）：异步对象的属性：
readyState 表示异步对象请求的状态变化（0~4）

0：创建异步对象时，new XMLHttpRequest();
1：初始异步对象时，xmlHttp.open();
2：发送请求，xmlHttp.send();
3：从服务器端获取了数据，此时3，注意3是异步对象内部使用，获取了原始的数据。
4：异步对象把接收的数据处理完成后，此时开发人员在4的时候处理数据。在4的时候，开发人员做什么？更新当前页面。

4）：异步对象的status属性，表示网络请求的状况的，200，404，500，需要当status == 200时，表示网络请求是成功的。

5）：初始异步请求对象
异步的方法open()
xmlHttp.open(请求方式get|post，”服务器端的访问地址”，同步|异步请求（默认是true，异步请求）);
例如：
xmlHttp.open(“get”，”loginServlet?name=zs&pwd=123”，true);

6）：使用异步对象发送请求
xmlHttp.send();

7）：获取服务端返回的数据，使用异步对象的属性 responseText
例子：xmlHttp.responseText

5：Ajax发起请求返回一个json格式的字符串

ajax发起请求---->Servlet（返回一个json格式的字符串{nam=”河北”，jiancheng=”冀”，shenghui=”石家庄”}）

json分类：
1：json对象，JSONObject，这种对象的格式：名称:值

2：json数组，JSONArray，基本格式[{nam=”河北”，jiancheng=”冀”，shenghui=”石家庄”}，{nam=”山西”，jiancheng=”晋”，shenghui=”太原”}]

为什么使用json？
1：json格式好理解

2：json格式数据在多种语言中，比较容易处理。使用java，javaScript读写json格式的数据比较容易。

3：json格式数据它的占用空间小，在网络中传输快。用户体验好。

处理json的工具库：
gson(google)，fastjson(阿里巴巴)，jackson，json-lib

目前使用jackson工具库：
将java对象转换为json格式的字符串：
ObjectMapper om = new ObjectMapper();
//参数是java对象，返回一个json格式的字符串
om.writeValueAsString§;

在js中，可以把json格式的字符串，转换为json对象

6：使用jquery的函数，实现ajax请求的处理

1：没有使用jquery之前，使用XMLHttpRequest做ajax，有4个步骤。
jquery简化了ajax请求的处理，使用三个函数可以实现ajax请求的处理。

2：
$.ajax()：jquery中实现ajax的核心函数。
$.post()：使用post方式做ajax请求
$.get()：使用get方式发送ajax请求

$.post()和$.get() 它们在内部都是调用的 $.ajax()

3：介绍$.ajax函数的使用

1）：函数的参数表示请求的url，请求的方式，参数值,回调方法等信息。
2）：$.ajax()参数是一个json的结构
3）：例如：$.ajax({名称：值，名称1：值1})

$.ajax({
	async:true,
	contentType:”application/json”,
	data:{name:”list”,age20},
	dataType:”json”,
	error:function(){
	//请求出现错误时，执行的函数。
	},
	sucess:function(data){
	//这里处理服务端返回的数据。
	},
	url:”bmyAjax”,
	type:”get/post”
})

4：json结构的参数说明：
1）：async：
是一个boolean类型的值，默认是true，表示异步请求的，可以不写async这个配置项，相当于xmlHttp.open(get,url,true)，与第三个参数一样的意思。

2）：contentType：
一个字符串，表示从浏览器发送服务器的参数的类型，可以不写，例如你想表示请求的参数是json格式的，可以写application/json

3）：data：
规定要发送到服务器的数据，可以是字符串，数组，json，表示请求的参数和参数值，常用的是json格式。

4）：dataType：
表示期望从服务器端返回的数据格式，可选的有：xml，html，text，json，当我们使用$.ajax()发送请求时，会把dataType的值发送给服务器，那我们的Servlet能够读取到dataType的值，就知道你的浏览器需要的是json或者xml的数据，那么服务器就可以返回你需要的数据格式。

5）：error：
一个function，表示当请求发送错误时，执行的函数。
error:function(){ 发送错误时执行 };

6）：success：
一个function，请求成功了，从的服务器端返回了数据，会执行success指定函数。
相当于使用XMLHttpRequest对象，当readyState==4 && status == 200的时候。

7）：url：
请求地址

8）：type：
请求方式 get/post，默认是get方式。

主要使用的是 url，data，dataType，success