Ajax基础

1. 全局刷新和局部刷新

B/S 结构项目中， 浏览器（Browse）负责把用户的请求和参数通过网络发送给服务器（Server）,服务端使用 Servlet（多种服务端技术的一种）接收请求，并将处理结果返回给浏 览器。 浏览器在 html，jsp 上呈现数据，混合使用 css， js 帮助美化页面，或响应事件。

1.1 全局刷新

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

全局刷新原理

1. 必须由浏览器亲自向服务端发送请求协议包。
2. 这个行为导致服务端直接将【响应包】发送到浏览器内存中
3. 这个行为导致浏览器内存中原有内容被覆盖掉
4. 这个行为导致浏览器在展示数据时候，只有响应数据可以展示

1.2 局部刷新

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

局部刷新原理

1. 不能由浏览器发送请求给服务端
2. 浏览器委托浏览器内存中一个脚本对象代替浏览器发送请求
3. 这个行为导致导致服务端直接将【响应包】发送脚本对象内存中
4. 这个行为导致脚本对象内容被覆盖掉，但是此时浏览器内存中绝大部分内容没有收 到任何影响.
5. 这个行为导致浏览器在展示数据时候,同时展示原有数据和响应数据

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

2. 异步请求对象

在局部刷新，需要创建一个对象，代替浏览器发起请求的行为，这个对象存在内存中。 代替浏览器发起请求并接收响应数据。这个对象叫做异步请求对象。

全局刷新是同步行为， 局部刷新是异步行为[浏览器数据没有全部更新]

这个异步对象用于在后台与服务器交换数据。XMLHttpRequest 就是我们说的异步对象。

XMLHttpRequest 对象能够：

• 在不重新加载页面的情况下更新网页
• 在页面已加载后向服务器请求数据
• 在页面已加载后从服务器接收数据

所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。通过一行简单的 JavaScript 代码，我们就可以创建 XMLHttpRequest 对象

创建 XMLHttpRequest 对象的语法（xhr）：

var xmlhttp = new XMLHttpRequest();

[!todo] AJAX 中的核心对象就是 XMLHttpRequest

3. AJAX

3.1 什么是 AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分页面内容的新方法

AJAX 不是新的编程语言，而是使用现有技术混合使用的一种新方法。ajax 中使用的技术有 JavaScript, html , dom , xml ,css 等。主要是 JavaScript , XML.

javascript：负责创建异步对象， 发送请求， 更新页面的 dom 对象。 ajax 请求需要服务器端的据。 xml： 网络中的传输的数据格式。 使用 json 替换了 xml 。

<数据>
      <数据1>宝马1</数据1>
	  <数据2>宝马2</数据2>
	  <数据3>宝马3</数据3>
	  <数据4>宝马4</数据4>
      </数据>

AJAX 不单需要前端的技术，同时需要后端（服务器）的配合。服务器需要提供数据，数据 是 AJAX 请求的响应结果。

3.2 AJAX 异步实现步骤

（1） 创建对象方式

var xmlHttp = new XMLHttpRequest();

（2） onreadstatechange 事件

给异步对象绑定事件。onreadystatechange ：当异步对象发起请求，获取了数据都会触发这个事件。

这个事件需要指定一个函数， 在函数中处理状态的变化。

btn.onclick = fun1();
function fun1() {
  alert("按钮单击");
}

例如：

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

下面是 XMLHttpRequest 对象的三个重要的属性：

属性说明：

onreadystatechange 属性：一个 js 函数名 或 直接定义函数，每当 readyState 属性 改变时，就会调用该函数

readyState 属性：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

• 0: 请求未初始化，创建异步请求对象 var xmlHttp = new XMLHttpRequest()
• 1: 初始化异步请求对象， xmlHttp.open(请求方式，请求地址，true)
• 2: 异步对象发送请求， xmlHttp.send()
• 3: 异步对象接收应答数据 从服务端返回数据。XMLHttpRequest 内部处理。
• 4: 异步请求对象已经将数据解析完毕。 此时才可以读取数据。

status 属性：

• 200: "OK"
• 404: 未找到页面

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

（3） 初始化请求参数：

方法：

open(method,url,async) ： 初始化异步请求对象

参数说明：

• method：请求的类型；GET 或 POST
• url：服务器的 servlet 地址
• async：true（异步）或 false（同步）

例如:

xmlHttp.open(“get”,”http:192.168.1.20:8080/myweb/query”,true)

（4） 发送请求

xmlHttp.send()

（5） 接收服务器响应的数据

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

• responseText：获得字符串形式的响应数据
• responseXML：获得 XML 形式的响应数据

4. 异步请求

XMLHttpRequest 对象 open( method , url, true ) 第三个参数 true 表示异步请求 异步请求特点： 1)某一个时刻，浏览器可以委托多个异步请求对象发送请求，无需等待请求处理完成。 2)浏览器委托异步请求对象工作期间，浏览器处于活跃状态。可以继续向下执行其他命令。 3) 当响应就绪后再对响应结果进行处理

实现步骤 ：

5. 同步请求

XMLHttpRequest 对象 open( method , url, false ) 第三个参数 false 表示同步请求 同步请求特点： 1)某一个时刻，浏览器只能委托一个异步请求对象发送请求，必须等待请求处理完成。 2)浏览器委托异步请求对象工作期间，浏览器处于等待状态。不能执行其他命令。 3)不推荐使用。

实现步骤：同 1.4.3 步骤，需要 open(method,url,false)第三个参数设为 false

6. json 使用

ajax 发起请求-------servlet（返回的一个 json 格式的字符串 { name:"河北", jiancheng:"冀","shenghui":"石家庄"}）

json 分类：

1. json 对象 ，JSONObject ,这种对象的格式 名称:值， 也可以看做是 key:value 格式。
2. json 数组， JSONArray, 基本格式 [{ name:"河北", jiancheng:"冀","shenghui":"石家庄"} , { name:"山西", jiancheng:"晋","shenghui":"太原"} ]

为什么要使用 json ： 1. json 格式好理解 2. json 格式数据在多种语言中，比较容易处理。 使用 java， javascript 读写 json 格式的数据比较容易。 3. json 格式数据他占用的空间下，在网络中传输快， 用户的体验好。

处理 json 的工具库： gson（google）； fastjson（阿里），jackson， json-lib

在 js 中的，可以把 json 格式的字符串，转为 json 对象， json 中的 key，就是 json 对象的属性名。