最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

ajax处理服务器返回的三种数据类型方法

来源:动视网 责编:小采 时间:2020-11-27 20:08:10
文档

ajax处理服务器返回的三种数据类型方法

ajax处理服务器返回的三种数据类型方法:这篇文章主要介绍了ajax如何处理服务器返回的三种数据类型,具有一定的参考和学习ajax的价值,对ajax感兴趣的小伙伴们可以参考一下其原理很简单,结构上基本不变,只是改变处理返回数据的方式.1.Text/HTML格式 这种返回类型处理很简单,直接就当作字符串用就行
推荐度:
导读ajax处理服务器返回的三种数据类型方法:这篇文章主要介绍了ajax如何处理服务器返回的三种数据类型,具有一定的参考和学习ajax的价值,对ajax感兴趣的小伙伴们可以参考一下其原理很简单,结构上基本不变,只是改变处理返回数据的方式.1.Text/HTML格式 这种返回类型处理很简单,直接就当作字符串用就行


这篇文章主要介绍了ajax如何处理服务器返回的三种数据类型,具有一定的参考和学习ajax的价值,对ajax感兴趣的小伙伴们可以参考一下

其原理很简单,结构上基本不变,只是改变处理返回数据的方式.

1.Text/HTML格式
这种返回类型处理很简单,直接就当作字符串用就行了.为了方便使用,封装成如下函数:

/**
 * @function 利用ajax动态交换数据(Text/HTML格式)
 * @param url 要提交请求的页面
 * @param jsonData 要提交的数据,利用Json传递
 * @param getMsg 这个函数可以获取到处理后的数据
 */
function ajaxText(url,jsonData,getMsg)
{
 //创建Ajax对象,ActiveXObject兼容IE5,6
 var oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
 //打开请求
 oAjax.open('POST',url,true);//方法,URL,异步传输
 //发送请求
 var data = '';
 for(var d in jsonData) //拼装数据
 data += (d + '=' +jsonData[d]+'&');
 oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 oAjax.send(data);
 //接收返回,当服务器有东西返回时触发
 oAjax.onreadystatechange = function ()
 {
 if(oAjax.readyState == 4 && oAjax.status == 200)
 {
 if(getMsg) getMsg(oAjax.responseText);
 }
 }
}

服务器端返回数据格式如下:
例如:

//返回的是xml格式
//header("Content-Type:text/xml;charset=utf-8");
//返回的是text或Json格式
header("Content-Type:text/html;charset=utf-8");
//禁用缓存,是为了数据一样的前提下还能正常提交,而不是缓存数据
header("Cache-Control:no-cache");
$username = $_POST['username']; //获取用户名
if(empty($username))
 echo '请输入用户名';
else if($username == 'acme')
 echo '用户名已被注册';
else
 echo '用户名可用';

调用格式如下:

url = 'abc.php';
var jsonData={username:'acme',passw:'acme'};
ajaxText(url,jsonData,getMsg);
function getMsg(msg)
{
 //do something
}

2.XML格式

返回的是一个XML DOM对象,解析其中的数据就类似于HTML DOM 编程. 比如通过name获取标签对象(数组形式),再从该数组中获取需要的标签对象,再从标签对象中获取文本值.
函数如下:

/**
 * @function 利用ajax动态交换数据(XML格式)
 * @param url 要提交请求的页面
 * @param jsonData 要提交的数据,利用Json传递
 * @param tagName 要获取值的标签名
 * @param getMsg 这个函数可以获取到处理后的数据
 */
function ajaxXML(url,jsonData,tagName,getMsg)
{
 //创建Ajax对象,ActiveXObject兼容IE5,6
 var oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
 //打开请求
 oAjax.open('POST',url,true);//方法,URL,异步传输
 //发送请求
 var data = '';
 for(var d in jsonData) //拼装数据
 data += (d + '=' +jsonData[d] + '&');
 oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 oAjax.send(data);
 //接收返回,当服务器有东西返回时触发
 oAjax.onreadystatechange = function ()
 {
 if(oAjax.readyState == 4 && oAjax.status == 200)
 {
 var oXml = oAjax.responseXML; //返回的是一个XML DOM对象
 var oTag = oXml.getElementsByTagName(tagName);
 var tagValue = oTag[0].childNodes[0].nodeValue;
 if(getMsg)getMsg(tagValue);
 }
 }
}

服务器端返回数据格式如下:
例如:

//返回的是xml格式
header("Content-Type:text/xml;charset=utf-8");
//返回的是text或Json格式
//header("Content-Type:text/html;charset=utf-8");
//禁用缓存,是为了数据一样的前提下还能正常提交,而不是缓存数据
header("Cache-Control:no-cache");
$username = $_POST['username']; //获取用户名
if(empty($username))
 echo '<user><mes>请输入用户名</mes></user>'; //这些标签可以自定义
else if($username == 'acme')
 echo '<user><mes>用户名已被注册</mes></user>';
else
 echo '<user><mes>用户名可用</mes></user>';

调用格式如下:

3.返回json

函数如下:

/**
 * @function 利用ajax动态交换数据(Text/HTML格式),但是返回的是Json类型的文本数据
 * @param url 要提交请求的页面
 * @param jsonData 要提交的数据,利用Json传递
 * @param getMsg 这个函数可以获取到处理后的数据
 */
function ajaxJson(url,jsonData,getMsg)
{
 //创建Ajax对象,ActiveXObject兼容IE5,6
 var oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
 //打开请求
 oAjax.open('POST',url,true);//方法,URL,异步传输
 //发送请求
 var data = '';
 for(var d in jsonData) //拼装数据
 data += (d + '=' +jsonData[d] + '&');
 oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 oAjax.send(data);
 //接收返回,当服务器有东西返回时触发
 oAjax.onreadystatechange = function ()
 {
 if(oAjax.readyState == 4 && oAjax.status == 200)
 {
 var json = eval('('+oAjax.responseText+')');//把传回来的字符串解析成json对象
 if(getMsg)getMsg(json);
 }
 }
}

服务器端返回数据格式如下:

例如:

//返回的是xml格式
//header("Content-Type:text/xml;charset=utf-8");
//返回的是text或Json格式
header("Content-Type:text/html;charset=utf-8");
//禁用缓存,是为了数据一样的前提下还能正常提交,而不是缓存数据
header("Cache-Control:no-cache");
$username = $_POST['username']; //获取用户名
if(empty($username))
 echo '{"mes":"请输入用户名"}';
else if($username == 'acme')
 echo '{"mes":"用户名已被注册"}';
else
 echo '{"mes":"用户名可用"}';

调用格式如下:

为了方便使用,可以把三个函数合并.合并后的函数如下:

文档

ajax处理服务器返回的三种数据类型方法

ajax处理服务器返回的三种数据类型方法:这篇文章主要介绍了ajax如何处理服务器返回的三种数据类型,具有一定的参考和学习ajax的价值,对ajax感兴趣的小伙伴们可以参考一下其原理很简单,结构上基本不变,只是改变处理返回数据的方式.1.Text/HTML格式 这种返回类型处理很简单,直接就当作字符串用就行
推荐度:
标签: 格式 方法 数据
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top