Ajax课堂笔记

全局刷新：
1）浏览器发起请求， 服务器端返回数据和视图。
2）这些数据全部替换原来的浏览器的数据。
3）需要在网络中传输大量的数据
4）视图（jsp，html）需要更新全部。
5）处理请求的时间会更长。

局部刷新：
1）不是由浏览器发起的请求， 是浏览器内存中的一个对象他发起的请求。
这个对象叫做异步对象， 这个异步对象代替浏览器请求发起去。
这个对象对象具有浏览器发请求，接收数据的功能
2）局部刷新需要向服务器发起请求，获取的只有数据，没有视图。
把数据更新到当前视图页面，更新某些dom对象的数据
3）异步对象可以发起请求，传递参数
4）异步对象可以更新dom数据
5）局部刷新，获取的少量数据，只更新部分dom对象。处理请求的速度更快。

---

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

局部刷新在开发中使用的是AJAX技术， 换句话说AJAX就是局部刷新。AJAX就是局部刷新的实现。

AJAX：用来实现局部刷新的，核心是异步对象（XMLHttpRequest）.AJAX不是一种新技术
他是利用现有的各种技术的一种组合方式。AJAX的实现主要使用的javascript和json(xml)，
同时需要有css，dom以及服务器端（jsp，servlet，jdbc）的支持

 javascript：创建异步对象XMLHttpRequest, 使用异步对象发起请求，处理数据。响应事件。
 xml: ajax出现在2003前后，出现的比较早，当时使用的是xml作为数据格式。
      xml：能表示，但是他的占用的空间比较大，在网络中传输比较慢。
      后来出现的json，json小巧，轻便。各种语言都支持json的处理。现在使用json作为数据的交互格式。
      json替换了xml，作为数据的格式。

---

异步对象：XMLHttpRequest
XMLHttpRequest在各种浏览器中都可以使用， ie，fireforx, chrome等等，他是使用js语法处创建的。
var xmlHttp = new XMLHttpRequest();

异步对象能做什么：
1.发起请求
2.传递参数
3.接收服务器端返回的结果数据（json）
4.接收数据后可以js去更新dom对象的数据。

---

使用异步对象XMLHttpRequest，实现AJAX的局部刷新。
概念：AJAX是局部刷新的技术实现， 在AJAX中核心是XMLHttpRequest对象。
这个XMLHttpRequest叫做异步对象，他处理的请求也叫做异步请求。

实现ajax，异步请求的步骤：
1.使用js语法创建异步对象
var xmlHttp = new XMLHttpRequest();
使用一般对象发起请求，传递请求参数，接收服务器返回的结果。

2.绑定事件onreadystatechange，可以响应网络请求的变化。
就相当于按钮单击会触发一个click， 异步对象XMLHttpRequest发起请求，接收数据都会执行onreadystatechange事件。

function fun(){ alert("button click"); }

onreadystatechange:指定一个function， 当请求接收数据发生变化时，会执行这个函数function.
异步对象请求，会发起请求，传递参数，接收结果数据。这个过程中会多次执行onreadystatechange对应的function

例如： xmlHttp.onreadystatechange=function(){
多次执行的，处理请求的变化，接收结果数据时的变化
alert(xmlHttp.readyState)
//处理服务器返回数据的时机
if( xmlHttp.readyState == 4 && xmlHttp.status == 200 ) {
处理服务器端返回的数据，更新当前页面中的dom对象
}
}

也可以先定义function，在指定这个function
function myfun() {  处理请求  }
xmlHttp.onreadystatechange = myfun;

在绑定事件，要知道请求的变化，接收数据，使用异步对象XMLHttpRequest的属性，readyState.
readyState属性值：
0：初始化异步对象， 在异步对象内部使用的值，不关心
1：初始化异步对象， 在异步对象执行open方法时， readyState是1.
2：发起请求，执行异步对象的send（）方法时。
3：异步对象从服务器端接收了数据。这个数据是原始的数据，没有经过XMLHttpRequest对象处理
4：异步对象把3中的原始数据处理后的状态。比如把3接收到json格式的数据转为js中的json对象。

200 ，404， 500这样的状态码， 网络请求状态是通过XMLHttpRequest的status属性表示， status可能是200,404,500等等

希望是200， 200表示网络请求是成功的

3.初始化异步对象，指定请求的uri地址，请求的参数等等
执行XMLHttpRequest的open()方法

open(method,url,async)
method：请求方式，是get，还是post
url：服务器端的访问地址，也就是某个servlet地址。
async:一个boolean值，表示异步请求，还是同步请求。 默认true表示异步请求。

例如：访问的servlet是 /loginservlet
xmlHttp.open(“get”,"/loginservlet",true)

4.使用XMLHttpRequest异步对象发起请求。
xmlHttp.send()方法。
说明：当执行send（）方法时，会像loginservlet发起请求，同时会执行onreadstatechange()时间的function。

5.如何获取服务器端返回的数据

使用异步对象的属性，获取数据。
xmlHttp.responseXML:获取xml格式的数据，现在不用了
xmlHttp.responseText:获取文本数据。

==================================================================================================
实现AJAX异步请求，是通过XMLHttpRequest对象实现的， 使用XMLHttpRequest对象步骤：
1.创建异步对象，使用js语法
var xmlHttp = new XMLHttpRequest();

2.给异步对象绑定事件
xmlHttp.onreadystatechange= function(){
//处理请求，返回数据的内容
if( xmlHttp.readyState == 4 && xmlHttp.status == 200){
//请求是成功的，并获取了数据
//获取服务器端的数据
var data = xmlHttp.responseText;
alert(“服务器端返回的数据是：” + data)

  }

}

3.初始化异步对象，指定请求的uri地址，参数等信息
xmlHttp.open(“get”,“uri|url”,true) // readyState == 1

4.发起请求
xmlHttp.send() // readyState == 2

---

bmi:身体质量指数， 计算公式 bmi = 体重（公斤） / 身高（米）的平方
首先是要全局刷新实现 bmi
1.新建一个jsp或者html
定义form表单， 指定参数 name ， 身高height，体重weight

2.发起请求，给一个servlet，接受name ，height， weight
使用公式计算 bmi
把bmi的值存放到request作用域， 并转发到一个jsp。

3.在jsp中，使用el表达式，获取bim的值，显示给用户

---

xmlHttp.open(“get”,“queryjson?proid=”+proid,true)
看open(“请求方式”，“url”,是否异步)
true:异步请求， 执行send()方法后,可以继续执行其他的代码， 和异步请求不影响。
换句话说：可以在一个浏览器，创建多个异步对象，分别执行不同的请求。
就像是多个线程同时工作。

false：同步请求， 执行异步请求执行完毕后，才能执行其他操作。
在浏览器中，一次只能处理一个异步请求。