JSON 의 Ajax 사용
8799 단어 Ajax
JSON 은 JavaScript 에서 대상 과 배열 에 해당 하 며 변환 속도 가 빠 르 고 JavaScript 코드 에 접근 하기 편리 합 니 다.웹 개발 커 뮤 니 티 는 거의 모든 주류 언어 에 JSON 해상도 와 직렬 화 기 를 개발 하여 서버 를 통 해 JSON 데 이 터 를 출력 하고 사용 하 는 것 이 쉬 워 졌 다.
JSON 홈 페이지 는 모든 브 라 우 저 에서 정상적으로 사용 할 수 있 도록 자 바스 크 립 트 에 대한 JSON 서열 화기 / 해석 기 를 제공 합 니 다.이 밖 에 IE8 에는 크 록 포드 해상도 기의 네 이 티 브 버 전이 포함 됐다.
Crockford 의 이 JSON 라 이브 러 리 에는 전역 대상 이 있 습 니 다. 이 대상 은 parse () 와 stringify () 두 가지 방법 이 있 습 니 다.그 중에서 parse () 방법 은 두 개의 인 자 를 받 아들 입 니 다. JSON 텍스트 와 선택 할 수 있 는 필터 함수 입 니 다.들 어 오 는 텍스트 가 올 바른 JSON 인 경우 parse () 방법 은 들 어 오 는 데이터 의 한 대상 을 되 돌려 줍 니 다.다음은 parse () 방법 을 사용 한 예제 입 니 다.
var object=JSON.parse("()"); eval () 을 직접 사용 하 는 것 과 달리 들 어 오 는 텍스트 에 괄호 를 넣 을 필요 가 없습니다.
두 번 째 매개 변 수 는 함수 입 니 다. 이 함 수 는 JSON 키 와 값 을 매개 변수 로 합 니 다.매개 변수 로 들 어 오 는 키 에 결과 대상 이 나타 나 려 면 이 함 수 는 값 을 되 돌려 야 합 니 다.이 반환 값 은 결과 대상 에서 지정 한 키 와 연 결 된 값 이 되 므 로 기본 적 인 분석 체 제 를 다시 쓸 수 있 는 기 회 를 제공 합 니 다.다시 말 하면 이 함수 에서 어떤 키 를 undefined 로 되 돌려 주면 결과 대상 에서 이 키 를 제거 합 니 다.아래 의 예 에서 보 듯 이:
var jsontext="{"
ame\":\"WangGang\",\"age\":29,\"author\":true }";
var object=JSON.parse(jsontext,function(key,value){
switch(key){
case "age": return value+1;
case "author": return undefined;
default: return false;
}
});
alert(object.age) //30
alert(object.author) //undefined 상기 코드 에서 필터 함 수 는 모든 "age" 키 의 값 에 1 을 추가 하고 데이터 의 "author" 키 를 제거 하 며 다른 값 은 그대로 돌아 갑 니 다.따라서 결과 대상 의 age 속성 값 은 30 이 되 었 지만 author 속성 이 없습니다. 이러한 분석 기능 은 서버 가 되 돌아 오 는 데 이 터 를 처리 하 는 데 자주 사 용 됩 니 다.프론트 페이지 가 JSON 데 이 터 를 아래 형식 으로 되 돌려 준다 고 가정 합 니 다.
{
{
"name":"WangMeng",
"email":"[email protected]"
},{
"name":"LinTao",
"email":"[email protected]"
},{
"name":"Jim",
"email":"[email protected]"
}
} Ajax 에서 이상 의 데 이 터 를 요청 한 다음 클 라 이언 트 에서 다음 코드 를 사용 하여 해당 하 는 < ul / > 요 소 를 생 성 할 수 있 습 니 다.
var xhr=createXHR();
xhr.onreadystatechange=function(){
if(xhr.readyState == 4){
if((xhr.status >= 200 && xhr.status < 300)|| xhr.status == 304){
var contacts=JSON.parse(xhr.responseText);
var list=document.getElementById("contacts");
for(var i=0,len=contacts.length;i<len;i++){
var li=document.createElement("li");
li.innerHTML="<a href=\"mailto:" + contacts[i].email + "\">" + contacts[i].name + "</a>";
list.appendChild(li);
}
}
xhr.open("get","addressbook.php",true);
xhr.send(null);
}
}; 이 코드 는 서버 에서 JSON 문자열 을 가 져 온 다음 자바 스 크 립 트 배열 로 해석 하여 배열 을 얻 은 후 그 중의 모든 대상 을 반복 해서 옮 겨 다 니 면 해당 값 을 DOM 에 쉽게 삽입 할 수 있 습 니 다.구체 적 으로 말 하면 < ul / > 요 소 는 < li / > 요 소 를 포함 하고 모든 < li / > 요 소 는 링크 를 포함 하 며 클릭 하면 한 사람 에 게 이메일 을 보 낼 수 있 습 니 다.
JSON 역시 서버 에 데 이 터 를 보 내 는 탐색 형식 이다.데 이 터 를 보 낼 때 보통 JSON 을 POST 요소 요청 주체 에 넣 고 JSON 대상 의 stringify () 방법 은 이 를 위해 설계 되 었 습 니 다.이 방법 은 세 개의 인 자 를 받 아들 입 니 다. 직렬 화 할 대상, 선택 할 수 있 는 교체 함수 (받 지 않 은 JSON 값 을 바 꾸 는 데 사용) 와 선택 할 수 있 는 들 여 쓰기 설명자 (각 단계 마다 들 여 쓰기 빈 칸 수 일 수도 있 고 들 여 쓰기 에 사용 할 문자 일 수도 있 습 니 다).기본적으로 stringify () 는 들 여 쓰 지 않 은 JSON 문자열 을 되 돌려 줍 니 다. 다음은 예 입 니 다.
var contact={
name:"WangMeng",
email:"[email protected]"
};
var jsontext=JSON.stringify(contact);
alert(jsontext); 이 예 에서 경고 상 자 는 들 여 쓰 지 않 은 문자열 을 표시 합 니 다. (\ "name \": \ "wangmeng \", \ "email \": \ "wangmeng \": \ \ \[email protected]\)
모든 JavaSrcipt 값 이 JSON 으로 표시 되 는 것 은 아니 기 때문에 결 과 는 공식 적 으로 지원 되 는 값 만 포 함 됩 니 다.예 를 들 어 함수 와 undefined 값 은 JSON 을 통 해 표시 할 수 없 으 며, 이 를 포함 하 는 모든 키 는 기본적으로 삭 제 됩 니 다.이 기본 행동 을 바 꾸 려 면 두 번 째 매개 변수의 위치 에서 함 수 를 입력 할 수 있 습 니 다.직렬 화 과정 에서 지원 되 지 않 는 데이터 형식 을 만 날 때마다 이 함 수 는 직렬 화 된 대상 에서 역할 영역 에서 사용 되 고 그 매개 변 수 는 해당 하 는 키 와 값 입 니 다.
JSON 이 지원 하 는 데이터 형식 에 대해 직렬 화 과정 에서 이 함 수 를 호출 하지 않 습 니 다. 이러한 유형 은 문자열, 수치, 불 값, null, 대상, 배열 과 Date 를 포함 합 니 다.예 를 들 면:
var jsontext=JSON.stringify([new Function()],function(key,value){
if(value instanceof Function){
return "(function)";
}else{
return value;
}
});
alert(jsontext); //"(function)" 이 예 는 함 수 를 포함 하 는 배열 을 정렬 하려 고 합 니 다.함수 값 을 만 났 을 때 두 번 째 인자 (즉 필터 함수) 는 문자열 '(function)' 로 변환 합 니 다. 이 문자열 은 최종 결과 에 나타 납 니 다.
POST 요청 을 사용 하여 JSON 텍스트 를 send () 에 전달 하 는 방법 으로 JSON 데 이 터 를 서버 에 보 낼 수 있 습 니 다.예 를 들 면:
var xhr=createXHR();
var contact={
name:"wangmeng",
email:"[email protected]"
};
xhr.onreadystatechange=function(){
if(xhr.readyState == 4){
if((xhr.status <= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
}
}
};
xhr.open("post","addcontact.php",true);
xhr.send(JSON.stringify(contact)); 이 예 는 새 연락처 정 보 를 서버 에 저장 하기 때문에 addcontact. php 파일 에 데 이 터 를 보 내야 합 니 다.새로운 연락처 정보 에 따라 contact 대상 을 구축 한 후 JSON 데이터 로 정렬 하여 send () 방법 에 전달 합 니 다.서버 의 웹 페이지 는 서버 엔 드 코드 가 이해 할 수 있 도록 받 은 JSON 데 이 터 를 원래 형식 으로 해석 하 는 동시에 브 라 우 저 에 도 응답 을 보 냅 니 다.
좋은 웹페이지 즐겨찾기
