详解JavaScript实现异步Ajax

Ajax（Asynchronous JavaScript and XML）即异步JavaScript和XML，是指页面无需刷新就能与服务器交换数据的技术。使用Ajax可以使网页更加高效，有良好的用户体验。在JavaScript中，可以使用XMLHttpRequest对象实现AJAX异步请求和响应。下面是如何实现Ajax的完整攻略。

1. 创建XMLHttpRequest对象

在JavaScript中，创建XMLHttpRequest对象需要使用如下的语句。

var xmlhttp;
if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
} else {//兼容低版本IE浏览器
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

2. 发送Ajax请求

在创建XMLHttpRequest对象之后，就可以发送Ajax请求了。使用XMLHttpRequest对象的open方法和send方法来发送请求。

xmlhttp.open("GET", "example.php?name1=value1&name2=value2", true);
xmlhttp.send();

其中，open方法有三个参数：请求类型（GET/POST）、请求的URL（服务器文件的位置）、是否异步处理请求（true/false）。若send方法的参数为null，则请求为GET请求；否则请求为POST请求。

3. 处理Ajax响应

当XMLHttpRequest对象接收到来自服务器的响应时，需要在JavaScript中处理响应。下面是一个readystatechange事件的示例。

xmlhttp.onreadystatechange = function() {
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        //处理响应数据
      }
}

在这个事件中，xmlhttp.readyState属性为4时，状态才算完成；而xmlhttp.status属性为200时，则表示响应成功。

4. 解析响应数据

在得到Ajax响应数据后，我们通常需要对响应数据进行解析后再处理。下面是一个解析JSON格式响应数据的示例。

xmlhttp.onreadystatechange = function() {
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var json = JSON.parse(xmlhttp.responseText);
            //处理解析后的JSON数据
      }
}

在上面的示例中，JSON.parse将响应的JSON格式数据解析成JavaScript对象或数组。

示例1：Ajax请求获取文本数据

下面是一个使用Ajax向服务器请求文本数据的示例。

function getTxt(url,callback){
    var xhr=new XMLHttpRequest();
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4&&xhr.status==200){
            var txt=xhr.responseText;
            callback(txt);
        }
    }
    xhr.open("GET",url,true);
    xhr.send();
}
//使用示例
getTxt('test.txt',function(txt){
    console.log(txt);
})

在这个示例中，我们向服务器请求的是一个名为test.txt的文本文件，而回调函数callback是用来处理响应数据的。

示例2：Ajax请求提交表单数据

下面是一个使用Ajax向服务器提交表单数据的示例。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单提交数据</title>
</head>
<body>
    <form>
        <p>用户名：<input type="text" name="username"></p>
        <p>密码：<input type="password" name="password"></p>
        <button type="button" onclick="submitInfo()">提交</button>
    </form>
    <script>
        function submitInfo(){
            var xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4&&xhr.status==200){
                    console.log(xhr.responseText);
                }
            }
            xhr.open("POST","submit.php",true);
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            var data="username="+document.getElementsByName('username')[0].value+"&password="+document.getElementsByName('password')[0].value;
            xhr.send(data);
        }
    </script>
</body>
</html>

在这个示例中，我们利用POST请求，将表单的用户名和密码数据以application/x-www-form-urlencoded格式发送到服务器的submit.php文件中。服务器接收到POST请求并处理后，响应数据将被返回到XMLHttpRequest对象中，并通过回调函数打印到控制台中。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解JavaScript实现异步Ajax - Python技术站