Ajax返回值类型与用法实例分析（ajax返回的数据格式）学会了吗

文章摘要

本文介绍了在Ajax框架中如何处理不同类型的返回值，包括XML、HTML和JSON。通过三个测试函数，展示了如何根据返回值类型重新加载和解析响应数据。 1. **测试XML返回值**：创建XMLHttpRequest对象，发送GET请求，重写回调函数提取XML响应中的书名和简介字段，并将数据加载到页面元素中。 2. **测试HTML返回值**：与XML处理方式类似，但响应直接渲染到页面内容中。 3. **测试JSON返回值**：通过eval函数将JSON字符串解析为对象，提取并显示“name”和“intro”字段。文章通过代码示例展示了Ajax在不同返回值类型下的处理方法，帮助开发者理解如何根据具体需求选择合适的解析方式。

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<title>Ajax返回值类型</title>
<link rel=”stylesheet” href=”https://www.jb51.net/article/”>
</head>
<script>
//创建XMLHttpRequest对象
function createXhr(){
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();//谷歌、火狐等浏览器
}else if(window.ActiveXObject){
xhr=new ActiveXObject(“Microsoft.XMLHTTP”);//ie低版本
}
return xhr;
}
//测试返回值为xml
function test1(){
//1、创建XMLHttpRequest
var xhr=createXhr();
//2、确定请求参数
xhr.open(‘GET’,’https://www.jb51.net/article/07-returntype-xml.php’,true);
//3、重写回调函数
xhr.onreadystatechange=function (){
if(xhr.readyState==4 && xhr.status==200){
var domxml=xhr.responseXML;
var name=domxml.getElementsByTagName(‘book’)[0].firstChild.firstChild.wholeText;
var intro=domxml.getElementsByTagName(‘book’)[0].lastChild.firstChild.wholeText;
document.getElementById(‘name’).value=name;
document.getElementById(‘intro’).value=intro;
}
}
//4、发送请求
xhr.send(null);
}
//测试返回值为文本-HTML
function test2(){
//1、创建XMLHttpRequest
var xhr=createXhr();
//2、确定请求参数
xhr.open(‘GET’,’https://www.jb51.net/article/07-returntype-html.php’,true);
//3、重写回调函数
xhr.onreadystatechange=function (){
if(xhr.readyState==4 && xhr.status==200){
var domxml=xhr.responseXML;
document.getElementById(‘area’).innerHTML=xhr.responseText;
}
}
//4、发送请求
xhr.send(null);
}
//测试返回值为文本-json
function test3(){
//1、创建XMLHttpRequest
var xhr=createXhr();
//2、确定请求参数
xhr.open(‘GET’,’https://www.jb51.net/article/07-returntype-json.php’,true);
//3、重写回调函数
xhr.onreadystatechange=function (){
if(xhr.readyState==4 && xhr.status==200){
var result=eval(‘(‘+xhr.responseText+’)’);
document.getElementById(‘name’).value=result.name;
document.getElementById(‘intro’).value=result.intro;
}
}
//4、发送请求
xhr.send(null);
}
</script>
<body>
<p>书名：<input type=”text” id=”name”/></p>
<p>简介：<input type=”text” id=”intro”/></p>
<input type=”button” onclick=”test1();” value=”测试xml”/>
<input type=”button” onclick=”test2();” value=”测试HTML” />
<input type=”button” onclick=”test3();” value=”测试json” />
<p id=”area”></p>
</body>
</html>