JavaScript 고급 3장 Ajax, JSON 및 프로토타입 소개

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() 메소드:
모든 헤더 정보를 가져옵니다.
다음 예는 헤더 정보를 가져오는 것입니다.

코드 복사 코드는 다음과 같습니다.

<머리>
Ajax 테스트

<본문>

<본문>

这个例子는 IE下工作很顺利에서 FF下死活利，MS原因是FF不支持ActiveX。。。求高手解决下。。。囧rz
JSON
JSON의 전체 형식: javascript 객체 표기법 对象标志.是一种文本组织格式，具体是这样的，比如我们有一组数据，用xml的话：

만두 Famle22
<사용자>
那么如果사용JSON적格式，就是：
"user":[{"name":"Dumpling", "gender":"Famle", "age":22}]
优点就是它可以简化获取的数据的解析및存储等工業。
如果상면적例子再写复杂一点，就可以看到JSON的具体格式了，我们了, JS中声明的时候，就可以这么写：

复aze代码代码如下:

 
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="";
}

<본문>

이름:		성별:	<이름 선택="성별">	나이:

害怕太长我就遮起来了，反正结果是这样子滴:

当然，如果要一次封装很多，比如提交了5 6个用户然后一次封装成JSON格式，可以把这几个放到交个Arry里，然后把arry작품은 stringify의 参数就可以，自己试一下吧~我就不上代码了~

JS中对JSON解析和赋值

这一块就算是json的中心了, 对他的解析其实很简单的, 比如还是之前的例子,

复代代码代码如下:

 
var usersJson={ 
"users":[ 
{"name":"Dumpling", "gender":"Famle", "age" :22}, 
{"name":"Sanday", "gender":"Famle", "age":20}, 
{"name":"Shine", "gender":"Famle" , "age":18} 
], 
"objects":[ 
{"name":"food","price":55} 
] 
}; 

그런 다음 sanday의 값을 얻으려면 다음과 같이 작성할 수 있습니다. var username=uersJson.users[1].name 이것만 알면 다른 모든 것은 괜찮을 것입니다~
원한다면 데이터를 수정한 다음 값을 직접 할당하면 됩니다. 예를 들어 해당 음식의 가격을 수정하고 싶다면 userJson.objects[0].price=43
입력이 합법적인지 판단하는 것은 저도 마찬가지입니다. 쓰기가 귀찮아서 시간이 많이 걸립니다.
JSON은 여기까지입니다. 이제 마지막 부분입니다.
프로토타입 프레임워크
먼저 프로토타입 웹사이트로 이동하세요: http://www.prototypejs.org/
실제로 JS로 많은 확장이 이루어집니다. 이는 대략 일반 방법과 템플릿의 두 부분으로 구성됩니다. $() $$() $A() 등과 같은 일반적인 메소드와 템플릿은 JS 내부 클래스를 확장하고 다양한 Ajax 애플리케이션에 대한 지원 템플릿을 제공합니다. 자세한 사항은 제공된 홈페이지를 확인하시면 됩니다. 다음은 두 가지 예입니다. 자세한 내용은 API 페이지로 이동하세요. http://api.prototypejs.org/ (예, 저는 매우 게으릅니다╮(╯▽╰)╭)
$() 메서드: 요소 가져오기 객체, 유사 getElementById 메소드의 경우 여러 매개변수를 허용하고 배열을 반환할 수 있습니다.
$$() 메서드: getElementByTagName() 메서드와 유사하게 지정된 요소 배열을 가져오고, 태그 이름을 기반으로 개체를 가져옵니다.
Ajax 객체: 방금 말했듯이 브라우저가 다르기 때문에 많은 판단 코드를 작성해야 하므로 프로토타입이 이를 대신 수행합니다. Ajax.Request 객체는 XMLHttpRequest 객체를 생성하기 위한 코드도 캡슐화합니다. 다양한 처리로 서버가 정보를 반환하는 일반적인 방법이므로 여전히 매우 유용합니다. 더 알고 싶으시면 계속해서 위의 API 링크를 참고해주세요(==!)
Form 객체 : 정말 흔히 사용되는 것이기 때문에 프로토타입이 중점을 두는 객체이기도 합니다. API 부분을 참조할 수 있습니다. . . . . .

JavaScript 고급 3장 Ajax, JSON 및 프로토타입 소개_기본 지식