비동기 요청을 보내는 Ajax 구현(그래픽 튜토리얼)
- 亚连원래의
- 2018-05-21 17:18:591481검색
이 글에서는 비동기 요청을 보내는 ajax를 쉽게 구현하는 방법을 주로 설명합니다. 관심 있는 친구들이 참고할 수 있습니다.
ajax가 비동기 요청을 보내는데 구체적인 내용은 다음과 같습니다
1단계 (XMLHttpRequest 가져오기)
ajax는 실제로 XMLHttpRequest 객체 하나만 배우면 됩니다. 이를 마스터하면 ajax를 마스터하게 됩니다!!!
1. XMLHttpRequest 가져오기
대부분의 브라우저는 다음을 지원합니다: var xmlHttp=new XMLHttpRequest( );
IE6.0:var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
IE5.0은 이전 버전의 IE에서 작성되었습니다:var XMLHttpRequest 객체를 생성하는 함수
function createXMLHttpRequest(){
try{
return new XMLHttpRequest();
} catch(e){
try{
return new ActiveXObject(“Msxml2.XMLHTTP”);
}catch(e){
try{
return new ActiveXObject(“Microsoft.XMLHTTP”);
}catch(e){
alert(“哥们儿,你用的是什么浏览器啊?”);
throw e;
}
}
}
}
두 번째 단계
(열기 서버와의 연결)xmlHttp.open(): 서버와의 연결을 여는 데 사용되며 세 가지 매개변수가 필요합니다:
요청 방법: GET 및 POST 가능요청 URL: 서버측 리소스를 지정합니다. 예: /day23_1/AServlet
요청이 비동기인지 여부: true이면 비동기 요청을 보내는 것을 의미하고, 그렇지 않으면 동기 요청을 보내는 것을 의미합니다
xmlHttp.open("GET" ,"/day23_1/AServlet",true);//For 예시
단계
xmlHttp.send(null): 지정하지 않으면 일부 브라우저에서는 보내지 못할 수 있습니다!
매개변수: 요청 본문 내용인 경우! GET 요청의 경우 null을 제공해야 합니다.
POST 요청인 경우 다음과 같이
xmlHttp.send("username=zhangSan&password=123");
4단계:
xmlHttp 객체의 이벤트에 리스너를 등록합니다: onreadystatechange x mlHttp 개체에는 총 5가지 상태가 있습니다.
0: 초기화가 완료되지 않았으며 XMLHttpRequest 개체가 생성되었을 뿐이며 아직 open() 메서드가 호출되지 않았습니다.
1: 요청이 시작되었으며 열려 있습니다. () 메소드가 호출되었으나 아직 send() 메소드가 호출되지 않은 경우
3: 서버 응답 읽기 시작
4: 서버 응답 읽기 종료 (보통 우리는 마지막 상태만 관심있습니다!!!)
xmlHttp 개체의 상태를 가져옵니다.
var state = xmlHttp.readyState;//可能是0、1、2、3、4서버 응답의 상태 코드를 가져옵니다. (200: 성공 304: 상태가 변경되지 않았습니다. 404 500 : 서버 오류)
var status=xmlHttp.status;//例如200、404、500서버 응답 내용 가져오기
var content=xmlHttp.responseText;//得到服务器的响应的文本格式的内容(这更通用) var content=xmlHttp.responseXML;//得到服务器的响应的xml响应的内容,它是document对象了!
그래서 리스너는 이렇게 작성해야 합니다
xmlHttp.onreadystatechange = function(){
//xmlHttp的5种状态都会调用本方法
if(xmlHttp.readyState ==4 && xmlHttp.status == 200){
//双重判断:判断是否为4状态,而且还要判断是否为200
var text=xmlHttp.responseText;
}
};
위 내용은 제가 컴파일한 내용입니다. 여러분. 앞으로 모든 사람에게 도움이 되기를 바랍니다. 관련 기사:
Ajax는 이미지 업로드, 배경에 저장 및 읽는 예제를 구현합니다(그래픽 튜토리얼)
Struts2와 Ajax 데이터 상호 작용(그래픽 튜토리얼)
Ajax 요청은 다음과 같습니다. 성공적으로 전송되었지만 성공하지 못한 솔루션(그림 및 텍스트 튜토리얼)
위 내용은 비동기 요청을 보내는 Ajax 구현(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!