AJAX基础

本文主讲：AJAX技术的简单应用…

浏览器页面的全局刷新与局部刷新

全局刷新：浏览器整个页面发生改变，跳转到全新的视图，并且用全新的数据去填充浏览器页面视图，例如在原有页面内点击超链接以及Form表单

局部刷新：浏览器页面大体不发生变化，页面内的视图部分发生改变，利用新获取的数据去填充改变的视图，例如搜索引擎的搜索提示功能以及轮播图

全局刷新与局部刷新的对比

全局刷新：

1：整个页面的视图全部发生了变化，数据传输量大，浏览器渲染时间长，用户等待时间长
2：用户体验性略差
3：因为数据传输量大，所以比较消耗带宽

局部刷新：
1：数据传输量较全局刷新比较少，在网络中传输较快
2：浏览器不需要渲染整个页面，所以页面加载时间快，用户体验好
3：在一个浏览器页面内可以做多个局部刷新

注意：在浏览器页面内能做局部刷新的部分尽量做局部刷新

浏览器内存中的异步JavaScript对象

浏览器页面的全局刷新与局部刷新底层原理

全部刷新原理：浏览器对象【只有一个】在同一时间内向指定的网站服务器发送请求获取数据【整个浏览器同一时间做一个请求】，然后更新整个页面

局部刷新原理：浏览器内存中的异步JavaScript对象【可以有多个】在同一时间内，可向指定的网站服务器发送请求获取数据，然后局部刷新页面

注意：

最重要：全部刷新在同一时间最多只能做一个请求，局部刷新在同一时间内可做多个请求【异步JavaScript对象实现】！

1：一个浏览器内可创建多个异步JavaScript对象【XMLHttpRequest】
2：每一个异步JavaScript对象都可以独立的向服务器发送请求获取数据
3：正因为1、2两条，所以一个浏览器页面内可以构建多个局部刷新【多个异步JavaScript对象独立发送请求完成】

浏览器内存中的异步JavaScript对象【XMLHttpRequest】的介绍

概念：XMLHttpRequest【异步对象】是一个异步的JavaScript对象，各大浏览器都支持

创建【实例化】异步的JavaScript对象： var 对象变量名 = new XMLHttpRequest（）
【XMLHttpRequest对象名是固定写法！】

创建完异步的JavaScript对象，就可以使用这个对象中的属性和方法啦

局部刷新用到的技术汇总

浏览器页面进行局部刷新用到的技术汇总

前端技术：

JavaScript：用来创建浏览器内存中异步的对象【XMLHttpRequest】，这些异步对象用来携带数据发送请求，获取响应

DOM编程：更新浏览器页面中的一些标签组件【局部组件刷新】

CSS：对局部刷新的标签组件进行美化

后端技术：
servlet：用来接收客户端发来的请求【不局限于servlet】

数据交换格式：主流为 json、XML，通过这两种数据交换格式将数据传给客户端进行局部刷新用

总结：以上这些是浏览器页面进行局部刷新的技术汇总，他们统称为 AJAX【阿贾克斯】

什么是AJAX

什么是 Ajax

重点：

1：Ajax就是无需重载整个浏览器页面的基础上，能够实现页面的部分内容【视图、数据】刷新！！！

2：Ajax不是一种新的技术，而是多种旧技术的综合使用

Ajax功能：实现浏览器页面的局部刷新【以后一提到 Ajax 就想到浏览器页面的局部刷新】

Ajax核心技术：JavaScript【构建异步的JavaScript对象】与 XML（json）【数据交换格式，现在主流用 json】

注意：为什么现在主流的数据交换格式为 json ，但是 Ajax 却叫做异步的 JavaScript 与 XML 呢，因为Ajax技术诞生与2005年，那个时候 json 还未出生，主流数据交换格式还用XML 因此就叫 Ajax 了

什么是同步与异步

同步：同步就像是两个答打电话，一个人给另外一个人打电话，如果那个人没有接，你就不能给别人打电话【在等待接电话过程中你不能做其他事情（给别人打电话）】

