ajax请求的完整步骤

时间 2019-11-17

标签 ajax 请求完整步骤栏目 Ajax 繁體版

原文原文链接

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

1、AJAX请求步骤以下：

一、建立XMLHttpRequest对象
ajax

var xhr;
if(window.XMLHttpRequest){
    var xhr = new XMLHttpRequest();
}
else{
    var xhr = new ActiveXObject("Microsoft.XMLHttp");
}

二、向服务器发送请求
浏览器

xhr.open(method,url,async);
xhr.send();//GET请求无参数，POST请求时必定要有参数

注：缓存

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

三、服务器响应

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

responseXML 得到XML形式的响应数据
安全

四、获取服务器状态码

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

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

0: 请求未初始化
1: 服务器链接已创建
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪async
status
post

200:OK
404:未找到页面url
readyState 触发onreadystatechange事件

xhr.onreadystatechange = function(){
    if(xhr.readystate == 4&& xhr.status == 200){
        do something;
    }
}

五、简单的实例

<!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>

2、AJAX 中POST和 GET的区别

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

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

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

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

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

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