This article mainly introduces how ajax handles the three data types returned by the server. It has certain reference and value for learning ajax. Friends who are interested in ajax can refer to it
The principle is very Simple, the structure is basically unchanged, but the way of processing the returned data is changed.
1.Text/HTML format
This return type is very simple to handle, just treat it as a character Just use it serially. For convenience of use, it is encapsulated into the following function:
/**
* @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);
}
}
}The server-side return data format is as follows:
For example :
//返回的是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 '用户名可用';The calling format is as follows:
url = 'abc.php';
var jsonData={username:'acme',passw:'acme'};
ajaxText(url,jsonData,getMsg);
function getMsg(msg)
{
//do something
}2.XML format
returns an XML DOM object, and parsing the data in it is similar to HTML DOM programming. For example, getting the tag object through name ( Array form), then obtain the required label object from the array, and then obtain the text value from the label object.
The function is as follows:
/**
* @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);
}
}
}The data format returned by the server is as follows:
For example:
//返回的是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>';The calling format is as follows:
var url = 'abc.php';
var jsonData = {username:'acme'};
ajaxXML(url,jsonData,'mes',getMsg);
function getMsg(msg)
{
//do something
}3. Return json
The function is as follows:
/**
* @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);
}
}
}The data format returned by the server is as follows:
For example:
//返回的是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":"用户名可用"}';The calling format is as follows:
url = 'abc.php';
var jsonData={username:'acme',passw:'acme'};
ajaxText(url,jsonData,getMsg);
function getMsg(msg)
{
//do something
}For ease of use, the three functions can be combined .The merged function is as follows:
/**
* @function 利用ajax动态交换数据
* @param url 要提交请求的页面
* @param jsonData 要提交的数据,利用Json传递
* @param getMsg 这个函数可以获取到处理后的数据
* @param type 接受的数据类型,text/xml/json
* @param tagName type = xml 的时候这个参数设置为要获取的文本的标签名
* @return 无
*/
function ajax(url,jsonData,getMsg,type,tagName)
{
//创建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(type == 'text')
{
if(getMsg) getMsg(oAjax.responseText);
}
else if(type == 'json')
{
var json = eval('('+oAjax.responseText+')');//把传回来的字符串解析成json对象
if(getMsg)getMsg(json);
}
else if(type == 'xml')
{
var oXml = oAjax.responseXML; //返回的是一个XML DOM对象
var oTag = oXml.getElementsByTagName(tagName);
var tagValue = oTag[0].childNodes[0].nodeValue;
if(getMsg)getMsg(tagValue);
}
}
}
}The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope that Please support PHP Chinese website.
Related recommendations:
Detailed example of jQuery Ajax using Token to verify identity
Interaction between front-end ajax and back-end Detailed explanation
Native ajax waterfall flow demo example sharing
The above is the detailed content of Ajax processing three data types returned by the server. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
