1. ajax 기술의 배경
ajax는 부인할 수 없습니다. 기술 ajax의 인기는 Google의 활발한 홍보 덕분입니다. ajax 기술이 Google Earth, Google 제안 및 Gmail에서 광범위하게 적용되었기 때문입니다. 🎜>아약스가 탄생했습니다. 이는 또한 Microsoft를 극도로 당황스럽게 만듭니다. 왜냐하면 Microsoft는 이미 1997년에 ajax에서 핵심 기술을 개발했고, 1999년 IE5가 출시되었을 때 XmlHttpRequest Object 를 지원하기 시작했기 때문입니다. Microsoft는 이전에 MSDN 웹 사이트 메뉴의 일부 응용 프로그램과 같은 일부 제품에 ajax를 적용하기 시작했습니다. 안타깝게도, 알 수 없는 이유로 마이크로소프트는 ajax의 핵심 기술을 개발한 이후 그 잠재력을 깨닫지 못하고 개발, 홍보하지 못하고 보류해 버렸습니다. 저는 개인적으로 이것이 매우 이상하다고 생각합니다. 왜냐하면 Microsoft의 자원과 전략적 비전으로 인해 ajax 기술의 전망을 볼 수 없을 가능성이 있기 때문입니다. 당시 주요 경쟁자인 Netscape가 사라졌다는 것뿐입니다. 마비되고 느려지게 만든 것은 결국 마이크로소프트에 대한 IBM의 전략적 실수와 같은 거대 기업들도 낮잠을 자고 있기 때문이다. ajax에서 현재 경쟁사인 Google이 선두 위치를 차지하게 된 것은 바로 이러한 실수 때문이었습니다. 사실 Google의 현재 ajax 기술 리더십은 Microsoft의 손이 닿지 않는 수준입니다. ajax의 단점을 설명할 때. 이제 마이크로소프트도 이 문제를 인지하고 .NET2에서도 제공되는 자체 ajax 프레임워크 아틀라스를 출시하는 등 ajax 분야에서 따라잡기 시작했습니다. .0 비동기 콜백, 즉 ICallBack 인터페이스를 구현하는 데 사용되는 인터페이스입니다. 그렇다면 Microsoft가 ajax에서 뒤처지는 것에 대해 왜 그토록 긴장하는 걸까요? 이제 ajax 기술의 심오한 의미를 분석해 보겠습니다.
2. ajax
ajax란 " "Asynchronous Javascript AND XML"은 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술을 의미합니다. ajax에는 XHTML 및 CSS 표준을 사용하여 웹 페이지를 구현하고, DOM을 사용하여 동적 표시 및 상호 작용을 구현하고, XML을 사용하여 데이터 교환 및 처리를 수행하고, 마지막으로 javaScript를 사용하여 모든 데이터를 바인딩하고 처리하는 작업이 포함됩니다. ajax는 서버의 작업 부하 중 일부를 클라이언트에 위임하고, 클라이언트의 특정 기능을 사용하여 데이터를 처리하며, 사용자가 페이지 새로 고침으로 인해 더 이상 긴 브라우저 지연을 겪지 않습니다. 잘못된 결과를 비워두거나 더 이상 응답하지 않으면 사용자에게 최상의 경험을 제공합니다. ajax는 표준화된 XML을 기반으로 하며 널리 사용되고 지원되며 유지 관리 및 수정이 쉽습니다. ajax는 외부 데이터를 호출할 때 매우 편리합니다. 페이지와 데이터를 분리해야 할 경우 ajax를 사용하여 데이터를 얻을 수 있습니다.
3. ajax기술 포함
ajax
는 새로운 기술이 아니라 여러 원천기술의 결합이라는 사실은 누구나 알고 있는 사실입니다. 이는 다음과 같은 기술로 구성됩니다.
1. CSS와 XHTML을 사용하여 표현합니다.
2. 상호 작용 및 동적 표시를 위해 DOM 모델을 사용합니다.
3. XMLHttpRequest를 사용하여 서버와 비동기적으로 통신합니다. 4. javaS스크립트를 사용하여 바인딩하고 호출합니다.
4. ajax원리 및 XmlHttpRequest객체
ajax의 원칙은 단순히 XmlHttpRequest 객체를 통해 서버에 비동기 요청을 보내고, 서버에서 데이터를 얻은 다음 자바스크립트를 사용하는 것입니다. DOM을 작동하고 페이지를 업데이트합니다. 여기서 가장 중요한 단계는 서버에서 요청 데이터를 얻는 것입니다. 이 과정과 원리를 이해하려면 XMLHttpRequest에 대한 이해가 필요합니다. XMLHttpRequest는 ajax의 핵심 메커니즘으로 IE5에서 처음 도입되었으며 비동기 요청을 지원하는 기술입니다. 간단히 말해서, JavaScript는 사용자를 차단하지 않고 적시에 서버에 요청하고 응답을 처리할 수 있습니다. 새로 고침 효과를 얻지 못합니다. 아래 그림을 보면 ajax의 작동 원리를 더 잘 이해할 수 있습니다
XMLHttpRequest 작동 방식.
XMLHttpRequest 객체 의 속성은 다음과 같습니다.
onreadystatechange 상태가 변경될 때마다 트리거되는 이벤트에 대한 이벤트 핸들러입니다.
responseText 서버 프로세스에서 데이터를 문자열 형식으로 반환합니다.
responseXML DOM 호환 문서 데이터 객체 가 서버 프로세스에서 반환되었습니다.
status 공통 404(찾을 수 없음) 및 200(준비) 등 서버에서 반환된 숫자 코드
statusText 상태 코드에 수반되는 문자열 정보
객체status value0(초기화되지 않음)
객체 이 생성되었지만 초기화되지 않았습니다(open 메서드가 아직 호출되지 않음)
1(초기화됨) 오브젝트가 생성되었지만 아직 전송 메소드가 호출되지 않았습니다.
2 (데이터 전송 중) 전송 메소드가 호출되었지만 현재 상태 및 http 헤더 알 수 없음
3 (데이터를 전송하는 중) 응답 및 http 헤더가 불완전하여 responseBody를 통해 데이터의 일부를 가져오면 오류가 발생합니다. 및 responseText
4 (완료) 데이터 수신이 완료되었습니다. 이때 완전한 응답 데이터는 responseXml 및 responseText
를 통해 얻을 수 있습니다. 브라우저 간의 차이로 인해 XMLHttpRequestObjects를 생성하려면 다른 방법이 필요할 수 있습니다. 이러한 차이는 주로 IE와 다른 브라우저 사이에 반영됩니다. 다음은 XMLHttpRequest 객체
<script language="javascript">
var xmlHttp = null;
//创建XMLHttpRequest<strong>对象
function GetXmlHttpRequest()
{
var xmlHttp = null;
try
{
xmlHttp = new XMLHttpRequest(); //对于firefox等浏览器
}
catch(e)
{
try
{
xmlHttp = new ActiveXObject("Msxm12.XMLHTTP"); //对于IE浏览器
}
catch(e)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
xmlHttp = false;
}
}
}
//返回XMLHttpRequest<strong>对象
return xmlHttp;
}
//发出异步请求
function sendRequest()
{
//获取页面表单提交的文本框的值
var prov_name = document.getElementById("province").value;
if ((prov_name == null) || (prov_name == ''))
return;
xmlHttp = GetXmlHttpRequest();
if (xmlHttp == null)
{
alert("浏览器不支持xmlHttpRequset!");
return;
}
//构建请求的URL地址
var url = '18-5.php';
url = url + "?prov=" + prov_name;
//使用get()方法打开一个到url的链接，为发出的请求做准备
xmlHttp.open("GET",url,true);
//设置一个函数 ，当服务器完成请求后调用，该函数名为updatePage
xmlHttp.onreadystatechange = updatePage;
//发送请求（GET提交方式） <span style="font-family: 宋体;">POST提交方式 <span style="font-family: 宋体;">xmlHttp.send(url);
xmlHttp.send(null);
}
//回调函数 处理服务器响应
function updatePage()
{
//判断xmlHttpRequset()<strong>对象的readyState值是否等于4
if(xmlHttp.readyState == 4 && xmlHttp.status ==200)
{
<span style="white-space: pre;"> //获取服务器返回的响应数据
var response = xmlHttp.responseText;
document.getElementById('city').innerHTML = response;
}
}
</script>XMLHttpRequest의 작업 흐름에서 보면 XMLHttpRequest는 서버에 요청을 보내는 데 완전히 사용되며 그 역할도 다음으로 제한되어 있음을 알 수 있습니다. 그러나 그 역할은 전체 ajax 구현의 핵심입니다. ajax는 요청하고 요청에 응답하는 두 개의 프로세스에 지나지 않기 때문입니다. 이는 전적으로 클라이언트 측 기술입니다. XMLHttpRequest는 서버와 클라이언트 간의 통신 문제를 처리하므로 이것이 매우 중요합니다.
서버는 일반 텍스트 스트림을 반환하는 데이터 인터페이스로 생각할 수 있습니다. 텍스트 스트림은 XML 형식일 수도 있고, Html일 수도 있고, Javascript 코드일 수도 있고, 단순한 문자열일 수도 있습니다. 이때 XMLHttpRequest는 서버에서 이 페이지를 요청하고 서버는 텍스트 결과를 페이지에 기록합니다. 이는 클라이언트가 결과를 비동기적으로 얻은 후 직접 작성하지 않는다는 점입니다. 페이지에 표시되지만 먼저 자바스크립트로 처리된 다음 페이지에 표시됩니다. Magicajax 등과 같은 많은 인기 있는 ajax 컨트롤은 DataSet 및 기타 데이터 유형을 반환할 수 있으며 본질적으로 이 프로세스의 결과를 캡슐화할 뿐입니다. , 그다지 큰 차이는 아닙니다.
5. ajax
의 장점과 단점 🎜 >ajax의 장점:1. 가장 큰 점은 페이지가 새로고침되지 않고 페이지 내 서버와 통신하여 사용자에게 매우 좋은 경험을 제공한다는 것입니다.
2. 비동기 모드를 사용하여 사용자의 작업을 방해하지 않고 서버와 통신하고 더 빠른 응답 기능을 갖습니다.
3. 기존에 서버에서 부담했던 작업 중 일부를 클라이언트에 이관하고, 클라이언트의 유휴 용량을 활용하여 처리할 수 있습니다. 이를 통해 서버의 부하와 대역폭 부담을 줄여 공간 및 대역폭 임대 비용을 절약할 수 있습니다. 그리고 서버의 부담을 줄이기 위해 ajax의 원칙은 "요청 시 데이터 가져오기"인데, 이는 중복된 요청과 응답으로 인해 발생하는 서버의 부담을 최소화할 수 있습니다. 4. 표준화되고 널리 지원되는 기술을 기반으로 플러그인이나 작은 프로그램을 다운로드할 필요가 없습니다. ajax의 단점: 1. ajax는 뒤로 버튼을 종료하여 브라우저의 뒤로 메커니즘을 파괴합니다. 뒤로 버튼은 표준 웹 사이트의 중요한 기능이지만 JavaScript에서는 제대로 작동하지 않습니다. 이는 ajax로 인해 발생하는 심각한 문제입니다. 사용자가 이전 작업으로 돌아가서 취소하려는 경우가 많기 때문입니다. 그렇다면 이 문제에 대한 해결책은 없을까? 대답은 '예'입니다. Gmail을 사용해 본 사람이라면 Gmail에서 사용되는 ajax 기술이 이 문제를 해결한다는 것을 알고 있습니다. Gmail로 돌아갈 수는 있지만 ajax를 변경할 수는 없습니다. 사용자가 기록에 액세스하기 위해 뒤로 버튼을 클릭할 때 숨겨진 IFRAME을 만들거나 사용하여 페이지의 변경 사항을 재현하는 서툴지만 효과적인 방법입니다. (예를 들어 사용자가 Google에서 검색할 때
지도에서 다시 클릭하면 숨겨진 IFRAME에서 검색한 다음 검색 결과를 ajax 요소에 반영하여 애플리케이션 상태를 당시의 상태로 복원합니다. ) 그러나 이 문제는 해결 가능하지만 이로 인해 발생하는 개발 비용은 매우 높으며 이는 ajax 프레임워크에서 요구하는 빠른 개발에 반합니다. 이는 ajax로 인한 매우 심각한 문제입니다. 2. 보안 문제 6. ajax 目前我们采用的比较多的ajax框架主要有ajax.dll,ajaxpro.dll,magicajax.dll 以及微软的atlas框架。ajax.dll和ajaxpro.dll这两个框架差别不大，而magicajax.dll只是封装得更厉害一些，比如说它可以直接返回DataSet数据集，前面我们已经说过，ajax返回的都是字符串，magicajax只是对它进行了封装而已。但是它的这个特点可以给我们带来很大的方便，比如说我们的页面有一个列表，而列表的数据是不断变化的，那么我们可以采用magicajax来处理，操作很简单，添加magicajax之后，将要更新的列表控件放在magicajax的控件之内，然后在pageload里面定义更新间隔的时间就ok了，atlas的原理和magicajax差不多。但是，需要注意的一个问题是，这几种框架都只支持IE，没有进行浏览器兼容方面的处理，用反编译工具察看他们的代码就可以知道。 七、ajax简单示例 示例实现的功能是当用户在WEB页面的下拉列表框中选择某个省的名称时，会在页面上显示该省的省会名称，而此时页面并不刷新。省会名称将由服务端传送至浏览器。这个示例包含三个部分（这里的服务端是PHP程序） 1、HTML页面，包含下拉列表框和要显示省会名称的位置 2、JavaScript程序，实现发送请求和处理响应。 3、服务端的PHP程序，用来接受浏览器的请求，向浏览器传送结果数据。 （客户端）HTML页面：
우리 대부분은 ajax에 주목하기 때문에 우리가 제공하는 이점에는 향상된 사용자 경험이 포함됩니다. ajax로 인한 단점은 무시되었습니다. 아래에서 설명하는 ajax의 결함은 모두 이에 의한 것이다.
기술은 IT 기업에도 보안을 가져온다. ajax 기술은 기업 데이터에 대한 직접적인 채널을 구축하는 것과 같습니다. 이를 통해 개발자는 이전보다 더 많은 데이터와 서버 로직을 실수로 노출할 수 있습니다. ajax의 논리는 클라이언트 측 보안 스캐닝 기술에서 숨겨져 해커가 원격 서버에서 새로운 공격을 수행할 수 있습니다. 또한 ajax는 크로스 사이트 스크립팅 공격, SQL 주입 공격, 자격 증명 기반 보안 취약점 등 일부 알려진 보안 취약점을 피하기도 어렵습니다. 등.
3. 검색 인덱스 엔진 지원이 상대적으로 약합니다.
4. 프로그램의 예외 메커니즘을 삭제했습니다. 적어도 현재의 관점에서 볼 때 ajax.dll 및 ajaxpro.dll과 같은 ajax 프레임워크는 프로그램의 예외 메커니즘을 파괴합니다. 이 문제에 대해서는 개발 과정에서 접한 적이 있는데, 확인해보니 인터넷상에 관련 소개가 거의 없는 것 같습니다. 나중에 ajax와 전통적인 양식 제출 모드를 사용하여 데이터 조각을 삭제하는 실험을 직접 수행했는데... 디버깅에 큰 어려움이 있었습니다.
5. 이 밖에도 URL 본래의 의도에 어긋나거나 리소스 위치 지정을 위반하는 등의 문제도 있습니다. 예를 들어, ajax 기술을 사용한다면 URL 주소 아래에 보이는 것과 이 URL 주소 아래에 보이는 것이 다를 수도 있습니다. 이는 자원 포지셔닝의 원래 의도에 어긋납니다.
6. 현재 일부 휴대용 장치(휴대폰, PDA 등)는 ajax를 지원하지 않습니다. Ajax 기술은 현재 웹사이트에서 지원되지 않습니다. 물론 이 문제는 우리와 관련이 없습니다.
除了这几种框架之外，我们平时用到的比较多的方式是自己创建xmlHttpRequest对象，这种方式和前面的几种框架相比更具有灵活性。另外，在这里还提一下aspnet2.0自带的异步回调接口，它和ajax一样也可以实现局部的无刷新，但它的实现实际上也是基于xmlhttprequest对象的，另外也是只支持IE，当然这是微软的一个竞争策略。
<meta http-equiv="Content-Type" c charset='utf-8"'>
<title>
<strong>ajax</strong>简单应用</title>
<script language="javascript">
var xmlHttp = null;
//创建XMLHttpRequest<strong>对象
function GetXmlHttpRequest()
{
var xmlHttp = null;
try
{
xmlHttp = new XMLHttpRequest(); //对于firefox等浏览器
}
catch(e)
{
try
{
xmlHttp = new ActiveXObject("Msxm12.XMLHTTP"); //对于IE浏览器
}
catch(e)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
xmlHttp = false;
}
}
}
//返回XMLHttpRequest<strong>对象
return xmlHttp;
}
//发出异步请求
function sendRequest()
{
//获取页面表单提交的文本框的值
var prov_name = document.getElementById("province").value;
if ((prov_name == null) || (prov_name == ''))
return;
xmlHttp = GetXmlHttpRequest();
if (xmlHttp == null)
{
alert("浏览器不支持xmlHttpRequset!");
return;
}
//构建请求的URL地址
var url = '18-5.php';
url = url + "?prov=" + prov_name;
//使用get()方法打开一个到url的链接，为发出的请求做准备
xmlHttp.open("GET",url,true);
//设置一个函数 ，当服务器完成请求后调用，该函数名为updatePage
xmlHttp.onreadystatechange = updatePage;
//发送请求
xmlHttp.send(null);
}
//回调函数 处理服务器响应
function updatePage()
{
if(xmlHttp.readyState!= 4)
{
document.getElementById("city").innerHTML="数据正在加载...";
}
//判断xmlHttpRequset()<strong>对象的readyState值是否等于4
if(xmlHttp.readyState == 4 && xmlHttp.status ==200)
{
//获取服务器返回的响应数据
var response = xmlHttp.responseText;
document.getElementById('city').innerHTML = response;
}
}
</script>
<h3>请选择一个省（自治区）<h3>
</h3>
</h3><?php $city_arr = array(
'ah'=>'合肥',
'fj'=>'福州',
'gs'=>'兰州',
'gx'=>'南宁',
'gd'=>'广州',
'gz'=>'贵阳',
'hn'=>'海口',
'hb'=>'石家庄',
'hh'=>'郑州',
'hlg'=>'哈尔滨',
);
if (empty($_GET['prov']))
{
echo iconv("UTF-8", "UTF-8", '<font color="red">您还没有选择省（自治区）</font>'); //注意：你的PHP文件使用的是<strong>GB2312</strong>编码保存的话，那iconv('<strong>GB2312</strong>','UTF-8','<span style="font-family: 宋体;"><font color="red">您还没有选择省（自治区）</font></span><span style="font-family: 宋体;">');</span>
}
else
{
$prov = $_GET['prov'];
$city = $city_arr[$prov];
echo iconv("UTF-8", "UTF-8", '所选省（自治区）省会（首府）为：'.$city); <span style="font-family: 宋体;">//注意：你的PHP文件使用的是<strong>GB2312</strong>编码保存的话，那iconv('<strong>GB2312</strong>','UTF-8','</span><span style="font-family: 宋体;">所选省（自治区）省会（首府）为：'.$city</span><span style="font-family: 宋体;">);</span><span style="font-family: 宋体;">
</span> }
?>
以上就介绍了AJAX工作原理，包括了方面的内容，希望对PHP教程有兴趣的朋友有所帮助。
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
