详解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技术站