今回は、どのような データ型 が 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>';呼び出し形式は次のとおりです:
var url = 'abc.php';
var jsonData = {username:'acme'};
ajaxXML(url,jsonData,'mes',getMsg);
function getMsg(msg)
{
//do something
}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":"用户名可用"}';呼び出し形式は次のとおりです:
url = 'abc.php';
var jsonData={username:'acme',passw:'acme'};
ajaxText(url,jsonData,getMsg);
function getMsg(msg)
{
//do something
}使いやすくするために、3 つの関数をマージできます。マージされた関数は次のとおりです:
/**
* @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);
}
}
}
}のケースを読んだ後は、メソッドをマスターできたと思います。この記事のさらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事にご注目ください。
推奨読書:
以上がAjax はサーバーから返されるデータ型を処理できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
