学习前端web的心路历程------Ajax和Json的相关知识了解

Ajax

1.概念

  Ajax即Asynchronous Javascript And XML（异步JavaScript和XML），使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户核心对象XMLHttpRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。Ajax 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

2.应用

  1).运用 XHTML+CSS 来表达资讯；

  2).运用 JavaScript 操作 DOM（Document Object Model）来执行动态效果；

  3).运用 XML 和 XSLT 操作资料;

  4).运用 XMLHttpRequest 或新的 Fetch API 与网页服务器进行异步资料交换；

• 注意：AJAX 与 Flash、Silverlight 和 Java Applet 等 RIA 技术是有区分的。

3.特点

  能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息。

  不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

4.同步

原理

  当浏览器向服务器发送同步请求时，服务处理同步请求的过程中，浏览器会处于等待的状态，服务器处理完请求把数据响应给浏览器并覆盖浏览器内存中原有的数据，浏览器——重新加载页面并展示服务器响应的数据。
同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。

从使用者的观点来看，这两种方式的不同之处在于：

  同步——使用者通过单个线程调用服务；该线程发送请求，在服务运行时阻塞，并且等待响应。(客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作)
  异步——使用者通过两个线程调用服务；一个线程发送请求，而另一个单独的线程接收响应。(客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作)

	// JQeury实现方式
1. $.ajax()
	* 语法：$.ajax({键值对});
	 //使用$.ajax()发送异步请求
	          $.ajax({
	              url:"ajaxServlet1111" , // 请求路径
	              type:"POST" , //请求方式
	              //data: "username=jack&age=23",//请求参数
	              data:{"username":"jack","age":23},
	              success:function (data) {
	                  alert(data);
	              },//响应成功后的回调函数
	              error:function () {
	                  alert("出错啦...")
	              },//表示如果请求响应出现错误，会执行的回调函数
	              dataType:"text"//设置接受到的响应数据的格式
	          });
2. $.get()：发送get请求
		* 语法：$.get(url, [data], [callback], [type])
				* 参数：
					* url：请求路径
					* data：请求参数
					* callback：回调函数
					* type：响应结果的类型
					* 
3. $.post()：发送post请求
	* 语法：$.post(url, [data], [callback], [type])
		* 参数：
			* url：请求路径
			* data：请求参数
			* callback：回调函数
			* type：响应结果的类型

Json

1.概念

  JSON: JavaScript Object Notation(JavaScript 对象标记法);JSON 是一种存储和交换数据的语法;JSON 是通过 JavaScript 对象标记法书写的文本,是一种轻量级的数据交换格式,JSON 比 XML 更小、更快，更易解析。

2. 语法：

1. 基本规则
	* 数据在名称/值对中：json数据是由键值对构成的
	 * 键用引号(单双都行)引起来，也可以不使用引号
	 * 值得取值类型：
		1. 数字（整数或浮点数）
		2. 字符串（在双引号中）
		3. 逻辑值（true 或 false）
		4. 数组（在方括号中）	{"persons":[{},{}]}
		5. 对象（在花括号中） {"address":{"province"："陕西"....}}
		6. null
	* 数据由逗号分隔：多个键值对由逗号分隔
	* 花括号保存对象：使用{}定义json 格式
	* 方括号保存数组：[]
2. 获取数据:
	1. json对象.键名
	2. json对象["键名"]
	3. 数组对象[索引]
	4. 遍历

 //1.定义基本格式
  var person = {"name": "张三", age: 23, 'gender': true};
  var ps = [{"name": "张三", "age": 23, "gender": true},
		    {"name": "李四", "age": 24, "gender": true},
		    {"name": "王五", "age": 25, "gender": false}];