javaweb进阶-ajax异步基础

Ajax基础

一、全局刷新和局部刷新

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

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

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

二、ajax

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

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

	ajax是一个做局部刷新的新方法（2003年左右），不是一种语言。
	ajax包含的技术主要有：JavaScript、dom、css、xml等等。核心是JavaScript和xml。
	    其中JavaScript：负责创建异步对象，发送请求，更新页面的dom对象。ajax请求需要服务端的数据。
		xml：网络中传输的数据格式。（JSON替换了xml）
		     <数据>
			<数据1>宝马1</数据1>
			<数据2>宝马2</数据2>
			<数据3>宝马3</数据3>
			<数据4>宝马4</数据4>
			...
		     </数据>

三、JS原生方式实现异步

实现步骤

1. 定义一个XMLHttpRequest核心对象xhr;
2. 通过xhr.open方法给当前对象提供访问方式、URL等。
3. 发送当前的请求至指定的URL send()
4. 接收返回值并处理

具体流程【了解】

 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;
				    }
				}

	回调：当请求状态发生变化时，异步对象会自动调用onreadystatechange事件对应的函数。

	    异步对象的属性：
		readyState： 表示异步对象请求的状态变化
			 0： 创建异步对象， new XMLHttpRequest();
			 1： 初始化异步请求对象， XmlHttp.open()
			 2： 发送请求， xmlHttp.send()
			 3： 从服务端获取到了原始数据， 注意3是异步对象内部使用时的状态
			 4： 异步对象吧接收的数据处理完成后，此时开发人员在状态为4的时候处理数据（更新当前页面）
		
		status:  表示网络请求的状况，200,400,500。当status == 200时，表示网络请求是成功的

    3.初始异步请求对象
      异步的方法open()： xmlHttp.open(请求方式get|post,"服务器的访问地址URL",同步|异步请求方式(默认是true，异步请求))
	 例如：xmlHttp.open("get","loginServlet?name=wh&&pwd=123",true);

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

  【ajax发起请求---->servlet（返回一个JSON格式的字符串{name1:"value1",name2:"value2"}）】

四、jQuery方式实现异步

JS版的原生Ajax仅做了解，重点学习jQuery版的Ajax，jQuery对JS原生的Ajax进行了封装，封装后的Ajax的操作方法更简洁，功能更强大，语法结构简单，代码可读性好。

请求方式	语法
Ajax请求	$.ajax([settings])
GET请求	$.get(url, [data], [callback], [type])
POST请求	$.post(url, [data], [callback], [type])
其他…	如put请求、delete请求等

1、Ajax请求

语法：
      $.ajax({
          url:"",
          data:{},
          type:"post/get",
          dataType:"text",
          success:function(obj){
          
              }
      })

属性解析：【书写没有顺序】
    url：	请求的服务器端url地址, 与form表单中的action一样，代表请求路径
    data：	前台需要向后台传递的数据（键值对形式）
    type：	请求类型 get/post/put/delete...
    dataType：回传的数据类型。text、xml、html、json...
    success：	成功的回调函数,参数obj表示返回值

2、get请求

语法：
	$.get(url, [data], [callback], [type]);

属性解析：【书写有顺序】
	url：	 请求路径
	data：	 前台需要向后台传递的数据（键值对形式）
	callback：当请求成功后的回调函数，可以在函数体中编写逻辑代码
	type：	 预期的返回数据的类型，取值可以是 text、xml、html、json...

3、post请求

语法：
	$.post(url, [data], [callback], [type]);

属性解析：【书写有顺序】
	url：	 请求路径
	data：	 前台需要向后台传递的数据（键值对形式）
	callback：当请求成功后的回调函数，可以在函数体中编写逻辑代码
	type：	 预期的返回数据的类型，取值可以是 text、xml、html、json...

【面试】ajax请求和post请求、get请求的异同

相同点：
	1、都需要导入jquery
	2、都是jQuery封装的方法实现异步交互。

不同点：
    1、$.ajax()是jQuery的第一次封装，麻烦功能强大，覆盖了get和post请求，有错误调试能力，参数顺序没有要求
	2、$.post()和$.get()是jQuery对Ajax的第二次封装，由于$.Ajax()写法过于臃肿，简化为$.post()和$.get()，功能是相同的没有区别。【但是写法要求更高，参数顺序不能改变】。

总结： 简单的请求用get、post处理 。 复杂的请求用ajax处理

五、JSON介绍

介绍：

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它是基于ECMAScript的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

语法：

类型	语法	解释
对象类型	{name:value,name:value…}	其中name是字符串类型，而value是任意类型
数组类型	[value,value,value…]	其中value是任意类型
混合类型	[{},{}… …] 或 {name:[]… …}	合理包裹嵌套对象类型和数组类型

书写规范：

1.使用{}和[]书写，{}表示对象类型，[]表示数组类型
2.对象类型中每组数据之间用逗号隔开，每组中的关键字与值之间用冒号隔开
3.数组类型中每个值之间用逗号隔开，最后一个值后面不要加逗号
    
    /*json表达式里面的符号全都是英文！！！！*/

JSON在线工具

JSON在线解析工具：http://www.bejson.com/
作用：
	1.校验JSON数据的语法是否正确
	2.将不规范的JSON格式数据进行格式化

JSON数据的应用【直接将java对象或集合转换成json格式的字符串】

工具名称	介绍
Jsonlib	Java 类库，需要导入的jar包较多
Gson	google提供的一个简单的json转换工具
Fastjson	alibaba技术团队提供的一个高性能的json转换工具
Jackson	开源免费的json转换工具，springmvc转换默认使用jackson

使用步骤：
	1) 导入json相关jar包
	2) 创建java对象或集合
	3) 使用jackson的ObjectMapper对象的writeValueAsString方法进行转换 (可以是单个对象，也可以是集合)

son转换工具 |

| Jackson | 开源免费的json转换工具，springmvc转换默认使用jackson |

使用步骤：
	1) 导入json相关jar包
	2) 创建java对象或集合
	3) 使用jackson的ObjectMapper对象的writeValueAsString方法进行转换 (可以是单个对象，也可以是集合)