ajax请求的完整步骤

AJAX = 异步JavaScript和XML，可以使网页实现异步更新，达到局部更新的目的。

一、AJAX请求步骤如下：

1、创建XMLHttpRequest对象

var xhr;

if(window.XMLHttpRequest){

	var xhr = new XMLHttpRequest();

}

else{

	var xhr = new ActiveXObject("Microsoft.XMLHttp");

}

2、向服务器发送请求

xhr.open(method,url,async);

xhr.send();//GET请求无参数，POST请求时一定要有参数

注：

method：请求的类型 GET或POST
url：文件在服务器上的位置，相对位置或绝对位置
async：异步（true）同步（false）

3、服务器响应

responseText 获得字符串形式的相应数据

responseXML 获得XML形式的响应数据

4、获取服务器状态码

XMLHttpRequest有三个重要属性：onreadystatechange，readyState ，status。

readyState 属性存有 XMLHttpRequest 的状态信息，从0-4发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

status

200:OK

404:未找到页面

readyState 触发onreadystatechange事件

xhr.onreadystatechange = function(){

	if(xhr.readystate == 4&& xhr.status == 200){

		do something;

	}

}

5、简单的实例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script>

function loadXMLDoc()

{

	var xhr;

	if (window.XMLHttpRequest)

	{

		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

		xhr = new XMLHttpRequest();

	}

	else

	{

		// IE6, IE5 浏览器执行代码

		xhr = new ActiveXObject("Microsoft.XMLHTTP");

	}

	xhr.onreadystatechange=function()

	{

		if (xhr.readyState==4 && xhr.status==200)

		{

			document.getElementById("myDiv").innerHTML = xhr.responseText;

		}

	}

	xhr.open("GET","/try/ajax/ajax_info.txt",true);

	xhr.send();

}

</script>

</head>

<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>

<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>

</html>

二、AJAX 中POST和 GET的区别

POST和 GET都是向服务器发送的一种请求，只是发送机制不同。

1、GET请求会将参数跟在url后传递，POST请求是作为http消息的实体内容发送给服务器。

2、GET方式提交的数据最多只能是1024字节。

3、GET方式请求的数据会被浏览器缓存起来，别人可以读取，如帐号、密码等，相对于POST方式不安全。

4、在客户端使用GET请求时，服务器使用Request.QueryString 获取参数；在客户端使用POST请求时，服务器使用Request.Form获取参数。

5、当请求无副作用时（如进行搜索），便可使用GET方法；当请求有副作用时（如添加数据行），则用POST方法。

巴特西

ajax请求的完整步骤

一、AJAX请求步骤如下：

二、AJAX 中POST和 GET的区别

最新文章

热门文章