실례를 통해 json과 jsonp의 원리와 사용 방법을 분석하다
aax에서 JSON은 데이터 교환 문제를 해결하는 데 사용되고, JSONP는 전역을 실현합니다.
비고: 크로스 도메인도 서버 에이전트를 통해 해결할 수 있습니다.
이해: JSON은 데이터 교환 형식이고 JSONP는 개발자의 총명한 재능에 의존하여 만들어진 비공식적인 크로스 데이터 상호작용 프로토콜이다.
2.JSON: 텍스트 기반의 데이터 교환 방식이나 데이터 설명 형식이라고 하는데 이 형식을 선택해야 할지 여부는 우선 그 장점에 주목해야 한다.
JSON의 장점:
JSON은 매우 간단한 방식으로 데이터 구조를 묘사할 수 있고 XML이 할 수 있는 것은 모두 할 수 있기 때문에 크로스플랫폼 방면에서 양자를 가리지 않는다.
1：{} “ ”
var person = {
"Name": "Bob",
"Age": 32,
"Company": "IBM",
"Engineer": true
}
2：[] “ ”
var members = [
{
"Name": "Bob",
"Age": 32,
"Company": "IBM",
"Engineer": true
},
{
"Name": "John",
"Age": 20,
"Company": "Oracle",
"Engineer": false
},
{
"Name": "Henry",
"Age": 45,
"Company": "Microsoft",
"Engineer": false
}
]
// John
var johnsCompany = members[1].Company;
3：{} []
var conference = {
"Conference": "Future Marketing",
"Date": "2012-6-1",
"Address": "Beijing",
"Members":
[
{
"Name": "Bob",
"Age": 32,
"Company": "IBM",
"Engineer": true
},
{
"Name": "John",
"Age": 20,
"Company": "Oracle",
"Engineer": false
},
{
"Name": "Henry",
"Age": 45,
"Company": "Microsoft",
"Engineer": false
}
]
}
// Henry
var henryIsAnEngineer = conference.Members[2].Engineer;JSONP(JSON with Padding)는 자료 형식인 JSON의'사용 모드'로 웹 페이지를 다른 네트워크에서 자료를 요구할 수 있다.동원 정책 때문에 일반적으로 서버 1에 있습니다.example.com의 웹 페이지는 서버가 아닌 페이지와 연결할 수 없습니다.example.com의 서버는 소통하지만 HTML의
3.1 JSOPN 크로스 필드의 원리: script 라벨의 src 속성, 크로스 필드 지원;그것의 기본 사상은 웹 페이지가
3.2 JSOP는 두 부분을 포함한다. 리셋 함수와 데이터. 리셋 함수는 응답이 왔을 때 호출해야 하는 함수로 일반적으로 검색 문자열을 통해 추가한다.데이터는 리셋 함수에 전송된 JSON 데이터입니다. 정확히 말하면 JSON 대상입니다. 직접 접근할 수 있습니다.
3.3 JSONP의 단점:
1) GET만 가능하고 POST는 없습니다.
2) 다른 도메인에서 로드된 코드가 안전하지 않을 수 있습니다.JSONP 요청이 실패했는지 확인하기 어렵습니다(XHR에 error 이벤트가 있음). 일반적인 방법은 타이머를 사용하여 응답의 허용 시간을 지정하고 시간을 초과하면 응답에 실패했다고 생각하는 것입니다.
클라이언트가 데이터를 사용하는 것을 편리하게 하기 위해 비공식 전송 프로토콜 jsonp를 점차적으로 형성하는 이 프로토콜의 요점은 사용자가callback 파라미터를 서버에 전달하도록 허용하는 것이다. 그리고 서버가 데이터를 되돌릴 때 이callback 파라미터를 함수 이름으로 감싸서 클라이언트가 임의로 자신의 함수를 사용자 정의하여 자동으로 되돌려 주는 데이터를 처리할 수 있도록 하는 것이다
표시:
function ajaxFun(){
var strUrl="http://www.b.com/demo/json.txt";
$.ajax({
type:"get",
url:strUrl,
dataType: 'jsonp',
jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback: "flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success: function(data){
alert('您查到的信息：票价' + data.price + '元，余-票' + data.tickets + '张。');
},
error: function(XMLHttpRequest,textStatus,errorThrown){
alert("error");
// 状态码
console.log(XMLHttpRequest.status);
// 状态
console.log(XMLHttpRequest.readyState);
// 错误信息
console.log(textStatus);
}
});
}그 중에서sucess의 코드 단편도 쓰지 않고 되돌아오는 데이터를 호출할 수 있는 리셋 함수를 따로 만들 수 있습니다.아래와 같이 데이터를 얻을 수 있다.
var flightHandler = function (data) {
alert('당신이 찾은 정보: 표값'+data.price +'원, 여표'+data.tickets +'장.');
};
주의해야 할 것은, aax 크로스 필드 요청(jsonp)에서 서버가 데이터 형식을 되돌려주는 것은: flightHandler({"price":"120", "tickets":"20"});만약 직접 이러한 json 형식 {"price":"120", "tickets":"20"},parser error의 오류를 보고합니다.이 함수의 마지막 분호 ";"에 주의하십시오.추가해야 합니다. 그렇지 않으면 같은 페이지에 여러 개의 aax 요청이 있고 데이터가 되돌아오지 않을 때 다른 aax 요청을 보낼 때parsererror 오류 메시지가 나타날 수 있습니다.이런 오류는 매우 은밀하여 개발할 때 쉽게 발견하지 못하고 병행 테스트를 할 때 쉽게 드러난다.
서버 코드 목록:
public String jsonReturn(HttpServletResponse response, String callback, Map<String, Object> jsonMap) {
if (org.apache.commons.lang.StringUtils.isEmpty(callback)) {
return appAjaxJson(response, getJson(jsonMap));
}
return appAjaxJson(response, callback + "(" + getJson(jsonMap) + ")");
}
public String appAjaxJson(HttpServletResponse response, String jsonString) {
return appAjax(response, jsonString, "text/html");
}
public String appAjax(HttpServletResponse response, String content, String type) {
try {
response.setContentType(type + ";charset=UTF-8");
response.setHeader("Access-Control-Allow-Origin", "*");//表示支持跨域请求
// 如果IE浏览器则设置头信息如下
if ("IE".equals(type)) {
response.addHeader("XDomainRequestAllowed", "1");
}
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
response.getWriter().write(content);
response.getWriter().flush();
} catch (IOException e) {
this.logException(e);
}
return null;
}4.1 JSON.stringify(): 인삼(JavaScript 값)을 JSON 문자열로 변환합니다.
示列1：
let arr = [1,2,3];
JSON.stringify(arr);//"[1,2,3]"
typeof JSON.stringify(arr);//"string"
示例2：
//判断数组是否包含某对象
let data = [
{name:'echo'},
{name:'听风是风'},
{name:'天子笑'},
],
val = {name:'天子笑'};
JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1;//true
//判断两数组/对象是否相等
let a = [1,2,3],
b = [1,2,3];
JSON.stringify(a) === JSON.stringify(b);//true표시:
let string = '[1,2,3]';
console.log(JSON.parse(string))//[1,2,3]
console.log(typeof JSON.parse(string))//object
4.3 JSON.stringify () 와 toString () 의 차이점
let arr = [1,2,3];
JSON.stringify(arr);//'[1,2,3]'
arr.toString();//1,2,3
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
콘텐츠 SaaS | JSON 스키마 양식 빌더Bloomreach Content를 위한 JSON Form Builder 맞춤형 통합을 개발합니다. 최근 Bloomreach Content SaaS는 내장 앱 프레임워크를 사용하여 혁신적인 콘텐츠 유형 필드를 구축할...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
