Ajax基础_ 字节宝

1. 全局刷新和局部刷新

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

1.1 全局刷新

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

全局刷新原理

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

1.2 局部刷新

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

局部刷新原理

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

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

2. 异步请求对象

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

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

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

XMLHttpRequest 对象能够：

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

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

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

代码语言：javascript复制

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 。

代码语言：javascript复制

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

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

3.2 AJAX 异步实现步骤

（1）创建对象方式

代码语言：javascript复制

var xmlHttp = new XMLHttpRequest();

（2） onreadstatechange 事件

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

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

代码语言：javascript复制

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

例如：

代码语言：javascript复制

 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（同步）

例如:

代码语言：javascript复制

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 分类：

json 对象，JSONObject ,这种对象的格式名称:值，也可以看做是 key:value 格式。
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 对象的属性名。

ajax 对象基础数据异步

0 人点赞