关于用原生JS对AJAX做简单封装的实例代码,具体使用步骤如下:
首先,我们需要在JavaScript中,创建一个XMLHttpRequest对象。XMLHttpRequest对象是AJAX的核心,它提供了与服务器交互的能力。
var xhr=null;
if(window.XMLHttpRequest) {
xhr=new XMLHttpRequest(); // 创建XMLHttpRequest对象,针对现代浏览器
} else {
xhr=new ActiveXObject("Microsoft.XMLHTTP"); // 创建XMLHttpRequest对象,针对IE6及其以下版本浏览器
}
然后,我们需要使用XMLHttpRequest对象,发送HTTP请求并接收响应信息。
function sendRequest(url, callback) {
var xhr=null;
if(window.XMLHttpRequest) {
xhr=new XMLHttpRequest();
} else {
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
callback(xhr.responseText); // 调用回调函数,并传入服务器响应的数据
}
};
xhr.open("GET", url, true); // 发送HTTP请求
xhr.send(null); // 接收响应信息
}
在上述代码中,sendRequest()函数接收两个参数- AJAX请求的URL和一个回调函数。当XMLHttpRequest对象的readyState属性发生改变时,我们的回调函数将被调用,readyState=4代表请求已完成,status=200代表HTTP请求已成功处理。
下面,我们来看一个简单的示例,说明如何使用我们封装的AJAX函数,获取一个JSON格式的数据:
function loadJson(url) {
sendRequest(url,function(responseText){
var json=JSON.parse(responseText); // 将JSON格式的字符串解析为JavaScript对象
console.log(json); // 输出解析后的JSON数据
});
}
在上述代码中,我们使用了JSON.parse()方法将JSON格式的字符串解析为JavaScript对象,并在控制台中输出了解析后的JSON数据。
接下来,我们看一个例子,它演示了如何使用我们的AJAX函数,获取HTML文件并更新页面。
假设我们的页面有一个id为"content"的元素,我们的Ajax请求将获取一个HTML格式的文件,内容包括一个表格的HTML代码,我们的目的是将这些代码插入到页面的content元素中。我们可以这样做:
function loadTable(url) {
sendRequest(url,function(responseText){
var table=document.createElement('table');
table.innerHTML=responseText; // 将服务器响应的HTML代码插入到table元素之中
document.getElementById('content').appendChild(table); // 在页面中插入表格
});
}
在上述代码中,我们创建一个table元素,插入服务器响应的HTML代码,并将其添加到id为"content"的元素中,实现了将HTML内容更新到页面中的效果。
本文链接:http://task.lmcjl.com/news/8190.html