1.Ajax局部刷新技术概述，底层原理，全局刷新的例子

Ajax

0、第四阶段概述

本阶段课程内容：

1. 前端内容：ajax,jquery
2. 动态代理
3. maven：项目的构建工具
4. mybatis：访问数据库的框架
5. spring：管理和创建对象的构架
6. springmvc：做web开发的

前面的1-3阶段是 小学部分

第四阶段： 初中部分。

1. 前端内容：ajax,jquery —JavaScript , Dom， Html,Css

   2. 动态代理：反射
   3. mybatis: —JDBC的升级（创建Connection,执行sql 得到ReultSet， 关闭资源）
   4. spring: — 看做是创建管理对象，之前是 new Student() ,new StudentDao().
   5. springmvc: —servlet的升级，使用servlet接收请求，现在使用springmvc做servlet的事情

哪些感觉比较难？

反射：先初级入门，经验多了后，再看就好多了

js: 主要是用的少

1、全局刷新 和局部刷新

全局刷新：浏览器输入url地址，网页页面全部发生改变，数据传输量大。

局部刷新：还是原来的页面，只有局部页面发生改变，数据传输量小。

eg1:级联刷新

浏览器只有部分发生变化

eg2:搜索列表

2、异步对象

• 内存中可以有多个异步对象，发请求，和获取数据。

• AJax就是实现异步刷新的一种技术

• XmlHttpRequest就一种异步对象，存在于浏览器内存之中

总结：

ajax是用来做局部刷新的

局部刷新使用的核心就是异步对象（XmlHttpRequest）

这个异步对象存在于浏览内存中的

使用js语法 创建和使用 XmlHttpRequest 对象

3、Ajax

Ajax :Asynchronous JavaScript and XML(异步的JS 和XML)

Asynchronous ：异步的意思

js：js脚本，在浏览器中执行

and: 和

xml:是一种数据格式

• ajax是一种做局部刷新的新方法，不是一种语言。

• ajax包含的技术主要有js,dom,css,xml等等, 核心 是js 和xml.

  • js:负责创建异步对象，发送请求，更新页面的dom对象。 ajax请求需要服务器端的数据。

  • xml:网络中 数据传输的数据格式 . （后来用json替换了xml）

4、Ajax中使用异步对象

（1）创建异步对象

​ var xmlHttp = new XMLHttpRequest();

（2）给异步对象绑定事件

​ onreadystatechange: 当异步对象发起请求，获取 了数据就会触发这个事件。这个事件需要指定一个函数，在函数中处理状态的变化。

例如：

xmlHttp.onreadystatechange = function(){
   

	处理请求的状态变化 

	if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
   

		//可以处理服务器端的数据，更新当前页面

	}

}

​ 因为是网络请求，有很多状态，涉及网络的传输和网络的通信，以及请求不同点的变化，这些请求的状态变化，用readyState属性来表示。

异步对象的属性readyState

• 表示异步对象请求的状态变化

异步对象的属性 status

• 表示网络请求的状况的，200，404，500

  需要是当status == 200 时，表示当网络请求是成功的

（3）初始异步请求对象

​ 异步 的方法 open().

​ xmlHttp.open(请求方式 get| post, “服务器端的访问地址”，同步|异步请求 默认是true)

​ 例如：

​ xmlHttp.open(“get”,“loginServlet? name =zs& pwd =123”,true);

（4）使用异步对象发送请求

		xmlHttp.send()

怎么能获取服务器端返回的数据？

• 使用异步对象的的属性 responseText

  • 例子

    xmlHttp.responseTest