AJAX

AJAX的概念:

AJAX使用的是老的技术,新的思想.完成了RIA的应用:Rich Internet Application.

* 传统方式的开发：所有的数据提交到服务器端进行处理.(胖服务器)

* AJAX的方式开发：有一部分的代码写在客户端.

同步：

异步：

AJAX的作用：

完成页面局部刷新而不影响用户的体验.

* 用户名是否已经存在的校验

* 百度信息输入的提示

...

使用AJAX：

JavaScript和XML

* XMLHttpRequest:

* 属性：

* onreadystatechange:

* readyState:

0(未初始化) 对象已建立，但是尚未初始化(尚未调用open方法)

1(初始化) 对象已建立，尚未调用send方法

2(发送数据) send方法已调用，但是当前的状态及http头未知

3(数据传送中) 已接收部分数据，因为相应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误。

4(完成) 数据接收完毕，此时可以通过responseBody和reponseText获取完整的回应数据

* status:获得状态码

* responseText:响应的文本

* responseXML:响应的XML

* 方法:

* open(“请求方式”,”请求路径”,”是否异步”);

* send(“提交的参数”);

* setRequestHeader(“头信息”,”头的值”);

setRequestHeader("content-type","form表单enctype属性"):设置post请求的参数的类型 必须放在send方法之前.

例如：

                //open
		xmlhttp.open("post","URL");
		//设置请求头
		xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
		//send
		xmlhttp.send("username=张三");

开发步骤：

1.获得XMLHttpRequest对象.

* IE将XMLHttpRequest封装到一个ObjectXActive插件中.

* Firefox直接可以创建XMLHttpRequest.

2.设置状态改变触发一个函数.

3.打开一个链接.

4.发送请求.

【AJAX的GET入门】:

创建XMLHttpRequest
function createXMLHttpRequest() {
	var xmlHttp;
	try { // Firefox,Opera 8.0+,Safari
		xmlHttp = new XMLHttpRequest();
	} catch (e) {
		try {// Internet Explorer
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {
			}
		}
	}

	return xmlHttp;
}

AJAX的代码：
function loadData() {
	// 1.创建异步XMLHttpRequest对象
	var xhr = createXMLHttpRequest();
	// 2.设置状态改变触发一个函数
	xhr.onreadystatechange = function(){
		// 回调函数.
		if(xhr.readyState == 4){// 请求发送完成
			if(xhr.status == 200){// 响应也正确
				var data = xhr.responseText;
				document.getElementById("d1").innerHTML=data;
			}
		}
	}
	// 3.打开一个连接：
	xhr.open("GET","/WEB15/ServletDemo1",true);

	// 4.发送请求
	xhr.send(null);
}

【AJAX的POST入门】:

function loadData(){
	// 1.创建异步对象
	var xhr = createXMLHttpRequest();
	// 2.设置状态改变触发的函数
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4){
			if(xhr.status == 200){
				document.getElementById("d1").innerHTML=xhr.responseText;
			}
		}
	}
	// 3.打开连接
	xhr.open("POST","/WEB15/ServletDemo2",true);
	xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	// 4.发送数据
	xhr.send("name=李四&password=456");
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!