Ajax 및 JSON 데이터 대화형 스토리지

이번에는 Ajax 및 JSON 데이터의 대화형 저장에 대해 알려드리겠습니다. Ajax 및 JSON 데이터의 대화형 저장에 대한 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

데이터 저장은 JavaScript의 핵심 기능으로, 학습 초기에 헷갈리기 쉬운 문제입니다. 페이지 슬라이딩, 슬라이드 쇼, 페이드 인/아웃 등 눈길을 끄는 특수 효과는 아닙니다. 데이터를 적절하게 저장하면 구조를 구성하는 데 도움이 되고 나중에 애플리케이션이 콘텐츠에 더 쉽게 액세스할 수 있습니다. JavaScript는 기본에서 미래 트렌드까지 진화하는 모델인 다양한 데이터 저장 방법을 제공합니다.

XML은 확장 가능한 마크업 언어(Extensible Markup Language)를 의미하며, 이는 많은 애플리케이션이 데이터를 저장하는 데 사용하는 비교적 유연한 데이터 형식입니다. HTML과 유사하며 요소, 태그 및 속성도 포함하며 모델도 동일합니다. 장점 중 하나는 확장 가능한 형식이고 사전 설정된 특정 데이터 구조에 제한되지 않으며 DOM 표준을 준수하며 AJAX 호출을 사용하여 얻은 데이터는 해당 DOM을 통해 HTML을 구문 분석하는 것과 같습니다.

<ingredient>
<prison>
<name>apple</name>
<color>red</color>
</prison>
<prison>
<name>tomato</name>
<color>red</color>
</prison>
<prison>
<name>peach</name>
<color>pink</color>
</prison>
<prison>
<name>pitaya</name>
<color>green</color>
</prison>
</ingredient>

그러나 XML의 심각한 결함은 도메인 간 Aiax 호출에 사용할 수 없다는 것입니다. 이는 각 Ajax 호출의 XML 데이터가 실행되는 스크립트와 동일한 도메인 이름에 있어야 함을 의미합니다. 그렇지 않으면 요청이 실패합니다.

HTML 저장소도 유사하며 Ajax와 결합하는 것이 가장 쉽습니다. 이 데이터 형식 방식을 사용할 때 중요한 요소는 속도입니다. HTML 코드 조각은 클라이언트에서 구문 분석하지 않고 DOM에 직접 출력할 수 있으므로 HTML을 구문 분석하기 위해 추가 JavaScript 코드를 작성할 필요가 없습니다.

<ul>
<li><a href="boke.js">apple:red</a></li>
<li>tomato:red</li>
<li>peach:pink</li>
<li>piyata:green</li>
</ul>

저장하는 데이터가 HTML 코드와 혼합될 수 있어 유지 관리성이 떨어지는 단점에 대해 이야기해 보겠습니다. 또한 처리 코드를 작성할 때 개발자는 서버 측에서 몇 가지 미세한 제어 조치를 취해야 할 수도 있습니다.

다음은 JavaScript를 데이터 저장에 사용하는 방법을 단계별로 설명합니다...

Variables

JavaScript는 문자열, 값, 부울 등을 허용하는 가장 기본적인 데이터 저장 방법입니다. . 핵심 내용은 범위 문제입니다.

변수와 관련된 성능 문제:

변수는 JavaScript 파일에 캐시되므로 범위 내에서 반복적으로 사용할 수 있습니다. 데이터로 사용 횟수가 1회보다 큰 경우 변수에 저장해야 합니다.

Array

배열은 일반 배열, 연관 배열 및 다차원 배열과 마찬가지로 모두 요소 목록입니다. 이 형식은 다양한 데이터 저장의 매우 유연한 형식입니다. 가장 기본적인 형태의 배열을 익히는 것은 다른 복잡한 형태를 사용하는 데에도 큰 이점이 될 것입니다. 배열 요소에 액세스하는 것은 기본 대화형 코드에 일반적입니다. 데이터 저장 유형으로서 배열의 중요성을 고려하여 JavaScript는 배열 상호 작용 작업을 위한 다양한 독점 메서드를 제공합니다.

.join() 메서드는 배열의 각 요소에 대한 연결자로 사용할 문자를 지정할 수 있습니다. Slice() 메소드 배열의 특정 범위 내의 요소를 출력할 수 있습니다. Shift() 및 unshift() 메소드는 각각 배열의 선두에 있는 요소를 제거하거나 추가하는 데 사용됩니다. 배열의 마지막 요소를 반환합니다. concat() 메서드는 매개 변수의 순서에 따라 여러 배열을 하나의 배열로 연결하는 데 사용됩니다. sort() 메서드는 배열의 요소를 알파벳 순서 또는 사용자 정의 순서로 정렬할 수 있습니다. 그러나 첫 번째 문자를 기준으로만 정렬됩니다. 일반적으로 모두 잘못되었습니다.

Objects

데이터가 더 복잡해지고 관리하기 어려워지면 배열을 객체로 변환하는 것을 선택하겠습니다. 객체가 저장되는 방식이 더 읽기 쉽기 때문입니다.

//对象数据存储
var meatball = {
bread:"wang",
meat :"li",
cheese : "zhang"
};
//返回对象的bread 
alert(meatball.bread);

객체가 효율성에 미치는 영향

위 코드는 레이어가 하나뿐이지만 무한히 중첩될 수 있습니다. 객체는 코드를 더 잘 구성하고 모듈성을 향상시킬 수 있습니다. 하지만 동시에 성능과 유지 관리성 사이의 균형을 고려해야 합니다. 이 세 가지 중 하나를 찾아야 하기 때문입니다. 객체 지향프로그래밍 기술을 사용하는 경우 중첩이 3레벨 이상에 도달하면 성능 문제가 발생하지만 서버 측에서 사용할 때는 그렇지 않으므로 프런트 엔드 개발자가 언제 결정해야 합니다. 객체 지향 프로그래밍 기술을 사용합니다.

JSON

JSON是一种易于同jacascript 集成的数据格式，它通常是在用JavaScript调用外部服务器时使用的。JSON数据存放于独立的文件中，而且通常位于另一台完全不同的服务器上。它现在是最常见的一种调用API服务时所使用的数据格式，人们之所以选中它，是因为此格式非常易于阅读。起初，JSON格式是作为一种XML格式的替代方案而出现的，但很快它就在数据交换领域占据了主流的地位。它是一种轻量级的数据格式，易于通过远程Ajax调用进行跨域名访问。尽管JavaScript对JSON格式的解析提供了原生的支持，但它还是一种独立于平台的格式，客户端与服务器端在数据交换时都可以使用。

由于JSON格式具备跨域名访问的能力，所以为了防止一切恶意行为，我们务必只使用从可信的数据源中获取JSON。

这是一个 Salad.json 数据文件：

//ajax JSON Salad
var ingredient = {
"fruit":[
{
"name" : "apple",
"color" : "green"
},
{
"name" : "tomato",
"color" : "red"
},
{
"name" : "peach",
"color" : "pink"
},
{
"name" : "pitaya",
"color" : "white"
},
{
"name" : "lettuce",
"color" : "green"
}
]
};

JSON最常见的用途就是配合API调用，在于API为基础的网络程序开发环境中，使用何种后端语言进行开发，数据格式都无需改变。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Ajax如何读取txt并对其内容进行分页展示

pushState+Ajax实现无刷新的页面切换

위 내용은 Ajax 및 JSON 데이터 대화형 스토리지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!