Ajax
이 단어는 많이 들어봤지만 실제로 접해본 적은 없어서 여기서 조금 배워보겠습니다.
Ajax 기술의 혁신은 기존의 "요청-대기-응답-새로 고침-반환" 모드를 개선한 것입니다. 사용자는 정보가 반환되기 전에 작업을 계속할 수 있으며 현재 페이지는 새로 고쳐지지 않습니다. 요구. 이는 상호작용성을 크게 향상시킵니다.
Ajax는 사실 하나의 기술이 아니라 여러 기술로 구성되어 있습니다. 가장 큰 특징 중 하나는 비동기적으로 전송하여 멀티스레드 서비스를 구현할 수 있다는 점입니다.
Ajax의 비동기 전송은 js의 XMLHttpRequst 개체에 의존하므로 먼저 시작하겠습니다.
XMLHttpRequest는 XMLHttp로 구성된 추상 개체이며 데이터 상호 작용에 사용됩니다. IE에서는 XMLHttpRequest가 ActiveX 컨트롤로 사용되고 FF Opera에서는 내장 js 객체로 사용됩니다.
XMLHttpRequest 객체의 캡슐화 코드 생성:
< script type="text/javascript">
var xmlHttp=false;
var headType=""
function createXmlRequest(){
if(window.ActiveObject) { // IE
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")
}catch(e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP) ");
}catch(e){
window.alert("XML 요청 생성 실패 " e);
}
}
}else if(window.XMLHttpRequest){ // FF
xmlHttp= new XMLHttpRequest();
}
if(!xmlHttp){
window.alert("XML 요청 생성 실패")
}
}
ReadyState 속성:
0=초기화되지 않음 1=초기화됨 2=데이터 전송 중 3=데이터 전송 진행 중 4=완료
responseText 속성:
1 , 2=responseText는 널 문자입니다. 문자열 3 = 수신 4 = 수신 완료
responseXML 속성:
send()를 실행한 후 올바른 xml 형식의 데이터가 반환되면 XMLHttpRequest를 사용하여 반환된 데이터를 받을 수 있습니다. responseXML은 반환 정보를 XML 문서 객체로 형식화할 수 있으며, 해당 정보가 포함되어 있지 않으면 null을 반환합니다.
status 속성:
send() 속성 이후에 status 속성을 사용하여 사물의 상태를 수신하고 읽을 수 있습니다. 이 속성은 ReadyState가 3 또는 4일 때만 사용할 수 있습니다. 그렇지 않으면 읽을 때 오류가 발생합니다. 상태. 일반적인 사항은 다음과 같습니다:
100=클라이언트는 요청을 계속해야 합니다. 200=트랜잭션 성공 400=잘못된 요청 403=요청이 허용되지 않음 404=파일, 쿼리 또는 URL을 찾을 수 없음 500=내부 서버 오류 502=서버 일시적으로 사용할 수 없습니다. 505=서버가 요청 헤더에 지정된 HTTP 버전을 지원하지 않거나 거부합니다.
statusText 속성:
send() 메소드 이후 statusText를 통해 트랜잭션 상태를 읽습니다. statusText는 현재 HTTP 요청의 상태 라인을 반환합니다. 이 속성은 ReadyState가 3 4인 경우에만 사용할 수 있으며, 그렇지 않으면 오류가 발생합니다. .
onreadystatechange 이벤트:
이 이벤트의 속성 값이 변경될 때 수행되는 작업입니다.
abort() 메서드:
XMLHttpRequest 객체의 HTTP 요청을 중지하고 객체를 초기 상태로 복원합니다.
open() 메소드:
새 HTTP 요청을 생성하고 메소드, URL 및 확인 정보 등을 지정합니다. 구문은 다음과 같습니다: xmlHttp.open(method,url,mode,user,psd); method 대/소문자를 무시하고 post, get, put 등의 요청 메서드를 나타냅니다. url은 대상 주소이고, mode는 요청이 비동기인지 여부를 지정하는 2가지 유형이 아닌 매개변수이며 기본값은 true입니다.
open() 메소드를 호출한 후 ReadyState 속성은 1로 설정됩니다.
send() 메소드:
xmlHttp.send(content)는 전송할 컨텐츠이며 해당 내용이 있으면 무시할 수 있습니다. 내용이 없습니다.
setRequestHeader() 메소드:
setRequestHeader(header, value)는 단일 HTTP 헤더 정보를 설정합니다. ReadyState가 1인 경우 open() 후에 이 메소드를 호출할 수 있으며, 그렇지 않은 경우 이미 존재하는 경우 예외가 반환됩니다. 원본을 덮어쓰게 됩니다. 값 유형은 헤더 이름의 값을 나타내는 문자열 유형 데이터입니다.
getResponseHeader() 메소드:
헤더 정보를 읽어서 내용에 따라 content-type(콘텐츠 유형), content-length(콘텐츠 길이), last-modify(마지막 수정) 날짜 등을 읽을 수 있습니다. 특정 웹사이트는 다릅니다.
getAllResponseHeaders() 메소드:
모든 헤더 정보를 가져옵니다.
다음 예는 헤더 정보를 가져오는 것입니다.
코드 복사 코드는 다음과 같습니다. 这个例子는 IE下工作很顺利에서 FF下死活利，MS原因是FF不支持ActiveX。。。求高手解决下。。。囧rz
JSON JSON의 전체 형식: javascript 객체 표기법 对象标志.是一种文本组织格式，具体是这样的，比如我们有一组数据，用xml的话：
만두 Famle22
<사용자>
那么如果사용JSON적格式，就是：
"user":[{"name":"Dumpling", "gender":"Famle", "age":22}]
优点就是它可以简化获取的数据的解析및存储等工業。
如果상면적例子再写复杂一点，就可以看到JSON的具体格式了，我们了, JS中声明的时候，就可以这么写：
var users={
"users":[
{"name":"Dumpling", "gender":"Famle", "age":22},
{"name":"Sanday", "gender":"Famle", "age":20} ,
{"이름":"샤인", "성별":"가족", "나이":18}
]};
JSON을 사용하여 JSON.stringify(obj)적 방법을 사용합니다. obj자체 자체는 己封装一个类就可以입니다.
이것이 아닙니다.只要给值，然后用函数封装就可以了。来个简单的例子：
<머리>
테스트 <스크립트 언어="javascript">
함수 사용자(이름,나이,성별){
this.userName=이름;
this.userAge=나이;
this.userGender=성별;
}
function submidForm(){
var subForm=document.jsonForm;
var userTable=document.getElementById("사용자");
var newRow=userTable.insertRow(-1);// 테이블 끝에 행 하나 삽입
newRow.insertCell(0).innerHTML=subForm.name.value;
newRow.insertCell(1).innerHTML=subForm.gender.value;
newRow.insertCell(2).innerHTML=subForm.age.value;
var newuser=새 사용자(subForm.name.value,subForm.age.value,subForm.gender.value);
var jsonStr=JSON.stringify(newuser);
경고(jsonStr);
subForm.name.value="";
subForm.age.value="";
}
<본문>
