原生Ajax五个步骤

1.创建对象

首先我们需要一个Ajax的对象。在这里我们需要注意的是,由于不同的浏览器内核问题,部分浏览器对Ajax对象的创建方式不一样。在以IE7以下版本为内核的浏览器中,没有提供XMLHttpRequest对象。目前,浏览器基本都是支持XMLHttpRequest对象,所以不再考虑版本问题。(浏览器版本的不同,区别仅仅是创建对象的不同,其他都是一样的)

var xmlhttp = new XMLHttpRequest();//获取对象

2.设置回调函数

设置当请求执行后,服务器返回请求的状态码,根据请求的状态码对浏览器做出相应的响应。

hxmlhttp.onreadystatechange = function(){//设置回调函数
	if(xmlhttp.readyState == 4)//这里的4是请求的状态码,代表请求已经完成
		if(xmlhttp.status == 200 || xmlhttp.status == 304)//这里是获得响应的状态码,200代表成功,304代表无修改可以直接从缓存中读取
			var result = xmlhttp.responseText;//这里获取的是响应文本,也可以获得响应xml或JSON
			alert("获取了响应文本" + result);

}

3.设置请求地址

设置请求地址,需要注意如果使用GET请求需要在url中绑定请求参数。

var url = "UserServlet.do?action=showUser";//POST请求
var data = "id="+id;//为POST请求绑定请求参数,需要以键值对形式绑定
var url = "UserServlet.do?action=showUser&id="+id;//GET请求

.设置open()方法
open方法用来告诉XMLHttpRequest对象,发送请求方式是"POST"还是"GET";请求需要发送到指定的url;执行方式是同步还是异步,默认为true(异步的方式)。这里设置成false(同步方式)与刷新页面无异。

xmlhttp.open("POST",url);

4.设置请求头(GET请求可以忽略这一步)

xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

5.发送请求

xmlhttp.send(data);//POST请求
xmlhttp.send();//GET请求

GET请求和POST请求的区别与form表单中method属性中的GET与POST区别一致。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章