初识Ajax

初识Ajax

介绍ajax前先介绍两个概念,就是 局部刷新 和 全局刷新

全局刷新和局部刷新

全局刷新:整个浏览器内容被新数据覆盖,在网络上传输大量数据,网络需要加载渲染页面.
局部刷新:在浏览器的内部,发起请求获取数据,改变页面的部分内容,其余的页面无需加载和渲染,网络中数据传输量少,给用户的感受好.
对于全局刷新,可以使用重定向或者转发的方式刷新页面,展示新的东西;而局部刷新就可以使用ajax来完成.

ajax简单介绍

ajax (Asynchronous JavaScript and XML 异步的js和XML)
ajax是一种局部刷新的新方法(2003年),使用到js,xml,css,dom等,核心是js和xml
js:主要负责创建异步对象,发送请求,修改dom,ajax请求需要的服务器数据.
xml:网络中传输数据的格式,如下.

<数据>
	<数据1>1</数据1>
	<数据2>2</数据2>
	<数据3>3</数据3>
</数据>

这是之前的数据传输,但是这种数据太大了,目前使用JSON替换了xml

ajax实现异步请求

1. 创建对象
   ajax请求的发送需要由异步对象触发,所以想使用ajax之前需要创建异步对象

var xmlHttp = new XMLHttpRequest();

2. onreadystatechange事件
   为异步对象绑定该事件,需要在异步对象的状态值readyStatus改变时触发该事件的方法
   先介绍异步对象的状态
   状态值readyStatus

状态值	含义
0	请求未初始化,创建异步对象, new XMLHTTPRequest()
1	初始化异步请求对象, xmlHttp.open()
2	异步对象发送请求, xmlHttp.send()
3	异步对象接受应答数据(从服务器端),3是异步对象内部使用,获取了原始数据
4	异步对象把接收的数据处理完成后,此时开发人员在4的时候处理数据,在4的时候,开发人员更新当前页面

还有就是status属性,表示网络请求状况的,如200,404,500等,当为200时代表请求成功.
所以onreadystatechange事件可以按照如下方式来写.

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

3. 初始异步请求对象
   异步方法open()

xmlHttp.open(请求方式get|post, "访问服务器的地址", 异步|同步(默认是true,表示异步))
例如:
xmlHttp.open("get", "loginServelet?name=zhangsan&password=123", true)

4. 使用异步对象发送请求

xmlHttp.send()