异步：异步就向发微信，你先给小虎发了个微信，小虎没有回你，但是你可以在小虎没回你的前提下向春丽发微信…..异步的效率远高于同步【在等待小虎回微信的过程中你可以做别的事情（给别人发微信）】

异步JS对象的方法与属性

浏览器内存中的异步JS对象中常用的方法与属性的功能

前提：在JS内创建了异步的JS对象【var xhr = new XMLHttpRequest（）】

常用方法：

初始化请求参数——open（）

语法格式：异步JS对象.open（请求方式，请求的url，boolean）

方法实例：异步对象.open（“get”，“https：//www.baidu.com”，true）
实例详解：以异步的方式向百度的服务器发送get请求

参数详解：

请求方式：以什么方法向指定服务器发送请求
请求的url：目标url
boolean：是否以异步的方式向指定url发送请求，true为异步方式，false是同步方式

注意：异步JS对象的open方法只是初始化请求参数，并没有真正的向网站服务器发送请求，而是请求前的准备！！！！！

——————————————————————————————————————————

发送请求方法—— send（）

方法功能：向指定的网站服务器真正发送请求

语法格式：异步JS对象.send（）

注意：send方法需要在open方法之后使用，等open方法初始化请求参数之后，在使用 open 方法发送请求

————————————————————————————————————————————

常用属性：

获取发送请求的数字状态码属性—— readyState

属性功能：判断异步的JS对象发送请求到哪一步了，不同的步骤返回的数字状态码不一样

语法格式：var data = 异步JS对象.readyState 【data变量是返回值】

返回值代表的含义：

0：返回值为 0 代表刚刚创建好异步的 JS 对象

1：程序执行了 open 函数【初始化请求参数】

2：程序执行了 send 函数【真正的发送请求】

3：发送请求结束，异步JS对象接收到服务器返回的数据

4：异步JS对象将服务器接收到的数据在内部进行处理完毕【重要的步骤，这一步过后，数据就可以被我们所用了！】

注意：这个数字状态码与响应状态码是不一样的哦【切记！切记】

______________________________________________________________________________+++++++

获取响应状态码属性—— status

属性功能：获取服务器响应的状态码，判断响应状态

语法示例：var responesCode = 异步的JS对象.status 【responseCode变量是返回值】

返回值代表的含义：

200：服务器成功响应
300：重定向
404：请求的资源未找到
500：服务器端出现错误

———————————————————————————————————————————

获取服务器端相应的数据属性 —— responseText 【重点】

属性功能：获取服务器响应给浏览器的数据

语法示例：var responseData = 异步JS对象.responseText

异步JS对象的使用步骤

第一步：在JS脚本块内创建异步的JS对象

语法实现：var xhr = new XMLHttpRequest（）

注意：这段代码是写在 JS 脚本块内的哦

第二步：给异步的 JS 对象绑定 readystatechange 事件【如果请求的数字状态码发生变化就触发这个事件】

功能：通过判断请求步骤的数字状态码，获取服务器端发送过来的数据并在前端页面上进行局部更新

语法：

异步JS对象.onreadystatechange = function（）{

	if （异步JS对象.readState == 4 && 异步JS对象.ststus==200）{
		
		var data = 异步JS对象.responseText
			
        document.getElementById（“one”）.innerHTML = data
		
	}
	
		}

语法详解：如果请求过程中数字状态码发生改变执行 function （）{} 内的代码，函数代码内如果数字状态码为4【异步对象对服务器响应的数据进行内部处理完毕】并且响应状态码为200【服务器响应正常】，那么就获取服务器响应的具体数据并且将这些数据更新到前端的页面中

第三步：执行 open 初始化请求方法

功能：向指定服务器网站发送请求前准备

语法：异步JS对象.open（“get”，“https：//www.baidu.com/”，true）

第四步：执行 send 方法向指定服务器发送请求

功能：发送请求

语法：异步JS对象.send（）

Ajax持续更新中……