Ajax 애플리케이션의 실제 분석

이번에는 ajax 적용에 대한 실제 분석을 가져오겠습니다. ajax 적용 시 주의사항은 무엇인가요?

AJAX는 "Asynchronous Javascript And XML"(Asynchronous JavaScript and XML)의 약자로, 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술을 의미합니다.

AJAX = 비동기 JavaScript 및 XML(표준 범용 마크업 언어의 하위 집합).

AJAX는 빠르고 동적인 웹 페이지를 만드는 기술입니다.

AJAX를 사용하면 백그라운드에서 서버와 소량의 데이터를 교환하여 웹페이지를 비동기적으로 업데이트할 수 있습니다. 이는 전체 페이지를 다시 로드하지 않고도 웹페이지의 일부를 업데이트할 수 있음을 의미합니다.

AJAX를 사용하지 않는 기존 웹페이지에서는 콘텐츠를 업데이트해야 하는 경우 전체 웹페이지를 다시 로드해야 합니다.

•"xml": jQuery로 처리할 수 있는 XML 문서를 반환합니다.

•"html": 일반 텍스트 HTML 정보를 반환합니다. 포함된 스크립트 태그는 DOM에 삽입될 때 실행됩니다.

•"script": 일반 텍스트 JavaScript 코드를 반환합니다. 결과는 자동으로 캐시되지 않습니다. "cache" 매개변수가 설정되지 않은 경우. 참고: 원격 요청(동일한 도메인이 아닌)을 수행하는 경우 모든 POST 요청은 GET 요청으로 변환됩니다. (DOM 스크립트 태그를 사용하여 로드하기 때문입니다.)

•"json": JSON 데이터를 반환합니다.

•"jsonp": JSONP 형식. "myurl?callback=?"과 같은 JSONP 형식을 사용하여 함수를 호출하면 jQuery는 ?콜백 함수를 실행하기 위해 자동으로 ?를 올바른 함수 이름으로 바꿉니다.

•"text": 일반 텍스트 문자열을 반환합니다.

1. 프런트엔드에서 문자열 변수를 전달하고 백그라운드에서 문자열 변수를 반환합니다(json이 아닌 형식)

여기서는 잘못된 문제를 해결하기 위해 Ajax 데이터 전송에 나타나는 한자는 문자열이 전달되기 전에

javascript 함수 escape()를 사용하여 한자 문자열을 인코딩하고 unescape() 함수를 사용하여 반환된 문자열을

디코딩하여 한자가 정상적으로 표시될 수 있습니다. 물론, 배경 PHP 코드는 중국어 문자열이 왜곡되지 않도록 헤더 파일도 추가합니다. 다양한 백엔드 코드는 다음과 같이

한자

잘못된 문자 문제를 해결합니다.

PHP:header('Content-Type: text/html;charset=GB2312');

　

Javascript 코드:

$(function(){
var my_data="前台变量";
my_data=escape(my_data)+"";//编码，防止汉字乱码
$.ajax({
url: "ajax_php.php",
type: "POST",
data:{trans_data:my_data},
//dataType: "json",
error: function(){
alert('Error loading XML document');
},
success: function(data,status){//如果调用php成功
alert(unescape(data));//解码，显示汉字
}
});
});

　

PHP 코드 ：

header('Content-Type:text/html; charset=gb2312');//使用gb2312编码，使中文不会变成乱码
$backValue=$_POST['trans_data'];
echo $backValue."+后台返回";

2. 여러 개의 1차원 배열을 프런트 엔드에 전달하고 백그라운드에서 문자열 변수(비json 형식)를 반환합니다.

비json 형식에서 배경은 문자열만 반환합니다. 백그라운드에서 반환하려는 경우 배열은 json 형식일 수 있으며 이에 대해서는 이 문서의 뒷부분에서 자세히 소개합니다.

Javascript 코드:

$(function(){
var my_data=new Array();
var my_data1=new Array();
my_data[0]=0;
my_data[1]=1;
my_data[2]=2;
my_data1[0]=10;
my_data1[1]=11;
my_data1[2]=12;
$.ajax({
url: "ajax_php.php",
type: "POST",
data:{trans_data:my_data,trans_data1:my_data1},
//dataType: "json",
error: function(){
alert('Error loading XML document');
},
success: function(data,status){//如果调用php成功
alert(data);
}
});
});

PHP 코드:

//读取第一个数组
$backValue="trans_data:";
$trans=$_POST['trans_data'];
foreach($trans as $value)
{
$backValue=$backValue." ".$value;
}
//读取第二个数组
$backValue=$backValue." , trans_data1:";
$trans=$_POST['trans_data1'];
foreach($trans as $value)
{
$backValue=$backValue." ".$value;
}
echo $backValue;

3 프런트엔드는 여러 개의 1차원 배열을 전달하고 배경은 2차원 배열(json 형식)

을 반환합니다. 자바스크립트 코드:

$(function(){
var my_data=new Array();
var my_data1=new Array();
my_data[0]=0;
my_data[1]=1;
my_data[2]=2;
my_data1[0]=10;
my_data1[1]=11;
my_data1[2]=12;
$.ajax({
url: "ajax_php.php",
type: "POST",
data:{trans_data:my_data,trans_data1:my_data1},
dataType: "json",
error: function(){
alert('Error loading XML document');
},
success: function(data){//如果调用php成功
}
alert(back);
}
});
});

　PHP 코드:

header('Content-Type:text/html; charset=gb2312');//使用gb2312编码，使中文不会变成乱码
$backValue=array();
$backValue[0]=$_POST['trans_data'];
$backValue[1]=$_POST['trans_data1'];
echo json_encode($backValue);

4. 프런트 엔드에 1차원 배열과 2차원 배열을 전달하고, 백그라운드에서 2차원 배열(json 형식)을 반환합니다.

Javascript 코드:

$(function(){
var my_data=new Array();
var my_data1=new Array();
var my_data2=new Array();
my_data[0]=0;
my_data[1]=1;
my_data[2]=2;
my_data1[0]=10;
my_data1[1]=11;
my_data1[2]=12;
my_data2[0]=my_data;
my_data2[1]=my_data1;
$.ajax({
url: "ajax_php.php",
type: "POST",
data:{trans_data:my_data,trans_data1:my_data1,trans_data2:my_data2},
dataType: "json",
error: function(){
alert('Error loading XML document');
},
success: function(data){//如果调用php成功
}
alert(back);
}
});
});

PHP 코드:

header('Content-Type:text/html; charset=gb2312');//使用gb2312编码，使中文不会变成乱码
$backValue=array();
$backValue=$_POST['trans_data2'];
$backValue[2]=$_POST['trans_data'];
$backValue[3]=$_POST['trans_data1'];
echo json_encode($backValue);

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

AjaxToolKit에서 등급 제어를 사용하는 방법

Ajax에서 ReadyState 및 상태를 사용하는 방법

위 내용은 Ajax 애플리케이션의 실제 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!