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方法。

转载于:https://www.cnblogs.com/yihen-dian/p/8698712.html